CSS基础语法

2019独角兽企业重金招聘Python工程师标准>>>

CSS语法

---

css规定由两个主要的部分构成：选择器，以及一条或多条声明。

selector{

declaration1; declaration2; ... declarationN

}

选择器通常是您需要改变的样式的Html元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每一个属性有一个值。属性和值被冒号分开。

selector{property：value}

下面代码作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。

在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。

h1{color：red；font-size：14px；}

下面示意图为您展示了上面代码的结构：

提示：请使用花括号来包围声明。

---

值的不同写法和单位

除了英文red，我们还可以使用十六进制颜色的值#ff0000：

p{color:#ff0000;}

为了节约字节数，我们可以使用css的缩写来表示：

p{color：#ff0；}

我们还可以通过RGB值：

p{color：rgb（255,0,0）；}

p{color：rgb（100%,0%,0%）；}

请注意：当使用rgb百分比时，即使当值为0时也要写成百分比符号。

---

记得写引号：

提示：如果值为若干单词，则要给值加引号；

p{font-size：“sans serif”；}

---

多重声明：

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。

例如展示一个红色文字的居中段落。

p{text-align：center；color：red;}

这样写视乎对我们的阅读性降低了，现在来改变一下是不是更美观了：

p{

   text-align:center;

   color:black;

    font-family:arial;

}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body{

    color：#000；

   background：#fff；

   margin:0;

   padding:0;

   font-family:Georgia,Palation,serif;

}

是否包含空格不会影响css在浏览器的工作效果。css对大小写不敏感。

转载于:https://my.oschina.net/u/1422716/blog/669184