web前端技术之CSS语言基础与页面布局（中）

4.4CSS属性

常用的CSS样式的属性有文本、字体、背景、表格、列表及定位等属性。

文本属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style type="text/css">
.letter{letter-spacing: 5px;}
 .word{word-spacing:15px;}
 .indent{text-indent: 20px;}
 .align{text-align: justify;}
 .transform{text-transform:uppercase;}
 .decoration{text-decoration:underline;}
 .verticalAlign{vertical-align: bottom;font-size: 70%}
 </style>
</head>
<body>
字间距 zijianju
字母间距，zimujianju
设置行的缩进文本
设置文本两端对齐设置文本两端对齐设置文本两端对齐设置文本两端对齐设置文本两端对齐设置文本两端对齐设置文本两端对齐设置文本两端对齐
daxiezimuxie
段落中需要强调的文字。这是个下划线
文本的垂直对齐方式，向底部对齐，并缩小字体
</body>
</html>

字体属性

字体是字母和符号的样式集合。字体属性如下：

可根据以下示例理解巩固：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style type="text/css">
.fontFamily{font-family: 楷体；}
 .fontStyle{font-style: italic;}
 .fontVariant{font-variant: small-caps;}
 .fontweight{font-weight: bolder;}
 .fontsize{font-size: xx-large;}
 .line-height{line-height: normal}
 .myFont{font: italic bold 12px/20px arial,sans-serif;}
 </style>
</head>
<body>
这个属性是字体：楷体
这个属性是字体风格：斜体
这个属性是小型大写字母
这个属性是字体的粗细：特粗体
这是个字体的大小超大，单位也可以是pt或em
这是设置文本行高正常
这是字体简写用于一次设置元素字体的两个或多个。
</body>
</html>

注意：

CSS3中的服务器字体功能，有效地避免了因客户端缺失字体所导致的页面效果变差的问题：

服务器字体可以控制浏览器使用服务器端所包含的字体；

当客户端没有安装该字体，系统会自动下载并安装，从而保证浏览者看到效果完全一致。使用服务器字体，可按如下步骤进行：

1.下载所需的服务器字体；

2.通过@font-face来定义服务器字体；

3.通过font-family属性引用服务器字体。

由于服务器字体需要从远程服务器下载字体文件，效率并不高。

在设计页面时，应优先使用浏览者的客户端字体。

1、Firefox、Chrome、Safari以及Opera浏览器支持.ttf(True Type Fonts)和.otf(OpenType Fonts)类型的字体。

2、在IE8以及更早的版本中不支持@font-face规则。

3、IE 9+虽然支持新的@font-face规则，但目前仅支持.eot(Embedded OpenType)类型的字体。

背景属性

在CSS3中，新增了控制背景图片的显示位置、分布方式、以及多背景图片等特征，在lE 9+、Firefox 4+、Opera、Chrome以及Safari 5+等浏览器中得到了较好的支持。

背景区域的填充（绘制)有border-box、padding-box和content-box三种形式。

大概这样子：

背景图片位于背景颜色的上层，当同时存在背景图片和背景颜色时，背景图片将覆盖背景颜色;而没有背景图片的地方，背景颜色便会显露出来。

在<div>标签中只对content-box区域设置了背景图片，所以背景图片与边框出现了一定的间距，从间距中可以看到所设置的背景图片。

可根据以下示例理解巩固：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style type="text/css">
.c1{background-color: red;}
 .c2{ width: 100%; height:600px; background-image: url("../images/sky.jpg");
 }
 .c3{ width: 100%; height:600px; background-image: url("../images/qiu.png"); background-repeat: no-repeat; background-position: 100px 50px;
 }div{ width: 115px; height: 115px; border:1px solid red; background: no-repeat url("../images/qiu.png");
 }
 .a1{background: no-repeat url("../images/sky.jpg");}
 .b1{background: no-repeat url("../images/sky.jpg") -150px;}
 .c4{background: no-repeat url("../images/sky.jpg"); background-size:contain;
 }
 .c5{background: no-repeat url("../images/sky.jpg"); background-size:auto;
 }
 </style>
</head>
<body>
颜色
这个图片会因为大小的原因会平铺，可用c3中的方法设置不平铺
不平铺，并且设置位置为100，50
等比缩放，包含
图片多大就多大,大小不做改变
<div CLASS="a1">
A
</div>
<div class="b1">
B(可根据像素确定照片位置，选取合适的图片部分)
</div>
</body>
</html>

多背景图像属性：

CSS3中虽然提供了多背景图像，但在IE7及更早版本的浏览器并不支持，而在IE8中需要<!DOCTYPE>文档声明。

/*背景图像*/

background-image:url( images/bg12.jpg), url(images/bg13.jpg) ;

/*图像对应位置*/

background-position : left top, right bottom;

/*图像平铺方式*/

background-repeat : repeat-x, repeat-y;

表格属性

表格是一种重要的数据组织形式，在数据显示时使用比较频繁。通过表格属性对表格的边框、背景颜色和单元格间距等进行设置，使表格更加美观、富有特色，极大地改善表格的外观。

表格属性得到大部分浏览器的支持，而border-spacing和caption-side属性需要在lE8+版本且有<!DOCTYPE>文档声明才支持。表格和单元格都有独立的边框，使得表格具有双线条边框，通过border-collapse属性设置表格是单边框还是双边框。

列表属性：

列表属性用于改变列表项的图形符号。列表的图形符号不仅可以是圆点、空心圆、方块或数字，甚至还可以是指定的图片。

inside和outside区别如下: outside表示图形符号位于文本之外，当文本内容换行时，无需参照标志的位置;inside表示图形符号位于文本之内，在文本换行时列表内容将与列表项的符号相对齐。

分类属性：

除了前面讲述的属性外，CSS中还有几个非常有用的属性，如: cursor、display、visibility、position、float和clear等属性。。

cursor属性：

cursor属性用于指定用户鼠标的指针类型。在设计表单过程中，使用图片作为提交按钮，当鼠标移到图片上时，通常将鼠标指针由箭头改成手的形状，从而进一步对用户进行提示。

display属性

通过display属性可以将页面元素隐藏或显示出来;也可以将元素强制改成块级元素或内联元素。

None：将元素设为隐藏状态、block：将元素显示为块级元素，此元素前后会带有换行符、inline：默认,此元素会被显示为内联元素，元素前后没有换行符。

visibility属性

visibility属性可以将页面中的元素隐藏，但是被隐藏的元素仍占原来的空间当不希望对象在隐藏时仍然占用页面空间时，可以使用display属性

visibility属性的取值范围为visible或hidden

position属性

一般情况下，页面是由页面流构成的，页面元素在页面流中的位置是由该元素在(X)HTML文档中的位置决定的。块级元素从上向下排列（每个块元素单独成行)，而内联元素将从左向右排列，元素在页面中的位置会随外层容器的改变而改变。在CSS中，提供了三种定位机制:普通流、定位(position)和浮动(float)。

注意：

(1)当position的属性值为relative、absolute或fixed时，可以使用元素的偏移属性left.top.right和bottom进行重新定位

(2)当position属性为static时，会忽略left、 top、right、bottom和z-index等相关属性的设置。

Flost属性

float属性可以将元素从正常的页面流中浮动出来，离开其正常位置，浮动到指定的边界当元素浮动到边界时，其他元素将会在该元素的另外一侧进行环绕。

Left：元素浮动到左边界、Right：元素浮动到右边界、None：默认值，元素不浮动。

Clear属性

在页面中，浮动的元素可能会对后面的元素产生一定的影响;

当希望消除因为浮动所产生的影响时，可以使用clear属性进行清除。

Left：清除左侧浮动产生的影响、right：清除右侧浮动产生的影响、both：清除两侧浮动产生的影响、none：默认值，允许浮动元素出现在两侧

4.5伪类和伪元素

伪类和伪元素是预先定义的、独立于文档元素的，能够被浏览器自动识别。处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容(元素的一部分)。

伪类以冒号(:）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。以下是伪类及其描述：

:active向被激活的元素添加样式

:focus向拥有键盘输入焦点的元素添加样式

:hover当鼠标悬浮在元素上方时，向元素添加样式

:link向未被访问的链接添加样式，目前仅适用于超链接

:visited向已被访问的链接添加样式，目前仅适用于超链接

:readonly向只读元素添加样式

:checked向被选中的元素添加样式

:disabled向被禁用的元素添加样式

:enabled向可用的元素添加样式

伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树(又称DOM模型)中不存在与之对应的部分。以下是伪元素及其描述：

:first-line向文本的首行添加特殊样式

:first-letter向文本的第一个字母或汉字添加特殊样式

:before在元素之前添加内容

:after在元素之后添加内容

写在最后

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流，一起努力一起成长！