1.行内式
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
2.内嵌式
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
3.外链式
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
选择器分类：
1.属性选择器
[type]
[type='text']
input[type='text']
input[type ^= 'text']
input[type $= 'text']
input[type *= 'text']
2.基础选择器(CSS1.0)
1）标签选择器
标签名{属性1:属性值1; 属性2:属性值2;}
2）类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签可以指定多个类名,类名之间用空格隔开
3）id选择器
元素的id值是唯一的,只能对应于文档中某一个具体的元素
4）通配符选择器*
3.复合选择器
1）子代选择器
直接子元素 父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
2）后代选择器
标签包含的都是后代, 包括子代,子代也是属于后代.
3）交集选择器
挨着的,中间不要有空格,不要有逗号
div.one.two { }获取页面上所有类为one,并且类同时为two的div标签
4）并集选择器
用逗号隔开 p.one , span.two { }找到页面上类为one的p标签,以及类为two的span标签
4.a标签伪类选择器/锚伪类
:link 未访问的链接样式
:visited 已访问的链接样式
:hover 鼠标悬停元素上的样式
:active 鼠标点击元素,但是没有松开时候的样式
顺序 lv ha
:hover和:active是可以作用在其他的元素上的,不一定要是a链接
5.位置伪类选择器
li:first-child { }
li:last-child { }
li:nth-child(4) { }
li:nth-child(odd) { }
li:nth-child(even) { }
li:nth-child(3n) { }
伪类 :not选择器 比如:not§ { } ，div.one :not§ { } ，input:not([type=‘text’])
三大特性：
1.继承性
text-开头的; font-开头的; color line-height; 块级元素的宽.(脱标的元素不能继承宽)
a标签的颜色不能继承获取, 要改a标签的颜色只能作用在a身上
h标签的大小不能继承获取, 要修改h标签的大小,只能作用在h标签上.
2.层叠性,解决样式冲突
用不同的选择器作用在同一个元素身上, 写了相同的样式,但是样式值不同, 那有的样式值就会把有的样式值给层叠掉.
3.优先级
继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
复杂选择器就要用权重来算.
用四个0来算 ：
第一个0的位置是important的个数
第二个0的位置是id选择器的个数
第三个0的位置是类选择器的个数
第四个0的位置是标签选择器的个数
先比第一个数谁大, 如果一样比较第二个,第二个一样比较第三个…以此类推.
元素的显示方式display
inline; 行内元素 一行可以显示多个，不能设置宽高
常见的: span a b i s u
block; 块级元素 一行只能显示一个，可以设置宽高
常见的: div p ul li h1-h6
inline-block;行内块元素 一行可以显示多个，可以设置宽高
常见的行内块: input img
显示方式是可以相互转换的.
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
