走进CSS—III

一、文本外观属性

1. color:文本颜色

2. letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值。定义字间距时，允许使用负值，默认属性值为normal。

h2{letter-spacing:20px;}
h3{letter-spacing:-0.5em;}

3. word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

4. line-height:行间距

5. text-transform:文本转换

text-transform属性用于控制英文字符的大小写，其可用属性值如下。

● none：不转换（默认值）。

● capitalize：首字母大写。

● uppercase：全部字符转换为大写。

● lowercase：全部字符转换为小写。

6. text-decoration:文本装饰

text-decoration属性用于设置文本的下画线，上画线，删除线等装饰效果，其可用属性值如下。

● none：没有装饰（正常文本默认值）。

● underline：下画线。

● overline：上画线。

● line-through：删除线。

text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下画线和删除线效果，就可以将underline和line-through同时赋给text-decoration。

7. text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，其可用属性值如下。

● left：左对齐（默认值）

● right：右对齐。

● center：居中对齐。

例如设置二级标题居中对齐，可使用如下CSS代码：

h2{text-align:center;}

注意：

1、text-align属性仅适用于块级元素，对行内元素无效，关于块元素和行内元素，在后面的章节将具体介绍。

2、如果需要对图像设置水平对齐，可以为图像添加一个父标签如<p>，然后对父标签应用text-align属性，即可实现图像的水平对齐。

8. text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

注意:

text-indent属性仅适用于块级元素，对行内元素无效。

9. white-space:空白符处理

使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下。

● normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

● pre：预格式化，按文档的书写格式保留空格、空行原样显示。

● nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签
内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

10. text-shadow:阴影效果

text-shadow是CSS3新增属性，使用该属性可以为页面中的文本添加阴影效果。text-shadow属性的基本语法格式如下。

选择器{text-shadow:h-shadow v-shadow blur color;}

在上面的语法格式中，h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。

注意：

阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。

11. text-overflow: 标示对象内溢出文本

text-overflow属性同样为CSS3的新增属性，该属性用于处理溢出的文本，其基本语法格式如下。

选择器{text-overflow:属性值;}

在上面的语法格式中，text-overflow属性的常用取值有两个，具体解释如下。

● clip：修剪溢出文本，不显示省略标签“…”。

● ellipsis：用省略标签“…”替代被修剪文本，省略标签插入的位置是最后一个字符。

需要注意的是，要实现省略号标示溢出文本的效果，“white-space:nowrap;”、“overflow:hidden;”和“text-overflow:ellipsis;”这三个样式必须同时使用，缺一不可。

设置省略标签标示溢出文本的具体步骤如下。

（1） 为包含文本的对象定义宽度。

（2） 应用“white-space:nowrap;”样式强制文本不能换行。

（3） 应用“overflow:hidden;”样式隐藏溢出文本。

（4） 应用“text-overflow:ellipsis;”样式显示省略标签。

12. word-wrap属性

word-wrap是CSS3的新增属性，该属性用于实现长单词和URL地址的自动换行，其基本语法格式如下。

选择器{word-wrap:属性值;}

在上面的语法格式中，word-wrap属性的取值有两种，如表所示

当浏览器默认处理时段落文本中的URL地址会溢出边框，当word-wrap属性值为break-word时，URL地址会沿边框自动换行。

二、CSS中的优先级

1. 权重的叠加

p strong{color:black}               /*权重为:1+1*/
strong.blue{color:green;}          /*权重为:1+10*/
.father strong{color:yellow}      /*权重为:10+1*/
p.father strong{color:orange;}    /*权重为:1+10+1*/
p.father .blue{color:gold;}       /*权重为:1+10+10*/ 
#header strong{color:pink;}       /*权重为:100+1*/ 
#header strong.blue{color:red;}  /*权重为:100+1+10*/

● 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提高的选择器都大的优先级。

● 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

● CSS定义了一个 !important命令，该命令被赋予最大的优先级。也就是说不管权重如何、位置的远近，使用!important的标签都具有最大优先级。例如：

/*CSS文档，文件名为style.css*/
#header{color:red!important;}      /*外部样式表*/

2. 结构化伪类选择器

2.1. :root选择器

:root选择器用于匹配文档根标签，在HTML中，根标签始终是html。也就是说使用“:root选择器”定义的样式，对所有页面标签都生效。

2.2. :not选择器

如果对某个结构标签使用样式，但是想排除这个结构元素下面的子结构元素，让子结构元素不使用这个样式，可以使用:not选择器。

2.3. :only-child选择器

:only-child 选择器用于匹配属于某父元素的唯一子元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。

2.4. :first-child和:last-child选择器

:first-child选择器和:last-child选择器分别用于选择父元素中的第一个和最后一个子元素。

2.5. :nth-child(n)和:nth-last-child(n)选择器

使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

 1 <title>nth-child(n)和nth-last-child(n)选择器的使用</title>

 2 <style type="text/css">

 3 p:nth-child(2){

 4  color:pink;

 5  font-size:16px;

 6  font-family:"宋体";

 7 }

 8 p:nth-last-child(2){

 9  color:blue;

 10  font-size:16px;

 11  font-family:"微软雅黑";

 12 }

 13 </style>

2.6. :nth-of-type(n)和:nth-last-of-type(n)选择器

:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。

<style type="text/css">

	h2:nth-of-type(odd){color:#f09;}
	
	h2:nth-of-type(even){color:#12ff65;}
	
	p:nth-last-of-type(2){font-weight:bold;}

</style>

2.7. :empty选择器

:empty选择器用来选择没有子元素或文本内容为空的所有元素。

<style>
	:empty{background-color: #999;}
</style>
<p></p>

2.8. :before与:after 伪元素选择器

伪元素选择器器用于在某个元素之前 / 之后插入一些内容，必须配合content属性来指定要插入的具体内容

三、盒子模型

1. 背景属性

background:背景色 url("图像") 平铺 定位 固定;
例如：
background: url(he.png) no-repeat 50px 80px fixed;

body{

​    background-color:#CCC;      /*设置网页的背景颜色*/
​    background-image:url(bg.jpg);   /*设置网页的背景图像*/
​    background-repeat:repeat-x;    /*设置背景图像的平铺*/
	background-repeat:no-repeat;      /*设置背景图像不平铺*/
​    background-position:right bottom;  /*设置背景图像的位置*/ 
	background-position:20px 20px; /*直接设置图像左上角在元素中的坐标*/
	background-attachment:fixed;    /*设置背景图像的位置固定*/
}

2. 图片边框

示例代码：

 1 <title>图片边框</title>

 2 <style type="text/css">

 3 p{

 4 width:362px; 

 5 height:362px;

 6 border-style:solid; 

 7 border-image-source:url(3.png); /*设置边框图片路径*/

 8 border-image-slice:33%;      /*边框图像顶部、右侧、底部、左侧向内偏移量*/

 9 border-image-width:40px;      /*设置边框宽度*/

 10 border-image-outset:0;         /*设置边框图像区域超出边框量*/

 11 border-image-repeat:repeat;       /*设置图片平铺方式*/

 12 }

 13 </style>

效果：

将例子中第11行代码中图片的填充方式改为“拉伸填充”，具体代码如下。

border-image-repeat:stretch;              /*设置图片填充方式*/

3. 阴影

box-shadow: h-shadow v-shadow blur spread color outset;

box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;

四、列表

1. list-style-type属性

在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多种，它们的显示效果各不相同，具体如下所示。

2. list-style-image属性

一些常规的列表项显示符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。
示例代码如下：

 1 <style type="text/css">

 2 ul{list-style-image:url(1.png);}

 3 </style>

 4 </head>

 5 <body>

 6 <h2>栗子功效</h2>

 7 <ul>

 8  <li>抗衰老</li>

 9  <li>益气健脾</li>

 10  <li>预防骨质疏松</li>

 11 </ul>

 12 </body>

注意：列表项目图像和列表项没有对齐，这是因为list-style-image属性对列表项目图像的控制能力不强。因此，实际工作中不建议使用list-style-image属性，常通过为<li>设置背景图像的方式实现列表项目图像。

3. list-style-position属性

设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表项内容的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种，对它们的解释如下：

● inside：列表项目符号位于列表文本以内。

● outside：列表项目符号位于列表文本以外（默认值）。

示例代码如下：

 1 <style type="text/css">

 2 .in{list-style-position:inside;}  

 3 .out{list-style-psition:outside;} 

 4 li{border:1px solid #CCC;}

 5 </style>

运行示例代码，效果如图所示。

第一个无序列表的列表项目符号位于列表文本以内，第二个无序列表的列表项目符号位于列表文本以外。

4. list-style属性

在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：

list-style:列表项目符号 列表项目符号的位置 列表项目图像;
使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。示例代码如下：

1 <style type="text/css">

2 ul{list-style:circle inside;}

3 .one{list-style: outside url(1.png);}

4 </style>

运行示例代码，效果如图所示。

值得一提的是，在实际网页制作过程中，为了更高效地控制列表项显示符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。示例代码如下：

 1 <style type="text/css">

 2 dd{

 3 list-style:none;   /*清除列表的默认样式*/

 4 height:26px;

 5 line-height:26px;

 6 background:url(2.png) no-repeat left center; /*为li设置背景图像 */

 7 padding-left:25px;

 8 } 

 9 </style>

运行示例代码，效果如图。

每个列表项前都添加了列表项目图像。如果需要调整列表项目图像只需更改标签的背景属性即可。

五、超链接

1. 创建超链接

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在上面的语法中，<a>标签是一个行内元素，用于定义超链接，href和target为其常用属性，具体介绍如下：

● href：用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。

● target：用于指定链接页面的打开方式，其取值有 _ self和 _ blank两种，其中self为默认值，意为在原窗口中打开_blank为在新窗口中打开。

示例代码如下：

 1 <body>

 2 <a href="http://www.zcool.com.cn/" target="_self">站酷</a> target="_self"原窗口打开<br />

 3 <a href="http://www.baidu.com/" target="_blank">百度</a> target="_blank"新窗口打开

 4 </body>

2.锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条来查看所需要的内容，这样不仅效率较低，而且不方便操作。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接。通过创建锚点链接，用户能够直接跳到指定位置的内容。
创建锚点链接可分为两步：

• 一是使用<a>标签应用href属性（href属性= “#id名”，id名不可重复）创建链接文本；
• 二是使用相应的id名标注跳转目标的位置

3. 链接伪类控制超链接

定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。

注意：

1、使用超链接的4种伪类时，对排列顺序是有要求的。通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。

2、超链接的4种伪类状态并非全部定义，一般只需要设置3种状态即可，如link、hover和active。如果只设定是2种状态，即link、hover来定义。

六、input控件

1、input控件类型

在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证，下面将详细讲解这些新的input控件类型。

1.email类型< input type=“email” />

email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。

2.url类型< input type=“url” />

url类型的input控件是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

3.tel类型< input type=“tel” />

tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用，关于pattern属性将在7.5.4小节中进行讲解。

4.search 类型< input type=“search” />

search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

5.color类型< input type=“color” />

color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

注意：

需要注意的是，不同的浏览器对url类型的输入框的要求有所不同，在多数浏览器中，要求用户必须输入完整的URL地址，并且允许地址前有空格的存在。例如，输入“https://www.baidu.com/”。

6.number类型< input type=“number” />

number类型的input控件用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下：

● value：指定输入框的默认值。

● max：指定输入框可以接受的最大的输入值。

● min：指定输入框可以接受的最小的输入值。

● step：输入域合法的间隔，如果不设置，默认值是1。

7.range类型< input type=“range” />

range类型的input控件用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。

8. Date pickers类型<input type= date, month, week…" />

Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期

UTC是Universal Time Coordinated的英文缩写，即“协调世界时”，又称世界标准时间。简单地说，UTC时间就是0时区的时间。例如，如果北京时间为早上8点，则UTC时间为0点，即UTC和北京的时差为8。

注意：对于浏览器不支持的input控件输入类型，将会在网页中显示为一个普通输入框。

2、input属性

在HTML5中，还增加了一些新的input控件属性，用于指定输入类型的行为和限制。例如autofocus、min、max、pattern等，下面将对这些全新的input属性做具体讲解。

1. autofocus属性

在HTML5中，autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。

2.form属性

在HTML5之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即和标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。

HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。此外，form属性还允许规定一个表单控件从属于多个表单。

注意：

form属性适用于所有的input输入类型。在使用时，只需引用所属表单的id即可。

3. list属性

在上面的小节中，已经学习了如何通过datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。

4.multiple属性

multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，多个地址之间通过逗号隔开。multiple属性用于file类型的input元素时，表示可以选择多个文件。

5.min、max和step属性

HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date pickers、number和range标签。具体属性说明如下：

● max：规定输入框所允许的最大输入值。

● min：规定输入框所允许的最小输入值。

● step：为输入框规定合法的数字间隔，如果不设置，默认值是1。

由于前面介绍input元素的number类型时，已经讲解过min、max和step属性的使用，这里不再举例说明。

6.pattern属性

pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配（可以简单理解为表单验证）。pattern属性适用于的类型是：text、search、url、tel、email和password的标签。常用的正则表达式如表1所示。

7.placeholder属性

placeholder属性用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式提示信息，而当输入框获得焦点时，提示信息消失。

注意：

placeholder属性适用于type属性值为text、search、url、tel、email以及password的标签。

8.required属性

required属性用于判断用户是否在表单输入框中输入内容，当表单内容为空时，则不允许用户提交表单。

七、DIV+CSS布局

1. 页面规划

2. 版心

版心是指网页中主题内容所在区域
常见的版心宽度值为：960px；980px；1024px；1200px

3. 网页的三大布局方式

3.1. 盒子模型（核心）

3.2. 浮动

网页的三种布局流

• 普通流（文档流）就是一个网页标签元素正常从上到下，总左到右排列顺序的意思（哪里有空就补哪里）
• 浮动流：脱离标准流，不占页面中标准的空间，显示在标准流的上方
• 定位流
  浮动概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程

选择器{float：left/right/none}

清除浮动：

• 选择器{clear：left/right/both}
• 在块元素的父级元素上，添加{overflow:hidden/auto/scroll}

3.3 定位