CSS基本语法及页面
CSS基本语法
选择器 {属性:值; 属性:值; 属性:值;}
div{ width:100px; height:100px; color:red }
css页面引入方法
- 外联式: 用
<link>
标签,链接到外部样式表<link rel="stylesheet" type="text/css" href="css/main.css">
- 嵌入式: 在
<style>
标签中写入样式表<style type="text/css"> div{ width:100px; height:100px; color:red } </style>
- 内联式: 直接在标签的
style
属性中写样式<div style="width:100px; height:100px; color:red ">content</div>
CSS常用属性
文本样式
css属性 | 作用 |
---|---|
color | 设置文字的颜色(没有font-color 属性) |
font-size | 设置文字的大小 |
font-family | 设置文字的字体,尽量避免中文 `font-family:‘MicrosoftYahei’ |
font-style | 设置字体是否倾斜. normal 表示不倾斜,italic 表示倾斜 |
font-weight | 设置文字是否加粗. normal 表示不加粗,bold 表示加粗 |
font | 同时设置文字的多个属性,注意顺序font:font_weight font-size/line-height font-family 如 font:normal 12px/36px '微软雅黑'; |
line-height | 设置文字的行高 |
text-decoration | 设置文字的下划线. none 表示无下划线 |
text-indent | 设置文字首行缩进 |
text-align | 设置文字水平对齐方式left |center |right |
表格样式
css属性 | 作用 |
---|---|
border-collapse | 设置边框合并.collapse 表示合并边框,用以制作一像素宽的边线的表格 |
颜色表示法
CSS支持三种颜色值表示方法:
- 颜色名表示,如:
red
红色,gold
金色 - rgb表示,如:
rgb(255,0,0)
红色 - 16进制数值表示,如:
#ff0000
红色,可简写成#f00
CSS选择器
基础选择器
-
标签选择器
: 通过标签类型选中元素. 影响范围大,建议尽量应用在层级选择器中.
其中*
代表所有标签,是大杀器,常用于更改标签基本属性// 消除所有间距 *{margin:0;padding:0}
-
id选择器
: 通过标签id
属性选择元素. 一个页面中,每个id
对应的元素是唯一的,id
名称不能重复语法:
#id名
<style type="text/css"> #box{color:red} </style> <div id="box">对应以上一条样式,其它元素不允许应用此样式</div>
-
类选择器
: 通过class属性选择元素. 一个类可应用于多个元素,一个元素上也可以使用多个类语法:
.类名
<style type="text/css"> .red{color:red} .big{font-size:20px} .mt10{margin-top:10px} </style> <div class="red">....</div> <h1 class="red big mt10">同时受到三个样式表约束</h1> <p class="red mt10">....</p>
-
层级选择器
: 用于选择后代(子, 孙, …)元素,可与标签元素结合使用.语法: 用空格分隔上下级元素
<style type="text/css"> .box span{color:green} .box .red{color:pink} .red{color:red} </style> <div class="box"> <span>.box span to green</span> <a href="#" class="red">.box .red to pink</a> </div> <h3 class="red"> .red to red</h3>
-
组选择器
: 选中多个样式相同的元素
语法: 用逗号分隔同级元素<style type="text/css"> .box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} </style> <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>
-
伪类及伪元素选择器
语法:
选择器:伪类或伪元素
常用伪元素和伪类如下:伪元素 或 伪类 作用 hover
表示鼠标悬浮在元素上时的状态 before
|after
可通过样式在元素前后插入内容 <style type="text/css"> .box1:hover{color:red} .box2:before{content:'行首文字'} .box3:after{content:'行尾文字'} </style> <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>
CSS3新增选择器
下面的
E
和F
既可以是标签,也可以是类名
按类或标签选择
-
不区分类型,计算所有元素个数
选择器 作用 E:nth-child(n)
匹配元素类型为 E
且是父元素的第n个子元素E:nth-last-child(n)
匹配元素类型为 E
且是父元素的倒数第n个子元素(与上一项顺序相反)E:first-child
匹配元素类型为 E
且是父元素的第一个子元素E:last-child
匹配元素类型为 E
且是父元素的最后一个子元素E:only-child
匹配元素类型为 E
且是父元素中唯一的子元素上述括号内的中
n
可以是由 以n
为变量的代数式 代替, 如nth-child(2n+1)
表示 选中所有奇数项 -
只计算对应类型的个数
选择器 作用 E:nth-of-type(n)
匹配父元素的第n个类型为 E
的子元素E:nth-last-of-type(n)
匹配父元素的倒数第n个类型为 E
的子元素(与上一项顺序相反)E:first-of-type
匹配父元素的第一个类型为 E
的子元素E:last-of-type
匹配父元素的最后一个类型为 E
的子元素E:only-of-type
匹配父元素中唯一子元素为 E
的子元素 -
根据元素状态选中元素
选择器 作用 E:empty
选择一个空的元素 E:enabled
可用的表单控件 E:disabled
失效的表单控件 E:checked
选中的checkbox E:target
选中的锚点 -
根据层级关系选中元素
选择器 作用 E:not(s)
不包含某元素 E > F
E
元素的子F
元素(孙F
元素不被选中)E ~ F
E
元素后面所有兄弟F
元素E + F
E
元素后面紧挨着的兄弟F
元素
按属性选择
选择器 | 作用 |
---|---|
E[data-attr] | 含有data-attr 属性的元素 |
E[data-attr='ok'] | 含有data-attr 属性的元素且它的值为'ok' |
E[data-attr^='ok'] | 含有data-attr 属性的元素且它的值的开头含有'ok' |
E[data-attr$='ok'] | 含有data-attr 属性的元素且它的值的结尾含有'ok' |
E[data-attr*='ok'] | 含有data-attr 属性的元素且它的值中含有'ok' |
CSS权重
选择器 | 例子 | 权重 |
---|---|---|
!important,加在样式属性值后 | 10000 | |
内联样式 | style="" | 1000 |
ID选择器 | #content | 100 |
类,伪类和属性选择器 | content.``:hover | 10 |
标签选择器和伪元素选择器 | div.``p.``:before | 1 |
通用选择器(*),子选择器(>),相邻选择器(+),同胞选择器(~) | 0 |