作为一个小白,防止遗忘,想理一下一些东西。
1、基本选择器:
(1)标签选择器
(2)类选择器(不能是纯数字,不能以数字开头)
(3)多类名选择器
(4)id选择器
(5)通配符选择器(*使用较少)
2、复合选择器
(1)后代选择器(所有后代)
(2)子代选择器(亲儿子)
(3)交集选择器
(4)并集选择器(eg. div,p,span{})
(5)伪类选择器(:link :visited :hover :active)
3、id选择器和类选择器的最大区别在使用的次数
4、样式的显示效果跟HTML元素中的类名先后顺序没有关系。
5、<hr />------线
6、font:font-style font-weight font-size/line-height font-family
(1)连写时font-style 和font-weight 可以省略。font-size 和font-family不可以省略。
(2)顺序不能乱
(3)font-style(normal----正常/ italic------斜体)我们常用这个样式使斜体(<i></i><em></em>)变正常。
(4)font-weight:字体粗细
normal:正常字体(相当于400)
bold:粗体(相当于700)
bolder:特粗体(IE5+)
lighter:细体(IE5+)
number:100-900
(5)font-size:字体大小(尽量使用偶数,ie6等老式浏览器支持奇数会有BUG)
px:像素,em,rem,pt....
(6)font-family
1、 可以同时指定多个字体,中间以逗号隔开,浏览器在不支持第一个字体的情况下,会继续尝试下一个,知道找到合适的字体。
2、尽量使用默认字体,一般有微软雅黑、宋体等。若必须使用特殊字体时,建议使用图片。
3、Unicode
宋体-------------\5B8B\4F53
微软雅黑----------\5FAE\8F6F\96C5\9ED1
黑体-----------\9ED1\4F53
.................
7、color
1、预定义的颜色值(red、green、blue、pink.....)
2、十六进制(#FFFFFF、#333333、#ffff00)------------两个挨着相同的可以合并写#000000-----------》#000
3、RGB代码----------》rgb(红,绿,蓝) 0~255
8、line-height 行间距:基线和基线之间的距离(一般比字号大7-8px 就比较好看了)
9、text-indent:2em
10、text-decoration
1、none:默认
2、underline:下划线(等同<u><ins>)
3、overline:文本上一条线
4、line-through:删除线(等同<s><del>)
5、blink:
11、文本修饰的一些标签
1、<em><i>--------------------倾斜
2、<strong><b>----------------加粗
3、<u><ins>--------------------下划线
4、<s><del>--------------------删除线
12、块级元素<div>、、<ul>、<li>、(<p>、<h1>、<h2>是属于文字类块级元素,不要放其他块级元素)
1、可以容纳内联元素和其他块级元素
2、宽度是默认容器的100%
3、高度、宽度、内外边距等都可以控制
4、总是新起一行
13、行内元素<a>、<span>、<strong>、<em>、<u>、<b>等
1、宽高无效,默认宽度就是本身内容的宽度
2、和相邻行内元素在一行上
3、水平方向padding和margin可以设置,垂直方向无效
4、行内元素内只能容纳文本或者其他行内元素。(<a>有些特殊)
14、行内块元素<img /> <input /> <td>
15、display
1、inline:行
2、block:块
3、inline-block:行块
16、CSS的特性(层叠性、继承性、特殊性)
1、样式冲突遵循就近原则
2、样式不冲突,不会层叠
3、子标签会继承父标签的某些样式(颜色、字体等)
17、权重
1、标签:0001
类,伪类:0010
ID:0100
行类样式:1000
!important:无穷大(eg. div{ color:hotpink !important } )
2、权重会叠加
3、权重相同遵循就近原则
4、涉及到继承问题时,优先自己。比如下面的例子,原理上p标签可以继承父级的颜色,而#father的权重也更高,但在p标签自己设置了颜色样式的情况下,优先执行自己的蓝色。
例:<style>
#father{color:red;}
p{color:blue;}
</style>
<div id="father">
<p>我依旧是蓝色</p>
</div>