您现在的位置是：首页 > 前端学习 > Web前端Web前端

CSS规则（第十二章）(图文)

第十三双眼睛2020-02-26【Web前端】人已围观

简介对于设计者来说，总式希望能够在页面中自由发挥创意，实现自己得想法，然而，HTML语言中的很多标签都存在很大的局限性，如h1这样的标签，始终是定义较大的字体，所以，在没有CSS之前，设计者不得不借助其他标签补充标签的属性。
从本章开始，读者要尽量忘记原来标签的定式，CSS样式如同一种上乘的武学，类似于一种无招胜有招的境界，比如，虽然h1常用来定义标题，但这是因为人们习惯于这样使用，而h1表现出来的样式并非一成不变的，当设计者使用CSS时，他们可以令h1标签内的文本变成自己想要的样子。

如何学习CSS
css常被翻译成层叠样式表，一个CSS看上去是这样写的：
<style type="text/css">
           body{
               font-family: "微软雅黑";
               font-size: 20px;
               color: black;
               background-color: blue;
               margin: 1em;
               padding: 0;
           }
</style>
大括号种是一排属性值的描述，CSS并不神秘，只是页面中使用属性标签来修饰页面内容的表现，而CSS的作用正是用来修饰页面内容的表现形式，所以CSS本身就是一个属性集，只不过这个属性可以由设计者自己定义，可以无限扩展。
例子：CSS的使用
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>CSS的使用</title>
       <style type="text/css">
           #header ul{
               list-style-type: none;
               padding: 0;
               margin: 0;
           }
           #header li{
               display: inline;
               border: solid;
               border-width: 1px 1px 0 1px;
               margin: 0 0.5em 0 0;
           }
           #header li a{
               padding: 0 1em;
           }
           #content{
               border: 1px solid red;
           }
       </style>
   </head>
   <body>
       <div id="header">
           <h1>导航栏</h1>
           <ul>
               <li><a href="#">目录1</a></li>
               <li><a href="#">目录1</a></li>
               <li><a href="#">目录1</a></li>
               <li><a href="#">目录1</a></li>
               <li><a href="#">目录1</a></li>
           </ul>
       </div>
       <div id="content">
           <p>使用CSS修饰导航栏</p>
       </div>
   </body>
</html>

具体效果如下图所示

基本的样式表写法
CSS样式表也有属于自己的写法规则，在特定的规则下编写，才可以使其生效，一个标准的CSS写法是这样的，比如：
h1{
               font-family: "微软雅黑";
}
h1表示选择符，font-family表示定义字体
微软雅黑是属性值，这里表示定义的字体为黑体字。而font-family: "微软雅黑";将属性和属性值结合在一起，这样的形式称之为声明语句。声明语句可以有很多，都要放在{}内。
使用类class和标志id链接样式表
一个定义和好的样式表，需要通过类和标志id来定位它所作用的页面内容，id标志在同页面种可以实现链接，作用相当于在页面种定位一个锚点，id在链接CSS属性表时，所起到的作用是一样的，而类似这样作用的还有类class，类class和标志id之间是由区别的。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>类选择器和ID选择器</title>
       <style type="text/css">
           .style1{
               color: red;
               font-size: 18px;
           }
           #style2{
               color: blue;
               font-size: 16px;
           }
       </style>
   </head>
   <body>
       <h3 class="style1">使用类选择器的红色字体</h3>
       <h3 class="style2">使用类选择器的红色字体</h3>
       <h2 id="style1">使用ID选择器的蓝色字体</h2>
       <h2 id="style2">使用ID选择器的蓝色字体</h2>
   </body>
</html>
创建选择器
选择器指定了样式将被应用于页面种的哪些内容，主要有3种基本选择器，HTML选择器，ID选择器，和class选择器。通过这些基本的选择器，HTML还有很多派生选择器，而多种基本选择器混合使用时则定义为分组选择器，此外，还有一种特殊的伪类选择器。
1HTML选择器
所谓HTML选择器，其实就是重新定义HTML表现性标签的样式，正如文中所提出的，<h1>标签内的文本应该时黑色的大体字，而当通过重新定义后，<h1>标签内可以是任何样式。
例子：HTML选择器的使用
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>HTML选择器的使用</title>
       <style type="text/css">
           h1{
               color: #555555;
               font-size: 2.3em;
               font-family: "微软雅黑";
           }
       </style>
   </head>
   <body>
       <h1>HTML选择器的使用</h1>
   </body>
</html>

实际效果如下图所示：

2派生选择器
通过依据元素在其位置的上下文关系来定义样式，称之为派生选择器，设计者可以使标记更加简洁，这种方式更好的体现了，CSS的级联特性，如下面这个例子，
派生选择器例子：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>派生选择器</title>
       <style type="text/css">
           h1 h2{
               color: red;
               font-size: 1em;
               font-family: "微软雅黑";
           }
       </style>
   </head>
   <body>
       <h1>HTML选择器的使用</h1>
       <h2>HTML选择器的使用</h2>
       <h1> <h2>HTML选择器的使用</h2></h1>
   </body>
</html>

具体效果如下图所示：

id选择器
ID选择器的作用就是通过ID选择器将CSS样式表作用到页面的对象上，那么这个样式表应该这样写，在选择器的开头写上一个#，如：
#content{
               font-size: 18px;
}
将这个样式表绑定到HTML对象上时，要定义标签的id为context。
class选择器
如果希望通过class选择器将样式表固定到HTML页面对象时，那么样式表的写法应该是在选择器开头处加上.符号，如：
.play{
               font-size: 20px;
}
这样，将这个样式绑定到HTML对象上时，要使用class选择器
5分组选择器
如果出现多个选择器定义的内容都是一样的时候，例如
h1{
font-size: 20px;
}
#content{
font-size: 20px;
}
.play{
font-size: 20px;
}
伪类选择器
伪类选择器并不是很多，通常他们都是用来定义一些特殊的效果，他们的写法由一个冒号:和一个带有符加条件的属性组成，如超链接就是一个典型的伪类选择器，，还有伪类选择器:lang，它的作用是允许设计者为不同的语言定义特殊的规则。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>伪类选择器</title>
       <style type="text/css">
           a:hover{
               color: red;
               cursor: pointer;
           }
       </style>
   </head>
   <body>
       <a>点击一下</a>
   </body>
</html>
CSS中还有一些其他的伪类选择器
:active 将样式添加到被激活的元素中
:focus 将样式添加到被选中的元素中
:hover 将鼠标悬浮在页面对象上方时，向页面对象添加样式
:link 将样式添加到未被访问过的链接中
:visited 将样式添加到访问过的链接中
:first-child 将样式添加到页面对象的第一个子元素中
:lang 允许设计者定义指定的页面中所使用的语言

应用CSS样式表
应用CSS的方式有四种，分别为嵌入式样式表，内联样式表，外联样式表，多重样式表。
1嵌入样式表
是指使用<style>标签将样式表放入到<head>内，这种用法的好处是，将页面的表现性和结构性实现很好的分离，对于设计者来说，使共同的协作效率更高，写法是
<style type="text/css">
           h1{
               font-size: 20px;
           }
</style>
<style>标签内部是type属性，当然，也有一些其他属性可以使用，如media属性，可以用来定义何种媒介来提交文档，文档可以被显示在显示器，纸媒介或者浏览器，代码如下：
<style type="text/css" media="screen">
           h1{
               font-size: 20px;
           }
</style>
2内联样式表
同时也成为行内CSS，通过style属性来引用声明语句，放在页面结构性标签的后面，例如，
<p style="color: red;">hello world</p>
页面在设计时，尽量少用内联样式表，因为这种方法不能将页面表现和页面结构很好的分开，通常是在不得已的情况下，用作补充调整的作用
3外联样式表
在创建整站的工程时，通常，一个CSS样式表需要同时用于以下几个页面。这时候使用外联样式表是最好的选择，因为使用CSS样式表可以作为一个独立文件存在页面外部，后缀名称为css.通常的情况是使用<link>标签引入样式表，写法是:
<link rel="stylesheet" type="text/css" href="index.css"/>
或者是
<style type="text/css" media="screen">
           @import url("global.css");
</style>

多重样式表
在样式表种，如果出现多种样式表，他们之前总得有个先后得问题，通常来说，当多个样式表作用于同一页面得一个对象时，离这个页面对象最近得样式表起决定性作用，但是，行内样式表始终处于最高级别，例子：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>多重样式表下的优先级</title>
       <link rel="stylesheet" type="text/css" href="css/bobo.css"/>
       <style type="text/css">
           .hui{
               color: red;
               font-size: 20px;
           }
       </style>
   </head>
   <body>
       <div class="bobo">
           <p class="hui">多重样式表下的优先级</p>
       </div>

       <dvi class="hui">
           <p class="bobo">多重样式表下的优先级</p>
       </dvi>

       <div class="hui">
           <p style="color: red;" class="hui">多重样式表下的优先级</p>
       </div>
   </body>
</html>
.bobo{
   color: blue;
   font-size: 16px;
}

效果如下图所示:

修饰页面文本字体
不要忽视字体的作用，字体的设置能够潜移默化的给浏览用户带来很大的视觉影响，CSS中，使用font-family属性来定义字体的样式，说到字体，中国文化中的字体博大精深，至少可以定义上百种，但是，浏览器只支持系统中的字体，如果设计者希望使用字定义的字体，则需要将字体存入电脑，
例子：CSS修饰字体的方法
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>修饰文本字体</title>
       <style type="text/css">
           h1{
               font-family: "微软雅黑";
           }
           p{
               font-family: "隶书";
               font-size: 22px;
           }
       </style>
   </head>
   <body>
       <h1>中国经济发展形式</h1>
       <p>从宏观上说，中国经济发展整体形式好。。。。。。。</p>
   </body>
</html>

效果如下图所示:

如果不确定浏览器支持的字体，可以在指定字体的后面添加备选字体，例如：
font-family: "微软雅黑","宋体";

文本的字号
font-size属性用来改变字体的大小，在规定字体大小的时候，最常见的有3中表示方法，也可以说是3种设置方案，分别是px,em,%
像素单位px，使用像素直接定义字体的大小，绝对单位，如12px，无论在哪个显示器种，字体的大小只会相对于显示设备来确定
em:这是目前比较流行的一种字体大小定义方式，一个字体的大小就是1em,任何浏览器的默认字体大小都是1em,用户可以根据自己的喜好定义默认字体，如网页中的字体大小就可以弹性的改变。
百分比：这是以当前文本的百分比定义尺寸，例如：{font-size:200%},是指定文本大小为原来的2倍，在页面制作中，通常使用%定义页面主体的初始字体大小，然后以em单位表示字体的大小。
文本段落行高
使用line-height进行行高的设定，同样，段落行高的数值也可以通过单位px,单位em,和百分比来设置，1em和100%代表正常的行距，所以用em单位和%表示行距也是比较好的选择。
禁止文本自动换行
大部分互联网上的页面，都是禁止页面内容自动换行，这似乎已经成为了一种默认的许可，如果页面随着浏览器的大小自动切换，确实令人眼花缭乱，通过white-space属性可以禁止文本自动换行.

给页面对象添加颜色
对于页面颜色，CSS要做的工作就是通过不同的属性作用于不同的HTML对象，将颜色值赋予这些对象就可以了，页面主要有color和background-color这两个重要的颜色，准确的说，color修改对象前景色，background-color修改器对象的背景色.

修饰页面文本和页面背景的属性
background 作用是将背景属性设置在一个声明中
background-color 设置页面对象的背景色
background-image 引用图像设置背景
background-repeat 背景图像重复的方式
background-position 设置背景图像的具体位置
background-acctachment 设置背景图像是否页面的其余部分而滚动
color 设置文本颜色
line-height 设置行高
white-space 设置元素段落排版格式
word-spacing 设置字间距
font-family 设置文字字体
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体粗细
direction 设置文本方向
letter-spacing 设置字符间距
text-align 对齐页面中的文本
text-decoration 向文本添加下划线
text-transform 控制元素中的字母

模块化的发展
CSS3开始遵循模块化的发展，以前的规范作为一个模块实在是庞大而繁杂，所以CSS3把它分成许多小的模块，这样，有助于理清各个模块的关系。
CSS3的模块化规范，显得非常灵活，一个CSS规范如果要完整的获得浏览器的支持，是非常困难的，但是浏览器选择完整支持某个模块的规范是比较容易实现的，反过来，如果衡量以个浏览器对CSS3的支持程度，可以各个模块分别衡量。
CSS3的模块化有利于未来的发展，CSS需要增加新的规范时，非常不希望其他规范也跟着变动，模块化的发展，使得每个独立的模块都能根据需要进行独立更新，当增加新的特性或者模块时，不会影响已经存在的特性。

浏览器的支持情况
尽管CSS3的很多新特性很受开发者的欢迎，但并不是所有的浏览器都支持它，各个主流浏览器都定义了各自的私有属性，以便能够让用户体验CSS3的新特性。
私有属性的出现，固然可以避免不同浏览器解析同一个属性时出现冲突，但是也给设计师们带来诸多不便，需要编写更多的CSS代码，而且也没有解决同一页面在不同浏览器中表现不一致的问题。
尽管私有属性有很多弊端，但是也为设计师们提供了较大的选择空间，至少在CSS3规范发布以前，能表现一些特定的CSS3的效果。

CSS3新特性
与之前的版本相比，CSS3的改进是非常大的，CSS3不仅是在修订和完善，更是增加了很多的特性，把样式表的功能发挥的淋漓尽致，之前的很多效果借助图片和脚本来实现，现在只需几行代码就能搞定了。CSS3的新特性如下：
1功能强大的选择器
CSS3增加了更多的CSS选择器，如在属性选择器中引入通配符，灵活的伪类选择符nth-child()等
2文字效果
在CSS3中，可以给文字增加阴影，描边和发光效果，还可以自定义特殊的字体，如艺术字体等网络上不常用的字体。
3边框
在CSS3中，可以直接给边框设计圆角，阴影，边框背景等，其中边框背景会自动把背景图切割显示。
4背景
背景图片的设计更加灵活，不但可以改变背景图片的大小，裁剪背景图片，还可以设置更多的属性
5色彩模式
CSS3的色彩模式，除了支持RGB色彩之外，还支持HSL(色调，饱和度，亮度)，并且针对这两种色彩模式，又增加了可以控制透明度的色彩模式。
6盒布局和多列布局
在布局方面，CSS3新增了两种布局方式，灵活的盒布局和多列布局，这两种布局，可以弥补现有布局的不足，为页面布局提供了更多的手段，并大幅度缩减了代码。
7渐变
CSS3已经支持渐变的设计，这样，不但告别切图的时代，而且设计也更加灵活，后期的维护也更加方便。
8动画
有了CSS3的动画，设计师们可以不用编写脚本，直接就可以让页面元素动起来，并且不会影响整体布局。
9媒体查询
CSS提供了丰富的媒体查询功能，可以根据不同的设备，不同的屏幕尺寸来自动调整页面的布局。

CSS3增强的选择器功能
属性选择符
CSS3新增了3种属性选择符，E[attr^="val"],E[attr$="val"],E[attr*="val"].这些选择符遵循了管用的编码原则，选用了^,$,*这三个通用的匹配运算符，具有以下意义：
1^匹配起始字符
2$匹配结束字符
3*匹配任意字符
属性选择符E[attr^="val"],该选择符具有attr属性并且属性值为一用空格分隔的字词列表，其中一个等于val的元素
例子：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>属性选择符</title>
       <style type="text/css">
           ul{
               margin: 0;
               padding: 10px 10px 10px 30px;
           }
           li{
               margin: 1px;
               font-family: "courier new";
               font-weight: bold;
           }
           li[lang^="a"]{
               background-color: #f60;
           }
       </style>
   </head>
   <body>
       <ul>
           <li lang="af">aaaa</li>
           <li lang="ar">bbbb</li>
           <li lang="be">cccc</li>
           <li lang="bg">dddd</li>
           <li lang="br">eeee</li>
       </ul>
   </body>
</html>

具体效果如下图所示：

属性选择符E[attr$="val"]
表示属性的值的最后字符为val
属性选择符e[attr*=val]
表示属性值种包含val部分

结构伪类选择符
CSS3种新增的结构伪类选择符，可以通过文档结构的相互关系来匹配特定的元素，对于又规律的文档结构，可以减少class顺序和id属性的定义，使得文档更加简洁。
1选择符root,not,empty,target
选择符E：root,选择匹配E所在文档的根元素。所谓的根元素就是位于文档结构种最顶层的元素，在HTML种，根元素就是html元素，此时该选择符与html选择符匹配的内容相同
选择符E:not(s),选择匹配所有不匹配简单选择符s的E元素
选择符E:empty,选择匹配E的元素，并且该元素不包括子节点，文本也属于节点
选择符E：target 选择匹配当前连接地址指向的E元素。
2选择符first-child,last-child,nth-child,nth-last-child
利用这几选择符，可以指定一个父元素种的第一个子元素，最后一个子元素，指定序号的子元素，第偶数个子元素，和第奇数个子元素。
选择符E:nth-child(n),匹配父元素中第n个位置的子元素，其中n可以是一个数字，关键字，(old,even),公式(2N+1),
选择符E:nth-last-child(n):匹配父元素中倒数第N个位置的子元素，与选择符E:nth-child(n)的计算顺序相反。语法和用法相同。

3选择符nth-of-type 和 nth-last-of-type
选择符E：nth-of-type(n)：匹配父元素中第N个子元素，参数n的使用与E:nth-child(n)相同，不同的是，在匹配父元素的子元素时，首先把匹配E的子元素筛选出来单独排列，非E的子元素不参加排列。
选择符D：nth-last-of-type匹配父元素中倒数第n个子元素
4选择only-child,first-of-type,last-of-type和only-of-type
选择符E：first-of-type匹配父元素中第一个子元素E。
选择符E：last-of-type匹配父元素中最后一个子元素E。
选择符E：only-child匹配父元素中唯一子元素E，父元素中只能由唯一子元素才能匹配成功。
选择符E：only-of-type:匹配父元素中只包含一个子元素E，父元素可以有多个子元素，但子元素E只能有一个才能匹配成功.

UI元素状态伪类选择符
在CSS3中，还有一种伪类选择符，叫UI元素状态伪类选择符，可以设置元素处在某种状态下的样式，在人机交互的过程中，只要元素的状态发生了变化，选择符就有可能会匹配成功
选择符E：checked：匹配所有用户界面上处于选中状态的元素
选择符E：enabled：匹配所有用户界面上处于可用状态的元素
选择符E：disabled：匹配所有用户界面上处于禁用状态的元素
伪元素选择符
在CSS3中，还有一种伪元素选择符，是指针对并不是真正的元素使用的选择符，二十针对CSS已经定义好的伪元素使用选择符。
E:：first-letter设置对象内的第一个字符的样式
E:: first-line设置对象内的第一行的样式
E:: before设置在对象发生的内容，和context属性一起使用
E:: after设置在对象后发生的内容，和context属性一起使用
E:: selection 设置对象被选择时的颜色
伪元素选择符的使用发发如下：
选择符：：伪元素{属性：值}
例子：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>伪元素的使用</title>
       <style type="text/css">
           p:first-letter{
               font-size: 24px;
               font-weight: bold;
           }
           a[href$=doc]::before{
               content:url(img/doc.png);
           }
           a[href$=pdf]::before{
               content: url(img/pdf.png);
           }
       </style>
   </head>
   <body>
       <p>
           以下是参考资料:<br />
           <a href="img/test.doc">参考资料1</a>
           <br />
           <a href="img/test.pdf">参考资料2</a>
       </p>

   </body>
</html>