type
status
date
slug
summary
tags
category
icon
password
了解了html标签以及css选择器之后，就到了这一阶段的学习了。我们需要初步使用css样式来美化网页中的内容，下面章节分别讲解对网页文本，图像，超链接，列表，表格，表单进行美化。
第一章 字体与文本设置
1.1 文本字体设置
属性 | 含义 | 属性值 | 属性值说明 | 说明 |
font-size | 字体大小 | 数字+px | 默认16px,忽略单位px不生效 | ㅤ |
font-weight | 字体粗细 | normal,bold;lighter;bolder或者100~900整百数 | 属性值有两种方式,normal或400为正常,bold或700加粗 | 实际开发以正常和加粗使用最多,推荐使用数字 |
font-style | 字体样式(倾斜) | normal;italic;oblique;inherit | 正常;倾斜;倾斜;从父元素继承样式 | 最后一个属性值暂不管,后面学到父元素再回顾 |
font-family | 字体类型 | 宋体;隶书;微软雅黑;…. | 代码中,字体不需要加引号,一般网页字体为微软雅黑类无衬线字体字体 | ㅤ |
color | 字体颜色 | 名词/十六进制值/rgb值 | ㅤ | ㅤ |
- 字体属性复合写法：font: font-style font-variant font-weight font-size font-family
font-style，font-variant，font-weight三个属性的顺序可以自由调换，甚至不写，font-size，font-family属性顺序固定且必须有。
注:
在实际开发过程中,对字体类型(font-family)声明字体时不会只写一个属性值,而是写是个字体,最后以sans-serif拖地.如:
font-family:微软雅黑,黑体,sans-serif; 这样书写的出发点是考虑可能不同的用户电脑系统可能对某一单独字体类型不支持.上面声明意思是,如果电脑没有微软雅黑就使用黑体,黑体没有就使用无衬线字体.1.2 文本间距设置
属性 | 含义 | 属性值 | 属性值含义 | 说明 |
line-height | 行间距 | 数字+px或百分比 | ㅤ | ㅤ |
text-indent | 首行缩进 | 数字+em | em单位为相对单位，会根据字体大小调整 | ㅤ |
letter-spacing | 字符间间距 | 数字+em | ㅤ | ㅤ |
word-spacing | 单词间距 | 数字+em | ㅤ | ㅤ |
1.3 文本水平对齐方式设置（text-align）
属性值 | 说明 |
center | 文本居中对齐 |
left | 文本左对齐 |
right | 文本右对齐 |
justify | 文本两边对齐 |
inherit | 继承父元素的对齐方式 |
1.4 文本垂直对齐方式设置（vertical-align）
属性值 | 说明 |
baseline | 默认，元素位置在父元素的基线上 |
sub | 垂直对齐文本的下标 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的两端对齐 |
middle | 把此元素放置在父元素中部 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
text-botton | 把元素的底端与父元素字体的底端对齐 |
% | 使用“line-height”属性的百分比值来排列此元素。可为负。 |
inherit | 继承父元素的vertical-align属性 |
1.5 使用服务器字体和客户端字体
第二章 背景和图像设置
2.1 插入图像（img）
img标签中属性 | 属性值 | 说明 | 应用场景/提示 |
src | url | 图片的路径 | 使用相对路径 |
alt | text | 定义图片的替代文本 | 图片加载失败的的提示文字等 |
height | pixels、百分比 | 定义图片的高度 | 只需定义宽度或高度一个即可，另一个尺寸会同比例变化 |
width | pixels、百分比 | 定义图片的宽度 | ㅤ |
title | text | 定义图片的标题 | 鼠标悬浮在图片上会显示标题 |
2.2 图像样式设置
2.2.1 设置图像边框
语法：
border:width color style;width指定边框宽度，color指定边框颜色，style指定边框的样式
2.2.2 设置图像不透明度
语法：
opacity:value | inherit;value取值在0~1之间的浮点数，0表示完全透明，1表示完全不透明。inherit表示继承父类。
2.2.3 设置图像圆角
语法：
border-radius:数值+px属性值：
- 1个数：设置四个圆角
- 2个数：第一个设置左上右下，第二个为右上左下
- 4个数：分别设置四个角，左上开始顺时针设置。
注：该属性同样可用于设置div盒子的圆角
2.2.4 设置图像阴影
语法：
box-shadow:x,y,blur,color;x,y分别表示阴影在水平方向和垂直方向上的位移，可为负，必要参数，blur表示模糊度，可忽略，color表示阴影的颜色，可忽略。
2.2.5 设置图像与文字的对其方式
一般要设置图像和文字在垂直方向上的对齐方式，使用vertial-align属性进行对齐（参看1.4对该属性讲解）。
2.2.6 图文混排
普通网页最常见的就是图文混排
在CSS3中可以使用float属性来实现文字环绕效果
2.3 背景设置
2.3.1 背景色
语法：
background-color:颜色值 颜色值可以为：关键字（如red）rgb表示法 rgba表示法 十六进制等
注:背景色不会影响盒子大小,相反可以借此看清盒子大小和位置
2.3.2 背景图片
语法:
background-image: url("图片路径");注:图片作为背景色,要注意图片像素大小和盒子像素大小的一致性.如果盒子是400px * 400px而图片是200px * 200px,那么图片就会以2*2四个图片铺在背景上.
2.3.3 背景平铺
语法：
background-repeat：属性值属性值：
值 | 效果 | ㅤ |
repeat | （默认）水平和垂直方向都平铺 | ㅤ |
no-repeat | 不平铺 | 单张图片在背景中 |
repeat-x | 沿着水平方向平铺 | 以图片大小为单元，瓷砖式平铺第一排 |
repeat-y | 沿着垂直方向平铺 | 以图片大小为单元，瓷砖式平铺第一列 |
2.3.4 背景位置
声明的不是盒子的位置，而是盒子中背景图片的位置。背景色和背景图只显示在盒子里面
语法：
background-position:x轴位置 y轴位置属性值：
- 位置名次描述：
- 水平方向：left，center，right
- 垂直方向：top，center，bottom
- 数字+px(坐标)
- 原点：(0,0)
- x轴：水平向右
- y轴：垂直向下
- x% y% 左上为0% 0%，右下为100% 100%
注：正数向右向下移动，负数向左向上移动；方位名次和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直。
2.3.5 设置渐变背景
让背景产生渐变效果，有两种属性，即线性渐变（linear-gradient）和径向渐变（radial-gradient）
语法：
linear-gradient(方向,颜色1,颜色2)- 虽然浏览器已经支持渐变，单webkit内核的浏览器还没有去掉前缀-webkit-，Chrome，Safari ，Firefox中实现渐变效果需要前缀-webkit-，IE9+需要前缀-ms-
- 渐变方向只要设置起始值即可，top表示自上向下，bottom表示自下向上，right表示自右向左，left表示自左到右，也可以设置角度，30deg（30度）表示自左下30度方向向右上渐变，-30deg表示左上到右下渐变。
2.3.6 属性值的连写
连写不分先后顺序！
背景图片位置如果是英文单词，可以颠倒顺序