CSS/CSS3语法新特性笔记

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

CSS层叠样式表

三大特性

层叠性：相同的样式会覆盖

继承性：属性可向下继承

优先级：范围越小权重越高

选择器

基础选择器

标签选择器

1 body {
2	 color:#fff;
3 }

类选择器

1 .people‐first {
2 	color:green;
3 }

id选择器

1 #laowang {
	2 color:yello;
3 }

通配符选择器

* {
2	 margin: 0 ;
3	 padding: 0 ;
4 }

高级选择器

后代选择器

1 ul li {
2	 list‐style;none;
3 }

子选择器

1 h3>a {
2 	line‐height:36px;
3 }

并集选择器

1 div,
2 p {
3 	font‐size:14px;
4 }

伪类选择器

1 a::hover {
2 	background‐color:springgreen;
3 }
a::link
a::visited
a::hover
a::active
input::focus

相邻兄弟选择器

h1 + p {
    margin-top:50px
}

font属性

1 font‐style:italic;
2 font‐weight: 400 ;
3 font‐size:16px;
4 font‐family:"Microsoft Yahei";
5 font:italic 400 16px "Microsoft Yahei";

字体图标的下载与使用

text属性

1 color:pink;
2 text‐align:center;
3 text‐decoration:none;
4 text‐indent:2em;
5 line‐height:26px;

块元素

例如h p div ul li

• 独占一行
• 宽 高 内外边距 可控
• 宽度默认继承
• 主要作为容器

行内元素

例如 a strong b em

• 一行可以是多个
• 宽高无法设定
• 默认宽度为自身宽度
• 很内元素只能容纳文本或其他行内元素

注：连接标签里不能放链接
注：链接里可放块级元素，但最好把a转换成块级元素安全

行内块元素

例如 img input td

• 可以一行多个（有缝隙）
• 可以设置