css语法包含如下部分:
- 选择器:用于选择需要添加样式的元素。
- 属性(property):样式的属性名称,例如color代表颜色。
- 取值与单位:属性对应的值以及单位。
- 语法规则:css的某些固定语法。
- 注释:用户对css的程序描述,不执行。
css的基本语法规则
- 忽略大小写(但在定义类选择器时识别大小写),建议使用小写。
- 多重声明:使用多个属性以及取值同时渲染一组标签。
p {
text-align: center;
color: black;
font-family: arial;
}
<!--
注意开始括号与结束括号的位置
属性值要有一个tab键的缩进
-->
css的取值与单位:css通过取值与单位对属性进行描述,可分为如下三类
- 长度类取值单位:用于修饰长度,例如高度宽度等。
-
绝对长度单位包括有: cm(厘米), mm(毫米), in(英寸), pt(点1pt = 1/72in ), pc(派卡1pc = 12pt ), px(像素)。
<div style="width: 100px;background-color: yellow;">
宽度为100px,背景色为黄色
</div>
<!--常用的单位取值为px--> -
相对长度单位:按照一定比例换算后计算长度,em,rem,%都是相对长度单
<!--常用的单位取值为rem(css3标准),%-->
- em(相对于当前标签内文本的字体尺寸)
<div style="width: 10em>
<div style="width: 8em; font-size: 12px;">
</div>
</div>
<!--浏览器的默认字体大小为16px,字体属性具备继承特性,可继承父容器的字体属性值-->
<!--浏览器都有最小字体限定,例如chrome最小字体为12px,通过特殊属性可以调节--> -
rem(相对于html标签内文本的字体尺寸)
html {
font-size: 30px;
}
<div style="width: 10rem; ">
</div>
<!--rem是css3标准单位,因此在低版本的pc浏览器中无法兼容-->
<!--rem常用在手机端开发,根据不同屏幕给html设定不同的字体
在其他标签中使用rem作为长度单位,从而完成响应式布局--> -
百分比(相对于父容器相同属性的比例)
<div style="width: 50%; ">
<div style="width: 50%; ">
</div>
</div>
<!--百分比是css2的取值单位,可以在pc端完成响应式布局-->
- em(相对于当前标签内文本的字体尺寸)
-
- 颜色类取值单位:用于修饰字体、背景等属性
HEX:#ffffff:以16进制表示颜色,但是不能表示透明(最常用) 。
RGBA: rgba(0,0,0,0.5),由光的三原色红色(R)、绿色(G)、蓝色(B)以及透明组合而成。优点是支持透明。(css3标准)
HSL:hsl(30%,50%,50%),由色调(H)、饱和度(S)、亮度(L)三个颜色通道,按百分比组合而成。
RGB:rgb(128,128,128),由光的三原色红色(R)、绿色(G)、蓝色(B),按比例组合而成。
-
关键字:color:red,以颜色的英文名称表示颜色,但只能表示少量颜色
<style type="text/css"><!--使用style标签包裹-->
.container{/*先择器*/
background-color: red;/*关键字*/
color: hsl(30%,50%,50%);/*HSL*/
color: rgb(128,128,128);/*RGB*/
color: rgba(0,0,0,0.5);/*RGBA*/
color: #00FFFF;/*HEX*/
}
</style>
- 文本类特殊取值:用于修饰文本的特殊取值。
inherit:声明当前元素的属性继承父容器属性,文本类属性的默认取值。
-
initial :声明当前元素的属性为浏览器的默认值。(css3,在IE中不兼容)
<div style="font: '微软雅黑' bold 30px;">
<div style="font: inherit;">
微软雅黑
</div>
<div style="font: initial;">
默认字体
</div>
</div>