11.2总结

3.3 字体样式

Css字体样式属性：

属性值	说明
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

 

    font-style: italic; /* 字体斜体 */

3.4 文本样式

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高

 

（1）text-decoration属性

none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线

 

（2）text-transform属性

none	默认值，无转换发生
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写，其余无转换发生

（3）text-indent首行缩进：

2em：2字符  20px：20像素

 

（4）text-align文本水平对齐

（5）line-height行高

text-transform: lowercase; /*全部转小写*/
text-transform:uppercase; /*全部转大写*/
text-align: center; /*设置文本对齐方式*/

 

3.5 边框样式

要定义一个元素的边框必须要设置以下三个方面。

(1)边框的宽度

(2)边框的外观(实线，或者虚线)

(3)边框的颜色

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

（1）border-width

在CSS入门学习中，我们都是建议采用像素做单位。

（2）border-style

属性值	说明
none	无样式
hidden	与"none"相同。不过应用于表除外。对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线，双线的宽度等于border-width值

 

（3）border-color

属性用来定义边框的颜色。

（4）简洁写法

border-width: 1px;

border-style: solid;

border-color: red;

可以简写为：border:1px solid red;

（5）局部边框样式

        border-top: ;

        border-bottom: ;

        border-left: ;

        border-right:

3.6 背景样式

属性	说明
background-color	背景颜色
background-image	定义背景图像的路径，这样图片才能显示
background-repeat	显示方式，例如纵向平铺、横向平铺
background-attachment	是否随内容而滚动(了解)
background-position

 

background-repeat属性取值

属性值	说明
no-repeat	表示不平铺
repeat	同时平铺
repeat-x	水平方向(x轴)平铺
repeat-y	垂直方向(y轴)平铺

3.7 超链接样式(伪类选择器)

我们可以使用text-decoration: none; 来去除超链接下划线。

 

<a href="#">默认超链接样式</a>

<a href="#" style="text-decoration: none;">去下划线超链接样式</a>

 

不同时期不同样式

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

定义这4个伪类，必须按照(link、visited、hover、active)LVHA的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变!

Active一般不必写

 

深入了解:hover伪类

hover伪类可以定义任何一个元素在鼠标经过时的样式!

语法

元素:hover{}

cursor: pointer;加上超链接“小手”