使用CSS3美化的原因
用css美化页面文本,使页面漂亮、美观、吸引用户 可以更好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span>标签 作用 能让某几个文字或者某个词语凸显出来
- 有效的传递页面信息
- 用css美化页面文本，使页面漂亮、美观、吸引用户
- 可以更好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
- 具有良好的用户体验
字体样式：
| font | 声明属性 | 字体属性的顺序：字体风格-字体粗细-字体大小-字体类型 |
| font-family | 设置字体类型 | 宋体 楷体 |
| font-size | 设置字体大小 | px;em;mm;cm;pc;pt |
| font-style | 设置字体风格 | italic：斜体 oblique：斜体 normal：正常 |
| font-weight | 设置字体粗细 | bold：粗体 bolder：更粗 lighter：更细 normal：默认 |
<style>
.aa{color: #640000;
font-weight: bolder}
p{color: coral;
line-height: 50px}
#ss{text-align: center}
</style>
<p><span class="aa">如何犁地、播种和收获？</span>运行结果如下
文本属性：
| color | 设置文本颜色 | RGB |
| text-align | 水平线对齐 |
left：左边 right：右边 center：中间 justify：俩端对齐
text-indent：设置行的缩进
|
| line-height | 设置文本的行高 | |
| text-decoration | 设置文本的装饰 | none：默认值 underline：下划线 overline：上划线 |
| line-through | 设置文本删除线 | |
| vertical-align | 垂直方式 | middle（中间） ,top(顶部) ,bottom(底部) |
| text-indent | 设置行的缩进 |
color属性
RGB
- 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后的两位表示蓝色的分量
- rgb(r, g, b)：正整数的取值为0~255
color:#A983D8;
color:#EEFF66;
color:rgb(0, 255, 255);
color:rgba(0, 0, 255, 0.5);
运行结果如下
文本阴影：
text-shadow:color Xpx Ypx 半径px
text-shadow:color Xpx Ypx 半径px
#jcyykt{
font-family: 楷体;
font-weight: bold;
text-shadow: #999999 5px 5px 5px;
text-align: center;
font-size: 20px;
}
运行结果如下
文本装饰：
text-decoration属性
none：默认值
underline：设置文本下划线
overline：设置文本上划线
line-through：设置文本删除线
underline：设置文本下划线
.aa{color: #640000;
text-decoration: underline;
font-weight: bolder}
<p><span class="aa">如何犁地、播种和收获？</span>
运行结果如下：
overline：设置文本上划线
.aa{color: #640000;
text-decoration: overline;
font-weight: bolder}
<p><span class="aa">如何犁地、播种和收获？</span>运行结果如下：
line-through：设置文本删除线
.aa{color: #640000;
text-decoration: line-through;
font-weight: bolder}运行结果如下：
CSS设置超链接：
- a:link——未单击访问超链接样式
- a:visited——单击访问后超链接样式
- a:hover——鼠标悬浮其上超链接样式
- a:active——鼠标单击未释放超链接样式
- 设置伪类的顺序：a:link-a:visited-a:hover-a:active
a:hover——鼠标悬浮其上超链接样式
.aa:hover{
color: #e91a5b;
}
鼠标悬浮其上效果
a:visited——单击访问后超链接样式
.aa:visited{
color: #d45353;
}
<p><span class="aa"><a href="book_no01.gif">如何犁地、播种和收获？</a></span>单机访问后的效果
一个变色的超链接
<style>
.ys:link{color: red}
.ys:visited{color: black}
.ys:hover{color: chartreuse}
.ys:active{color: blue}
</style>
<a href="https://home.firefoxchina.cn/?from=extra_start" target="_blank" class="ys">这是一个变色的超链接</a>
运行如下
列表样式：
| list-style-type:none | 无标记符号 |
| text-decoration:none | （超链接） |
| list-style-type:disc | 实心圆，默认 |
| list-style-type:circle | 空心圆 |
| list-style-type:square | 实心正方圆 |
| list-style-type:decimal | 数字 |
list-style-type:disc------实心圆，默认
li{
list-style-type:disc
}
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>如下图
list-style-type:circle--------空心圆
li{
list-style-type:circle
}
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>如下图
list-style-type:square---------实心正方圆
li{
list-style-type:square
}
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>如下图
list-style-type:decimal-------数字
li{
list-style-type:decimal
}
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>如下图
可以去除列表前面默认的实心圆点
li{
list-style:none;
}
#可以去除列表前面默认的实心圆点
背景颜色：
background-color：(颜色)
.bj{background-color: darkgreen;
<td>畅销书排行<img src="bang.gif" class="tb">
如下图
背景图像：
background-image：（图片路径：）
代码示例：
.listLeft{
font-size:18px;
color:black;
text-indent:1em;
line-height:35px;
background:#red url("图片位置" 20px 20px no-reapeat)
}
#说明
#red:背景颜色
url():背景图片
20px 20px:背景定位
no-repeat:不重复显示
背景重复方式：
background-reqeat：属性
——reqeat：沿水平和垂直俩个方向平铺
——no-reqeat：不平铺，只显示一次
——reqeat-x：只沿水平方向平铺
——reqeat-y：只沿垂直方向平铺
背景定位：
Xpos：表示水平线位置 单位：px
Ypos：表示垂直位置 单位：px
X% - Y%：使用百分比表示背景位置
X - Y方向关键词：
X水平线： left：左边 right：右边 center：中间
Y垂直：middle(顶部) ,center(中部) ,bottom(底部)
背景颜色-背景图像-背景定位-背景不重复显示
背景尺寸：
background-size
| 属性值 | 描述 |
| auto | 默认值,使用背景图片保持原样 |
| percentage | 当使用百分值时,不是相对于背景的尺寸大小来计算的， 而是相对于元素宽度来计算的 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例,将背景图片缩放到 宽度或者高度正好适应所定义背景 |
css3渐变：
linear-gradient(podition-渐变方向，color1，color2.....)
线性渐变
颜色沿一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
font-weight: bolder;
background: linear-gradient(powderblue, cyan)}
如下图
