字体盒模型和高级选择器

Posted 2020-11-24 wangzihao147

字体

font-family:字体类型；可以写多个，浏览器识别的第一个；
“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”

　　

字体大小

font-weight:字体粗细；bold加粗；bolder更粗；lighter更细；400等同于normal;700相当于bold；
font-style:斜体；normal正常；italic斜体；oblique倾斜（这两个斜体在浏览器看上去相同）

　　

字体颜色

十六进制的颜色值 #ff0000 缩写#f00
RGB值：rgb(255,0,0)

　　

盒模型

margin:外边距

margin-top（顶部）

margin-left（左边）

margin-bottom（中间）

margin-right（右边）

 

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距,可以使用padding或border分开两个外边距。

内边距：padding

 

padding-top
padding-left
padding-bottom 
padding-right
border:边框；
border-width:宽度；
border-style:solid(实线)dotted(点线)dashed(虚线)double(双线)

　　

 

四个值的顺序：上 右 下 左

 

 高级选择器

 

通配符选择器；*{font-size:12px;}
选择器分组：div,p{}
后代选择器: div a{};
子选择器 div>a{};
相邻兄弟选择器div+p{};
伪类选择器a:hover{}

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

font-family:字体类型；可以写多个，浏览器识别的第一个；
“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”