第五章 CSS美化
5.1 字体样式
html
<span></span>能让某几个文字或者某个词语凸显出来| 属性名 | 含义 | 举例 |
|---|---|---|
| font | 在一个声明中设置所有字体属性 | font:italic :bold 36px "宋体"; |
| font-family | 设置字体类型 | font-family:"隶书"; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
5.1.1 font-family字体类型
- font-family
css
p{
font-family:Verdana,"楷体";
}
body{font-family: Times,"Times New Roman", "楷体";}5.1.2 font-size字体大小
- font-size属性
px（像素）
em、rem、cm、mm、pt、pc
css
/* em 父亲元素字体大小*em
如：父亲元素字体大小为10px,子元素字体大小为2em
则2em相当于20px(10*2em)
rem 根(html)元素字体大小*rem */
css
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}5.1.3 font-style字体风格
- font-style属性
| 值 | 描述 |
|---|---|
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式 |
| normal | 默认值。浏览器显示一个标准的字体样式。 |
5.1.4 font-weight字体粗细
- font-weight属性
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符 |
| 100、200、300、400、500、600、700、800、900 | 定义由细到粗的字体，400等同于normal，700等同于bold |
5.1.5 font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
css
p span{
font:oblique bold 12px "楷体";
}5.2 文本属性
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right/center/left/justify; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
| direction | 设置文本/书写方向。 | direction: rtl;文本方向从右到左 |
| word-spacing | 设置字间距 |
5.2.1 text-align:属性值如下
| 值 | 说明 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
- 当line-heigh和容器height一致时候，可以实现垂直居中
5.2.2 text-decoration:属性值如下
css
div{
/* underline:文本下划线
overline:文本上划线
line-through:文本删除线 */
text-decoration: underline;
}vertical-align:图片文字对齐方式
属性：middle、top、bottom
5.2.3 text-shadow文本阴影
text-shadow : color x-offset y-offset blur-radius;
css
span{
text-shadow: #0000FF 1px 1px 2px;
}5.3 color属性
RGB：
- 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
- rgb(r,g,b) : 正整数的取值为0～255
RGBA
- 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
css
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);5.4 超链接样式
html
<a href=""></a>| 伪类名称 | 含义 | 示例 |
|---|---|---|
| a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
5.5 list-style-type列表样式
- list-style-type:none/disc /circle /square /decimal
- list-style-image:
| 值 | 说明 | 语法示例 |
|---|---|---|
| none | 无标记符号 | list-style-type:none; |
| disc | 实心圆，默认类型 | list-style-type:disc; |
| circle | 空心圆 | list-style-type:circle; |
| square | 实心正方形 | list-style-type:square; |
| decimal | 数字 | list-style-type:decimal |
5.6 background-color背景颜色
5.7 background-img背景图像
background-image:url(图片路径);
5.7.1 背景重复方式
background-repeat属性
| 属性值 | 说明 |
|---|---|
| repeat | 沿水平和垂直两个方向平铺 |
| no-repeat： | 不平铺，即只显示一次 |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿垂直方向平铺 |
5.8 background-position背景定位
| 值 | 含义 |
|---|---|
| Xpos Ypos | 单位：px，Xpos表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X、Y方向关键词 | 水平方向的关键词：left、center、right垂直方向的关键词：top、*center、bottom |
5.9 背景属性简写
css
background:url(../image/arrow-down.gif) 20px 10px no-repeat;5.10 background-size背景尺寸
| 属性值 | 描述 |
|---|---|
| auto | 默认值，使用背景图片保持原样 |
| percentage | 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
5.11 linear-gradient渐变
线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等,默认情况下是从上到下
css
div{
/*兼容Webkit内核的浏览器*/
-webkit-linear-gradient ( position, color1, color2,...)
/* 从上到下渐变 */
background: linear-gradient(blue, pink);
/* 指定为从右到左渐变 */
background: linear-gradient(to right, blue, pink);
/* 多种颜色渐变 */
background: linear-gradient(red, yellow, blue, orange);
/* 从 10%的位置开始渐变*/
background: linear-gradient(blue, 10%, pink);
}径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合