---恢复内容开始---
css引入方式1:
行内式
css引入方式2:
head里写入
css的引入方式3:
外部链接
他们的优先级:行内>head里的=外部链接
选择器:标签选择器:
通过标签名直接选择到所有的标签,实际应用场景很少
id选择器
通过#id值选择到对应的id,具有唯一性,且优先级高于标签选择器
类选择器
通过.类名选择到对应的一类标签,不具备唯一性,且优先级高于标签选择器
通配符选择器
通过*选择到页面上所有的标签,实际应用场景比较少
选择器优先级:
id>类>标签>*
进阶选择器:
后代选择器:
通过至少一个空格,实现后代选择器的效果
子代选择器:
通过>知道所有的子代
所有兄弟选择器
通过~找到所有的兄弟,只要是同级的,都可以被找到
向下相邻的弟弟选择器
通过+找到向下相邻的兄弟
组合选择器:
仅仅通过逗号来组合起多个选择器,目的为了重用一些共有的css属性
选择器优先级:
行内>id>类>标签>通配符
后代选择器因为选择的范围比较模糊,要低于选择精准的选择器
模糊度越高优先级越低
标准文档流:
空白折叠现象
自动换行
去除空格,把代码中空白区域删除掉
不同类型的行内元素或者行内快元素,对应的基准线不一致
字体属性
font-family:设置不同类型的字体,宋体,微软雅黑之类的
font-size:设置字体的大小,单位是像素
font-weight:字体宽度
颜色相关
字体颜色用cloor
背景颜色用bgc
颜色的设置:
命名法
rgb(255,255,255)
#16进制写法
rgba(255,255,255,透明度)
文本样式
对齐方式
text-align:left,center,right
首行缩进
text-index:px,也可以是em,em是一个相对单位,相对于字体的大小
单词之间的间距:
word-spacing:100px
letter-spacing:中文件之间的字间距,设置值可以使px或者em
大小写转换
text-transform:lowercase小写,uppercase大写,capitalize首字母大写
文本的装饰
text-decoration:none清除a标签自带的下划线,line-through打折的时候的那个价格删除线
文本的方向
direction:rt1
他跟文本的对齐方式没有区别,是因为没有设置unicode-bidi: bidi-override;
两个属性一起使用就能实现文本的方向的改变,默认是从左到右,还可改变为从右到左
宽高
宽高只能给行级标签设置
给行内标签设置不起作用
宽高还能给行内快标签设置
line-height行高给行内标签设置也不管用
给文本类或者行内标签的元素设置垂直居中,可以利用line-height来设置
display属性
行级标签变形为行内标签在行级标签里设置display:inline
行内标签变形为行级标签在行内标签设置display:block
行级标签或者行内标签变形为行内块标签:display:inline-block
背景相关操作:
background-image:url(图片的路径)
background-repeat:图片是否铺满
background-position:相对于左上角的点,往右平移是正直,往下平移也是正直,否则相反
伪类选择器
爱恨准则
最特殊是hover,他不单单可以给a标签使用
伪元素选择器
before,在元素之前添加一些内容
after,在元素之后添加一些内容
first-letter,在首字母发生一些改变
first-line,在首行进行一些操作
做appele,小米网
---恢复内容结束---