CSS 学习笔记
0. CSS 基础入门
一门标记语言,不难,靠记、靠练习
三种引入方式(外部样式表、内部样式表(style标签)、行内样式(style属性)),禁用@import.
结构(html)、表现(CSS)、行为(JS)分离。
分离是为了更好地维护性,所以推荐外部样式表。
End CSS 基础入门
1.CSS选择器
1.1.选择器种类:
单一选择器:通用选择器、标签选择器、类选择器、ID选择器、属性选择器(属性是可以随便写的,如[dd=dd1])、伪类选择器。
复合选择器:后代选择器(空格)、子选择器(>)、选择器分组(,)、兄弟选择器(+)、组合选择器(div.nav)。
原来[]是属性选择器,div.nav表示所有class包含(不是等于)nav的div的元素(即首先它要是div元素,并且它要包含class="nav"的属性),#logo+p表示前一个相邻同级元素id=logo的p.
1.2.选择器优先级:
单一选择器: ID >类=伪类=属性 > 标签(div)>*
复合选择器:
范例 | style | ID | 类/伪类/属性 | 标签 | * |
div.nav | 0 | 1 | 1 | 0 | |
#head .nav .logo | 1 | 2 | 0 | 0 | |
#a p .info li a:hover | 1 | 2 | 3 | 0 |
(style最高,也就是当选择后样式不起作用时,可增加一个类提高优先级,如
.inner p span {
color:chocolate
}
.outer .inner p span {
color:green
})
当选择器优先级相同时:后面>前面(原理就在于,当优先级相同时,后面就会把前面相同的属性做一次重写覆盖)
知道但不要用!important
优先级的错误说法:内联式>嵌入式>外联式;离得越近,优先级越高。
3.最佳实践:
最小影响原则:利用命名空间防止影响别人;别用单一的标签选择器
最短组合原则:<5
最大重用原则
其他:不要出现两个id选择器的组合;命名语义化
End CSS选择器
2.CSS属性(布局)
属性-布局:
属性简述:
1.分类(定位(在哪显示,position,z-index,float,clear,display,visibility),盒模型(占多大空间),字体/文本(内容样式),其他(杂项))
2.最佳书写顺序
3.简写(margin是四个的简写,font则是6个的简写,font-style/variant/weight是粗细/size/height/family)
布局:
1.普通文档流
2.盒模型
3.定位
显示模型(display)
绝对定位&相对定位&固定定位(position)
浮动布局(float)
普通文档流:
块元素:每个元素占据一整行,自上而下
行元素:从左到右,排满换行。
行元素的边框效果:上下边框与容器重叠(行元素在垂直方向属性失效的一个表现);
盒模型:
所有元素都可以看成一个盒子
注意:
1.块元素的margin垂直方向的重叠:相邻margin重叠(以最大为准),父子同向(垂直方向)margin重叠(没有border才会重叠,而不显式设置border的话,就是没有border的情况,这就是那的解释)。
2.行元素的垂直方向属性失效(padding上下有效啊?),width失效(宽度取决于内容)。
显示模式:display
block:
占满父容器(不是整个文档)一整行,不会和任何相邻元素共享一行
宽度取决于父级容器,或width设置,高度?
具备完整的盒模型(任何一个属性都是有效的,总共就5个盒模型属性)(@)
inline(width/height都无效,margin-top/margin-bottom也无效):
和其他相邻的行级元素共享一行,一行排满就换行(*)
宽度取决于内容,所以设置width无效
盒模型的垂直方向属性无效(height无效,margin-top无效,而padding-top有效)
inline-block:
和其他相邻的行级元素共享一行,一行排满就换行(*)
宽度取决于内容,或width设置(hybrid)
具备完整的盒模型(@)
none:
不可见
注意:
块元素和行元素特点
块元素和行元素属性可以通过设置来改变
inline-block的意义,横向布局
元素的嵌套规则(记住一点:行元素里不能有块元素)
display:none和visibility:hidden区别
位置定位position(配合left,right,top,bottom,z-index定位):一旦加position就要考虑z-index的值
static(静态定位,*(即所有元素)默认值):
特点:设置left,right,top,bottom,z-index无效
relative(相对定位,display属性不失效):
相对自己原本位置偏移,偏移量通过left/right/top/bottom定位
未脱离原先文档流,占居的空间保留,后面的元素不补位
absolute(绝对定位,一旦加absolute,display属性失效,有完整盒模型):
相对外层第一个非static属性(即默认值)的祖先元素的边框内测(不是padding内侧),偏移量同上
脱离原先文档流,占居的空间释放,后面的元素会补位
fixed(固定定位,一旦加fixed,display属性失效,有完整盒模型):
相对浏览器窗口定位,偏移量同上
脱离原先文档流,占居的空间释放,后面的元素会补位。
注意:
relative/absolute/fixed的特点和意义
absolute+magin实现relative效果(一个脱离一个不脱离且absolute后不设置left/top/right/bottom,它的左上角位置不会改变,像加了float:left一样(因为脱离文档流了嘛),有时候蛮有用的)
z-index的使用(总是对比同级元素的层高(即z-index值),值相同时后面的覆盖前面的)
浮动定位:float(一旦加float后,display属性失效)
属性值:
none(默认值)
无
left(向左浮动):
浮动在父容器padding以内左上角(区别于absolute)
自身宽度由内容决定,或width设置(类似inline-block)
半脱离文档流,会影响同一个父容器内其他行元素的位置
right:
同上,只是向右浮动
配合使用:clear,清除浮动
注意:
float属性对自身的影响(宽度由内容定或width设置,有完整的盒模型(其实就是了inline-block了,除了没有4px的间隔))
float对相邻元素的影响 (半脱离文档流,位置脱离出来了,但相邻元素显示的文本却受到影响,
position:absolute是完全脱离,不影响后面的元素中文本的显示)
float对父容器的影响(里面的元素都是float时,父容器高度会塌陷)
通过伪元素来清除浮动clear(div:after{content:"";display:block;clear:both}在父元素里面的最后的位置加了个内容为空)
float的意义:给行元素设置float,则具备完整的盒模型,连4px间距也没有了。
横向布局有两种实现方式:inline-block、float;
End CSS属性(布局)
3.CSS属性(内容)
字体文本:
font:
font-weight:normal(400),bold(700),bolder(900),lighter(100),这些大小有些字体支持,有些不支持
font-size:12px,单位:px,em(当前容器字体大小),rem(body容器的字体大小)
line-height:1.5em,单位:px,%,em
font-family:支持第一种显示第一种,直到支持的为止
px,%,em,rem,cm,...
line-height通常用于垂直方向上的居中,值为容器高度,水平方向上的居中用text-align:center.
color:
#ff0000(==#f00,简写形式)/red(预定义颜色值)/rgb(255,0,0)(rgba是加了透明度)/hsl(hsla也一样)
还有一种颜色,叫transparent,border-top-color:transparent;与border-top:transparent;不同。
假设:#ffffff是不是与#RRGGBB对应的?
text:
text-align:left/center/right;
text-decoration:normal/underline/line-through
text-indent:2em
vertical-align:baseline/top/middle/bottom
行级元素在垂直方向的对齐问题,都可以用vertical-align实现,这个行级元素是多个情况,不是你想的单个垂直居中。
原来vertical-align的对齐和line-height的对齐还是有区别的,详见vertical-align.html
white-space:nowrap/pre/normal...主要是用来处理空格,当包含源代码的时候比较实用。
word-break:normal/break-all/keep-all
word-wrap:normal/break-word
背景
background:是background-color/image/repeat/postion的简写,position为百分比,是图片的50%的位置与容器的50%的位置对齐
列表
list-style:是list-style-type(none/disc/circle)/postion(inside/outside)/image(url(''))的简写,原来通过设置ul的margin:0;就可以去掉前面的空隙。
表格
border-collapse:collapse;就是边框合并的意思,不出现边框与边框的空隙。
其他
cursor:pointer
overflow:hidden/scroll
outline:10px solid #f00 只是光晕
End CSS属性(内容)
4.CSS进阶
兼容性:
理解:一致性(感性)>>渐进增强&优雅降级(理性)
方法:Doctype,Hack,浏览器私有属性,响应式
一定要写Doctype,否则,IE启动怪异模式
CSS Hack通过对CSS声明中添加特殊字符来实现对不同浏览器做单独声明,慎用,除非是某个浏览器的可用性问题
IE条件注释与hack不同
浏览器私有属性:-moz-(firefox),-webkit-(chrome,safari),-o-(opera),-ms-(IE),即提前实现未被REC的属性
加上自己的私有属性,两手准备,万一不被REC,则再实现一个和REC一模一样的,不加前缀,被REC则去掉前缀,另外也可以实现
自己认为不错的属性,也加上自己的前缀。
响应式:
背景:智能手机及平板电脑的爆发,屏幕分辨率的泛滥。
争论:响应vs定制
思路:布局响应式+组件适应性
实现:media query
@media screen and (min-width: 400px) {
.topic {
width:400px;
}
}
性能
样式文件:
位置尽量放在<head>里
至少放在要定义的结构前面(这样不会出现一开始无样式、闪动的状态,就像js文件要放到最后一样)
合并,压缩(减少体积,提升性能)
选择器:
查询解析顺序(一定要记住这个顺序):从右向左,如#header div{}
所以少用标签选择器结尾,如:#main li{}
少用后代选择器,多用子选择器(.list>li(只查询一层)优于.list li(会查询li的所有祖先))
减少层级
避免冗余(.main p #title{}(id本身就是惟一的,在查询祖先中的p和#main完全没有意义))
属性:
多用简写
多利用属性继承(如果一个大容器里面每个元素字体都是红色,就是在大容器里定义颜色,这样会继承到每一个子元素)
背景图片合并(css sprite)
少用CSS expression
维护性
less,sass
规划:reset,base(基础样式),layout(布局),mods(模块),components(组件),theme
避免就一个main.css
按页面分文件,公用的部分提取出来,@import(less)进来,html只引入一个入口文件
库(Bootstrap,BUI,xmixins(google)),使用库的好处是样式可以直接使用,坏处是当样式不满足要求时在原有的样式修改会很麻烦
CSS3
圆角:border-radius
投影:box-shadow
变换:transform
过度:transition
动画:animation
透明度:opacity
End CSS进阶