CSS三大特性、标签分类、链接伪类、背景属性、文本修饰、文字的表达方式

文字的表达方式:
①直接写中文:font-family:微软雅黑;
②写字体的英文名称:font-family:microsoft yahei;
③unicode编码
宋体 SimSun \5B8B\4F53
黑体 SimHei \9ED1\4F53
1.打开浏览器,点击F12找console(开发者工具)
2.输入:escape(“宋体”)得出:"%u5B8B%u4F53",把%u换成\

标签分类(显示方法)
1.块元素:
典型代表:div,h1-h6,p,ul,li
特点:独占一行;可以设置宽高;嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致
2.行内元素:
典型代表:span,a,strong,em,del,ins
特点:在一行上显示,不能直接设置宽高,宽度为内容撑开的宽高
3.行内块元素(内联元素)
典型代表:input,img
特点:在一行上显示,可以设置宽高

元素之间的转换:
1.块元素转行内元素
display:inline;
例:div,p{display:inline;}
2.行内元素转块元素
display:block;
例:span{display:block;}
3.※☆块和行内元素转行内块元素
display:inline-block;
例:div,a,span,strong{display:inline-block;width:200px;height:200px;background-color:yellow;text-align:center;}

CSS三大特性:
1.层叠性:当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码重叠前边的代码)和标签调用选择器的顺序没有关系
例:

.box2{font-size:200px;color:blue;}
.box{font-size:60px;color:red;}
</style></head>
<body>
<div class="box   box2">你很漂亮哦</div></body>

2.继承性:继承性发生的前提是包含(嵌套关系)—父子关系
①文字颜色可继承②文字大小可继承③字体可以继承④字体粗细可以继承⑤文字风格可以继承⑥行高可以继承
总结:文字的所有属性都可以继承
特殊情况:
h系列不能继承文字大小
a标签不能继承文字颜色

3.优先级:
默认样式(0–权重)<标签选择器(1)<类选择器(10)<id选择器(100)<行内样式(1000)<!important(1000以上)
例:

#con{color:pink;font-size:100px;}
.box{color:green;font-size:60px;}
div{color:red   !important;font-size:60px  !important; }
</style></head><body>
<div class="box" id="con" style="font-size:12px;color:yellow;">你很漂亮</div></body>

优先级的特点:
1.继承的权重为0(自己有样式,用自己的,不继承)
2.权重会叠加
例1:

.father{font-size:60px;color:red;}
p{font-size:20px;color:blue;}//权重为1
#box{color:green;font-size:200px;}
</style></head><body>
<div class="father" id="box">
<p>大师大师</p></div></body>//继承的权重为0,1>0,所以显示p标签选择器

例2:

p.son{font-size:120px;color:yellow;}//1+10=11
p{font-size:30px;color:red;}//1
.father .son{font-size:500px;color:pink;}//10+10=20
.son{font-size:60px;color:blue;}//10
.father #baby{font-size:12px;color:orange;}//10+100=110(权重最大,选择这个复合选择器)
</style></head><body>
<div class="father">
<p class="son" id="baby">我很好,谢谢</p></div></body>

链接伪类:
a:link{属性:值;} ------a{属性:值;}两者效果是一样的

1.a:link{属性:值;}链接默认状态
2.a:visited{属性:值;}链接访问之后的状态
3.a:hover{属性:值;}鼠标放到链接上显示的状态
4.a:active{属性:值;}链接激活的状态(按住不放—鼠标)
注意:如果四个链接伪类都使用,按顺序书写
☆ :focus{属性:值;}获取焦点
例:

a:link{color:red;}
a:visited{color:green;}
a:hover{color:yellow;}
a:active{color:pink;}
</style></head><body>
<a href="#">你很可爱哦</a>

文本修饰:
text-decoration:none 无下划线|underline 下划线|line-through 删除线
例:

a{color:red;text-decoration:none;}
a:hover{color:green;text-decoration:underline;}
</style></head><body>
<a href="#">2312321</a>

背景属性:
1.background-color 背景颜色
2.background-image:url("")背景图片
3.background-repeat—repeat(默认)|no-repeat|repeat-x|repeat-y 背景平铺
4.background-position----left|right|center|top|bottom 背景定位
①background-position:right;
方位值只写一个的时候,另外一个值默认居中
②background-position:right bottom;
写2个方位值的时候,顺序没有要求
③background-position:20px 30px;
写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向
5.background-attachment 背景是否滚动----scroll(以自己定义的块而滚动)| fixed(以浏览器为标准固定)
背景属性连写:
例:background:red url("1.png") no-repeat 30px 40px scroll;
☆连写的时候没有顺序要求,url为必写项

;