文本属性
text-decoration
- none:无任何装饰线
- underline:下划线
- overline:上划线
- line-through:删除线
text-transform(不重要)
设置文本大小写转换
- capitalize:单词首字母大写
- uppercase:每个字母变大写
text-indent
首行缩进.
text-index:25px;
text-align
定义行内级的元素相对于它的块级元素的位置
- left
- right
- center
- justify:两端对齐
ex:比如两个div嵌套,第二个是无法直接通过text-align实现相对于第一个div居中的
- 方案1:改变第二个div性质,从块级元素变为行内元素 —display:inline-block
- 方案2:margin: 0 auto
字体相关
font-size
- px
- em:使用的是默认字体单位,ex:如果默认为16, 2em
- 百分比:相对于父元素的百分比
font-famaily
用于设置文字的字体名称;一般只设置一次,但可以设置多个以便于适配不同的情况
font-famaily:aaa,vvvv,bbbb;
font-weight
字体粗细
- 100|200|300…..
- normal:400
- bold:700
font-style
- normal
- italic/oblique
line-height
一行文本所占的高度=两行文本基线baseline之间的间距.
baseline:与小写x最底部对齐的线.
font缩写
font: font-style font-weight font-size/line-height font-family
选择器
1.基本选择器
- 元素: li{ xxxx}
- ID: #id3{xxxx}
- 类: .alugg{xxxx}
- 通配: *{}
2.属性选择器
- 基本属性:
- 拥有某个属性:[title]{xxxx}
- 属性等于某个值div[k1=”v1”]{xxxx}
- 模糊匹配
- [href$=’.png’]{xxx} 末尾等于.png
- [class*=”col-md-“]{xxxx}属性值中间包含col-md-xx
- [attr^=”alugg”]属性值以alugg开头
3.组合选择器
- 后代选择器(descendant)
- 所有的后代(直接/间接) 以空格分割: .c1 .c2 span{xxx}
- 直接子代以**>**分割: .c1>.c3{xxxx}
- 兄弟选择器(siblings)
- 相邻兄弟: .c2 + div{}
- 所有兄弟: .c3~div{}
- 选择器组
- 交集选择器(多个条件符合才选中):div.box{xxx}( 既是div且class=box)
- 并集选择器(只要符合一条就被选中): div, p, h1, h2{xxxx}
4. 伪类选择器
- 动态伪类:
- a:link{xxx}未被访问过
- a:visited{xxx}访问后
- a:focus{xxx}:a/input元素聚焦
- a:hover{xxx}鼠标悬浮上
- a:active{xxx}点下去还没松手
- 伪元素
- .box::first-line{xx} 第一行设置样式
- .box::first-letter{xxx}第一个字母设置样式
- .box::before{xxxx}
继承性
如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性
如果后代元素自己有设置属性,那么优先使用后代元素自己的属性
与文本相关的属性一般可以继承, 其他的查文档.
层叠性
- 选择器权重,权重大的生效
- !important>行内css>#id>class,属性选择器>tag
- 先后顺序,权重相同时,后面的生效.
HTML元素类型
- block level:独占父元素一行,h,p,div
- inline level:多个行内级元素可以在同一行显示,img,span,a
本质上div和span是一个东西,只不过浏览器给div通过tag选择器添加了一个display:block的属性.
block:独占一行,可以设置宽度和高度(width/height)
inline:和其他行内级元素在同一行显示,不可以设置宽度和高度,宽高由内容决定的.
inline-block:既可以拥有inline的特点和别的元素同一行显示,有可以拥有Block元素设置宽高的特点.
none:隐藏元素
编写注意事项
- 一般块级元素的可以包含其他任何元素,p元素无法包其他块级元素
- 行内级元素只能放行内级
元素隐藏
- display:none; 不会占据原有空间
- visibility:hidden; 会占据元素应该占据的空间
- color: rgba(255,0,0,0); 设置颜色:让文本变得透明,但选中的时候会显示.
- opcaity:0;设置透明度,并且携带所有的子元素都有一定透明度.
Overflow元素溢出
overflow:hidden;溢出div大小的文字内容就隐藏起来
overflow:scroll; 使用滚轮来显示溢出的部分
overflow:auto;自动设置
CSS样式不生效原因
- 选择器优先级太低
- 选择器没选中对应的元素
- CSS属性使用的形式不对
- 元素不支持此CSS属性,比如span默认是不支持width和height
- 浏览器不支持此CSS属性,比如旧版本的浏览器不支持一些css module3的某些熟悉
- 被同类型的CSS属性覆盖,如font覆盖font-size
将多个行内级元素中间的空格去除
- 删除换行符
- 将父级元素font-size设置为0
- 设置浮动同一个方向的