1.css背景样式
background-color 背景色
background-image 背景图
url(背景地址)
默认水平垂直都铺满
background-repeat 平铺方式
repeat-x
repeat-y
repeat(x,y都平铺)
no-repeat 都不平铺
background-position :背景位置
x y:number|单词
x : left,center,right
y:number : top,center,bottom
background-attachment : 背景图随滚动条移动的方式
scroll :默认值(背景位置是按照当前元素进行偏移的)
fixed :(背景位置是按照浏览器进行偏移的)
2.css边框样式
border-style :边框样式
solid : 实线
dashed :虚线
dotted : 点线
border-width :边框大小
px ...
border-color : 边框颜色
red #f00000 ...
边框也可以针对某一边进行单独设置 :border-left-style:中间是方向 left、right、top、bottom
颜色:透明色 transparent
3.css文字样式
font-family :字体类型
英文、中文
衬线体、非衬线体
注意点:
1.多个字体类型设置的目的
2.引号添加的目的
font-size :字体大小
默认大小 :16px
写法 :number(px) small
注:字体大小一般为偶数
font-weight :字体粗细
模式 : 正常(normal) 加粗(hold)
写法 :单词(normal、hold) | number(100 200.。。900,100-500为正常,500-900为加粗)
font-style : 字体样式
模式: 正常(normal)斜体(italic)
写法:单词(normal、italic)
注:oblique也是表示斜体、一般了解即可
color :字体颜色
4.css段落样式
text-decoration : 文本修饰
下划线 :underline
删除线 :lne-through
上划线 :overline
不添加任何装饰 : none
注: 添加多个文本修饰:line-through underline overline
text-transform : 文本大小写 (针对英文段落)
小写: lowercase
大写: uppercase
text-indent : 文本缩进
首行缩进
em单位:相对单位,1em永远都跟字体大小相同
text-algin :文本对齐方式
对齐方式:left、right、center、justify(两端对齐)
line-height : 定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的,根据当前字体的大小在不断的变化。
取值:1、number(px) | scale(比例值,跟文字大小成比例的)
letter-spacing : 字之间的间距
word-spacing : 词之间的间距(针对英文段落)
英文和数字不自动折行的问题:
1.word-break : break-all;(非常强烈的折行)
2.word-wrap :break-word;(不是那么强烈的折行,会产生一些空白区域)
5.css复合样式
复合样式的写法,是通过空格的方式实现的,复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。
1. background :red url() repeat 0 0;
2. birder : 1px red solid;
3. font :
注:最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。
6.css选择器
1. ID选择器
#elem{} id="elem"
注:
1.ID是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的
2.命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3.驼峰写法:searchButton(小驼峰) SearchButton(大驼峰
短线写法:serch-button
下划线写法:search_button
2. CLASS选择器
.elem{} class="elem"
注:
1.CLASS选择器是可以重复使用的
2.可以添加多个class样式
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的样式
4.标签+类的写法
3.标签选择器
div{} <div></div>
使用场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如 层次选择器
4.群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用
5.通配选择器
*{ } -> div,ul,li,p,h1,h2.....{}
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用场景:
1.去掉所有标签的默认样式时
6.相邻选择器
后代 M N{ }
父子 M>N{ }
兄弟 M~N{ } 当前M下面的所有兄弟N标签
相邻 M+N{ } 当前M下面相邻的N标签
7.属性选择器
M[attr] {}
= : 完全匹配
*= :部分匹配
^= :起始匹配
$= :结束匹配
[][][] : 组合匹配
8.伪类选择器
M:伪类{}
:link 访问前的样式 (只能添加给a标签)
:visited 访问后的样式 (只能添加给a标签)
:hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)
注:
一般的网站都只设置
a{} {link visited active} a:hover{}
:after、:before 通过伪类的方式给元素添加一段内容,使用content属性
:checked、:disabled、:focus 都是针对表单元素的
结构性伪类选择器
nth-of-type() nth-child()
角标是从1开始的,1表示第一项,2表示第二项 | n值 表示从0到无穷大
first-of-type
last-of-type
only-of-type
nth-of-type() nth-child()之间的区别
type :类型
child :孩子
7.css继承
文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的,但是可以设置继承属性inherit值)
8.css优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
2.内部样式与外部样式
内部样式与外部样式优先级相同,如果设置了相同样式,那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * > 继承
注:style行间 权重1000
id 权重100
class 权重10
tag 权重1
4.!important
提升样式优先级,非规范方式,不建议使用。(不能针对继承的属性进行优先级的提升)
5.标签+类与单类
标签+类 > 单类
6.群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高
7.层次优先级
1.权重比较
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1 +100
2.约分比较
ul li .box p input{} li p input{}
.hello span #elem{ } #elem{}