CSS字体样式、文本样式、复合选择器、块元素和行内元素、字体图标、背景样式
1.字体样式
常用文字样式
| 属性 | 作用 |
|---|---|
| font-size | 字体大小 |
| font-family | 字形 |
| font-weight | 字体粗细 |
| font-style | 字体样式 (italic\normal) |
font-size
相对单位：
| px | 像素 |
| em | 相对于当前文本 |
绝对单位：
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
如果页面没有设置字体大小，使用浏览器默认大小，谷歌浏览器默认大小是16px;
为了使字体大小在不同浏览器中大小一致，必须给body设置一个值；
font-family
p{
font-family:"微软雅黑";
}
div{
font-family:Arial,"宋体","Microsoft YaHei";
}
chrome浏览器默认字体微软雅黑，IE默认宋体;
为了字形统一，必须在body中设置字形
font-weight
| 可选值 | 说明 |
|---|---|
| normal | 正常 normal=400 |
| bold | 加粗 bold=700 |
| bolder | 特粗 |
| lighter | 细 |
| number | 数值（100｜200｜… 900） |
font-style
| normal | 正常（默认） |
| italic | 倾斜 |
font连写，需要按照顺序书写
选择器{
font:font-style font-weight font-size/line-height font-family;
}
文本样式
color
| 颜色定义方式 | 值 |
|---|---|
| 英文单词 | red,green,blue |
| 十六进制 | #FF0000,#FF6600 |
| RGB代码 | rgb(255,0,0,),rgb(100%,0%,0%) |
按照红、绿、蓝的颜色顺序
#FF00EE 可以简写成 #F0E
一个屏幕取色器：picpick.exe
text-align
用来设置文本水平对齐位置 ，该属性只能用于占据整行的标签，如p\h1\div
text-decoration
用来设置文本划线
| 属性值 | 含义 |
|---|---|
| underline | 下划线 |
| overline | 上划线 |
| line-through | 中划线 |
| none | - |
常用text-decoration:none去除a标签的下划线；
text-indent
用来设置文本缩进
最常用于段落开始的两个空格：text-indent:2em;
复合选择器
子代选择器、后代选择器、交集选择器、并集选择器
子代选择器
.one > p{
color:orange;
}
后代选择器
#comic h3{
color:orange;
}
交集选择器
使用同一个标签中的两个选择器，同时选中一个标签
<h1 class="title">联合h1>
h1.title{
color:red;
}
并集选择器
同时选中多个标签
<div>1div>
<h1>2h1>
<span class="title">3span>
<p id="p1">4p>
div,h1,.title,#p1{
background-color:orange;
}
链接伪类
a标签的四种状态
| a:link | 未访问 |
| a:visited | 已访问 |
| a:hover | 鼠标悬浮 |
| a:active | 选定 |
链接伪类必须按照顺序来写：
link、visited、hover、active，否则会出错
实际项目中，只设置a标签基本样式和hover伪类样式
a{
font-size:20px;
color:#333;
text-decoration:noe;
}
a:hover{
color:#F0F;
text-decoration:underline;
}
其他伪类
其他标签也能使用伪类，一般只使用:hover
div:hover{
color:red;
}
选择器权重
!important(无穷大) > 行内样式(1,0,0,0) > id选择器(0,1,0,0) > 类\伪类(0,0,1,0) > 标签选择器(0,0,0,1) > 继承或*(0,0,0,0)
选择器权重计算进行逐位累加计算
块元素和行内元素
块元素是一个容器，可以放行内元素或块元素
div标签能嵌套p标签，p标签不能嵌套div标签
文字居中
水平居中:text-align:center
垂直居中:line-height:
line-height的值要等于height的值
行内元素不能设置宽高；
行内元素只能放文本或其他行内元素，不能放块元素；
行内块
可以设置宽高、也可以一行显示多个
<img src="imges.jpg" alt="">
img{
width:300px;
height:200px;
}
三种元素相互转换
| display:inline | 转为行内元素 |
| display:block | 转为块元素 |
| display:inline-block | 转为行内块 |
| display:none | 隐藏元素 |
字体图标
iconfont.cn
.iconfont{
/* 修改字体图标大小 */
font-size:30px;
}
背景样式
给标签添加背景色或背景图
背景色：background-color
背景图：background-image:url(图片路径);
背景平铺：background-repeat:
值：repeat(默认) | no-repeat | repeat-x | repeat-y
背景图位置：background-position：X轴 Y轴
| 参数 | 值 |
|---|---|
| 方位名词 | X轴：left\center\right Y轴：top\center\bottom |
| 数值 | 10px 55px |
div{
background-position:center center;
}
背景附着
背景是滚动的还是固定的
background-attachment:scroll | fixed;
scroll 滚动 | fixed 固定
背景样式连写：
选择器{
background:#000 url(images/1.jpg) no-repeat scroll center top;
}
背景色、背景图、背景平铺、背景附着、背景图位置