CSS 边框和颜色

在现代web前端开发中HTML元素的外观属性值都要在级联样式表CSS里设置

级联样式表有三个层级，内联样式表，内部样式表和外部样式表

在任何一个层级样式表中对外观属性值的修改都会体现在网页里

当冲突发生时内联样式表的优先级最高，内部样式表次之，外部样式表优先级最低。

内联样式表把和某HTML元素的外观属性值以字符串形式写在该HTML元素开始标签的style属性里面

字符串的语法形式如下：

在CSS中background-color属性可以改变HTML元素内容的背景颜色信息

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

在CSS中color属性可以改变HTML元素内容的文字颜色信息

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

在CSS中可以通过background-color属性来设定元素背景的颜色，下面是一个例子：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>

</body>
</html>

颜色既可以用十进制RGB值来表示，也可以用16进制RGB值来表示

十六进制前面要加#号，ff在16进制中代表255、63在16进制中代表99、47在16进制中代表71

在CSS中可以给块元素添加边框线，

并通过border-width属性指定边框线的粗细（例如2px），

通过border-style属性指定边框线的样式(例如solid, 实线)

通过border-color属性指定边框线的颜色（例如Tomato）。

本来赋值语句应该是border-2px; border-style:solid; border-color:Tomato;

为了节省笔墨，可以把这三个属性的赋值语句简化成border:2px solid Tomato;

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

border-style除了可以赋值为实线solid外，还可以设置成虚线dotted或dashed和双实线double等。

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px double Tomato;">Hello World</h1>

<h1 style="border: 2px dotted DodgerBlue;">Hello World</h1>

<h1 style="border: 2px dashed Violet;">Hello World</h1>

</body>
</html>

也许有的同学会问，边框分为上边框下边框左边框右边框，我能不能单独指定其中某个方向的边框的外观呢

答案是肯定的，可以通过border-top-style，border-right-style,border-bottom-style和border-left-style来指定

上边框，右边框，下边框和左边框的样式。

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<p style="border-top-style: dotted;border-bottom-style: solid;">2 different border styles.</p>

</body>
</html>

另外，可以指定某个方向上边框的宽度、样式和颜色信息

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2 style="border-left: 6px solid red;background-color: lightgrey;">The border-left Property</h2>


</body>
</html>