css样式表---1

最新推荐文章于 2022-08-15 10:45:58 发布

weixin_33802505

最新推荐文章于 2022-08-15 10:45:58 发布

阅读量266

点赞数

文章标签： python xhtml

原文链接：https://my.oschina.net/u/1866565/blog/300189

版权

2019独角兽企业重金招聘Python工程师标准>>>

3.1.1 CSS概念

CSS全称是Cascading Style Sheet，翻译成中文叫层叠样式表。它是一种标记性语言，配合HTML语言进行页面外观控制。CSS技术诞生于1996年，早期由于缺乏浏览器支持，并没有引起人们的重视，现在大多数浏览器都支持CSS。CSS允许在HTML文档中加入样式，如字体类型、颜色、大小等，对于设计者来说，它是一个非常灵活的工具，可以帮助开发人员实现网页内容与外观控制的分离。CSS样式表的引入也非常灵活，既可在行内定义，也可定义在页面的特定位置，甚至作为外部样式文件供网页调用，真正实现外观控制与内容功能的分离。

CSS是由W3C组织负责制订和颁布的，1996年12月发布的CSS为1.0规范，1998年发布了2.0规范，目前还有2.1和3.0规范两个版本处于应用状态。由于W3C是一个民间技术组织，并没有强制要求各软件厂家必须符合CSS规范，因此，不同的浏览器对CSS的支持并不完全相同，这多少给开发者带来一些不便，但目前主流的浏览器IE6、IE7以及Firefox等已经将CSS作为事实的技术规范，CSS因此得到了非常好的支持。

3.1.2 使用CSS的优点

HTML标签也可以进行页面样式的控制，在本章范例html_style.htm中，将<font></font>标签内嵌在<h1></h1>标签中，实现了字体和颜色的控制，代码如下。

<html>

<head>

<title>使用HTML方式控制样式</title>

</head>

<body>

<h1><font face="楷体" color="red">第3章 CSS样式表</font></h1>

<h2><font face="楷体" color="blue">第1节样式表概述</font></h2>

<h2><font face="楷体" color="blue">第2节 CSS样式表定义</font></h2>

<h2><font face="楷体" color="blue">第3节网页中应用CSS样式表的方法</font></h2>

</body>

</html>

在上述代码中，通过设计font标签的face与color两个属性，实现了对文字的字体与颜色控制。但这种在HTML标签中内嵌代码的控制样式的方法明显存在缺陷，当需要控制的样式非常多时，工作量非常大，而且一旦需求发生改变，例如将页面中所有的<h2>标签由蓝色改成黑色，必须在每个页面中重新修改代码。

在本章范例css_style.htm中，对上述代码进行了改进，代码如下。

<html>

<head>

<title>CSS方式控制样式</title>

h1{ font-family:"楷体"; color:red;}

h2{ font-family:"楷体"; color:blue;}

</style>

</head>

<body>

<h1>第3章 CSS样式表</h1>

<h2>第1节样式表概述</h2>

<h2>第2节 CSS样式表定义</h2>

<h2>第3节网页中应用CSS样式表的方法</h2>

</body>

</html>

上述代码中，<h1></h1>标签与<h2></h2>标签内部的文字样式已经不再使用内嵌的<font></font>来控制，而是使用样式表h1{}与h2{}控制，页面效果如图3-1所示。

图3-1 CSS方式控制样式

当要改变<h2></h2>颜色时，只需要修改h2{}样式表color属性对应的颜色名，页面中所有的<h2></h2>样式都会发生改变。样式表还可以单独保存在文件中，供网站中的所有文件调用，这样既能提高开发效率，又可保证网站中页面的风格统一。

归纳起来，使用样式表来控制页面外观有如下一些优势：

1．CSS使样式代码独立于网页HTML代码，简化网页格式设计，增强了网页的可维护性；

2．样式与内容分离，可使用程序控制样式，增强了网页的表现能力；

3．CSS文件可被浏览器缓存，加载和刷新网页时，只需要传送页面内容，就可以节省带宽，提高访问速度；

4．内容与样式设计分离，有利于开发团队分工合作，提高代码重用性，提高开发效率；

5．网页内容与外观代码分离，提高了页面的兼容性，不同的浏览器与设备可根据实际情况对同一站点的页面样式进行选择和处理。

3.2 CSS样式定义与编辑

3.2.1 CSS定义

CSS由样式规则组成，以告诉浏览器怎样去显示一个文档。

样式规则如下：

样式选择器{

属性1:属性值;

属性2:属性值;

…

属性n:属性值;

}

例如在3.1节用来控制<h2></h2>标签的外观，使用了如下样式规则：

h2{ font-family:"楷体"; color:blue;}

在这段代码中，h2为样式选择器，font-family和color为该样式的两个属性，分别表示字体名和颜色，对应的值为“楷体”和“blue”，该样式表示将页面中的<h2></h2>标签的字体设置为楷体，颜色设置为蓝色。

在CSS规则中，“样式选择器”是一个非常重要的概念，样式选择器是用一定规则来指定一个或一组标记，从而对它们进行统一的外观控制。样式选择器可以包括HTML标签符、用户自定义类class或用户自定义ID。“属性(attributes)”表示由CSS标准定义的样式属性，“属性值(values)”为样式属性的值。

在下列代码中，使用样式选择器body，body具有margin-left、margin-top等5个属性，分别表示左、上、右、下边距和背景颜色。

body

{

margin-left: 20px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #00ff00;

}

本章范例body_style.htm在3.1节描述的页面文件中，将上述代码加到页面样式中，页面效果如图3-2所示，读者可以对照前面的页面效果，理解CSS工作原理。

图3-2 body样式

关于样式表的语法，要注意以下几个问题：

属性必须包含在{}号之中；

属性和属性值之间用“:”分隔；

当有多个属性时，用“;”进行区分；

在书写属性时属性之间使用空格换行，并不影响属性的显示；

如果一个属性有几个值，则每个属性值之间用空格分隔开；

CSS语言对于属性值要求很严格，如果CSS规范中没有或者不符合要求，CSS语句都不能正常作用。

3.2.3 CSS编辑

任何纯文本编辑器都可以进行手工方式的样式表编写工作，不过，纯粹手工编写工作量大，而且容易出错。很多网页制作工具都支持样式表的编辑，例如Dreamweaver和ASP.NET开发环境。

Dreamweaver支持可视化与代码两种方式进行样式表的编写。

如图3-3所示，使用Dreamweaver编辑网页时，当选择页面中某个HTML标签时，通过属性对话框，可以可视化样式编写工作，这是一种所见即所得的工作模式，即使开发人员不太熟悉CSS语言，也可以由Dreamweaver生成相应的CSS代码。

图3-3 Dreamweaver样式属性对话框

使用代码方式编写CSS时，Dreamweaver提供了强大的代码提示功能，帮助开发人员轻易生成CSS代码。编辑样式代码时，按空格或回车键就可以使用Dreamweaver的代码提示功能。图3-4(a)是在编写样式表boby{}时Dreamweaver给出的代码提示，开发人员只需将鼠标移动到相应属性上，按回车键，该属性自动加至代码中，同时还会弹出属性值的代码提示或选择器，图3-4(b)是编写颜色样式时Dreamweaver工具弹出的拾色器。

图3-4 (a)Dreamweaver样式编写代码提示 (b)Dreamweaver样式编写弹出拾色器

3.3 网页中应用样式表的方法

在网页中，可通过在HTML标签内嵌套、页面内嵌套和外联样式表文件等几种方法使用样式表。

3.3.1 HTML标签中内嵌style属性

具体语法是在HTML标签中加入一个style=""的属性，两个引号之间定义该标签的样式，样式定义的语法遵循样式定义规则。

这是一个直接书写样式的段落

</p>

上述代码为段落标签<p></p>声明了样式，指定了段落缩进1厘米，背景色为黄色，字体为courier。

需要说明的是，这种样式声明与旧式的HTML标签格式控制有本质上的区别，例如下面代码，虽然也能控制<p></p>标签的颜色、背景和宽度，但是通过标签的属性定义方式实现控制外观，不是严格意义上的样式表，新的W3C规范已经不推荐使用这种外观控制方式。

<p color="red" width="150px" bgcolor="yellow">旧式的HTML标签外观控制方式，不是样式表</p>

HTML标签内嵌样式属性的方式只适合对某个特定的HTML标签设置样式，定义好的样式不能被其他标签共用，不适合大范围的样式定义。

3.3.2页面内嵌入样式表

这种内嵌方式是将样式表写在页面<head></head>标签内部，并且用<style></style>标签进行声明，样式如下。

<!--

样式表定义

-->

</style>

本章范例文件inner_style.htm演示了内嵌CSS的使用方式，页面中三个段落标签<p>都会受到该样式表p{ background:gray;color:blue;font-size:16px;}的控制，背景为灰色，文字为蓝色，字号为16像素。

<html>

<head>

<title>页面内嵌样式</title>

<!--

p{background:gray;color:blue;font-size:16px;}

-->

</style>

</head>

<body>

</body>

</html>

3.3.3外联样式表文件使用样式表

当定义样式内容较多，且需要多个页面共享样式时，可使用外联样式表文件来使用样式表。

首先需要定义一个样式表文件，样式表文件的扩展名为.css，在样式表文件中，不需要再使用<style></style>标签，直接定义样式即可。例如，本章范例文件style.css中定义了段落标签<p>和<h1>标签的样式，代码如下：

h1{ color: green; font-size: 37px; font-family: impact }

P { text-indent: 25px; background: yellow; font-family: courier }

要调用style.css文件，可以在<head></head>标签中加入一条<link>标签，语法如下。

本章范例文件out_style.htm演示了如何调用外部样式表文件。

<head>

<title>外部样式表</title>

</head>

<body>

<h1>外部CSS</h1>

<p>通过link标签使用外部样式表文件style.css</p>

</body>

</html>

上述代码调用了CSS文件夹下面的样式表文件style.css，样式表功能与前面两种使用方法完全一致。

3.4 CSS样式选择器

样式选择器包括HTML标签、类和ID，它们可以协同作用修饰HTML标签，优先级从低到高。

3.4.1 HTML标签作样式选择器

网页是由不同的HTML标签组成的，可以直接使用HTML标签名作为CSS的样式选择器，从而直接控制页面中一组HTML标签的样式。

例如下列代码中，分别使用了h1和p作为样式选择器。

h1{

font-size:16px;

color:red

}

p{font-size:11px;color:gray}

一个网页中如果引用上述样式表，则页面中所有标题标签<h1>与段落标签<p>都将分别受到这两个样式的控制，不需要再单独设置样式。有了h1样式，无论页面中有多少个<h1>标签，都将字号大小显示成16像素，字体颜色为红色，由于一个样式表的属性和值可以设置多个，从而可以使用h1样式选择器实现<h1>标签的多个风格控制，达到了统一高效的目的，例如，需要将<h1>标签的字体颜色改成蓝色，只要将color属性对应的值由red改为blue就行了。

有时为了减少样式表的重复声明，常常采用“组合样式选择器”来定义样式表。例如：h1, h2, h3, h4 {font-size:18px;color:red}可将文档中的不同级别的标题<h1>至<h4>的样式定义为一致。

本章范例h_style.htm文件演示组合样式选择器定义方式，页面中放置了h1至h3三级标签。

<h1>第3章 CSS样式表</h1>

<h2>第1节样式表概述</h2>

<h2>第2节 CSS样式表定义</h2>

<h2>第3节网页中应用CSS样式表的方法</h2>

<h3>3.1 标签内部使用CSS</h3>

<h3>3.3 使用外部CSS文件</h3>

没有使用组合样式控制时，三级标签的默认显示字号是不一样的，如图3-5所示，使用组合样式控制后，页面h1至h4各级标题的字号统一为18像素，颜色为红色，如图3-6所示。

图3-5各级h标题默认样式

图3-6 h1至h4组合样式选择器效果

3.4.2 类作为样式选择器

使用HTML标签作样式选择器带来两个问题：其一，当页面中的相同标签要显示成不同的样式怎么办？其二，当不同的标签要显示相同的样式，是否需要逐一设计不同标签的样式？

由于HTML标签作样式选择器的作用对象是页面中所有标签，因此，问题似乎无法解决。例如，页面中有三个段落标签，使用p作为样式选择器，代码如下：

<html>

<head>

p{background:#CCCCCC; color:#FF0000; font-size:16px;}

</style>

</head>

<body>

</body>

</html>

如果想使三个段落显示不同的背景与字体颜色，使用p作为样式选择器是无法实现的，因为该样式会对页面中所有段落起控制作用。

事实上，网页设计人员经常会遇到需要控制页面中部分标签的样式，这种情况下，也就是缩小原有HTML标签作样式选择器的作用范围。此时，可使用类(class)样式选择器。

类样式选择器的完整格式如下：

HTML标签名.类名

{属性1:值;

属性2:值;

……

属性n:值;

}

可以用类(class)为一个HTML标记符指定多个样式，与HTML标签作样式选择器不同，要使类样式选择器起作用，必须在标签中指定样式的类名，如class="style1"。

将上述三个段落的背景设置为灰色，字体分别为红色，蓝色，黑色，字号大小分别为20px、16px、12px，可以设置三个类选择器，并在三个段落标签中指定类样式选择器，相应代码如下。

p.style1{background:gray;color:red; font-size:20px;}

p.style2{background:gray;color:blue;font-size:16px;}

p.style3{background:gray;color:black;font-size:12px;}

</style>

上述代码的页面效果如图3-7所示。需要注意的是，在<p>标签中指定样式选择器的类名，不能使用完整样式选择器名称p.style1，而必须使用style1，因为style1才是真正的类名。

图3-7 类作样式选择器

类的声名也可以不针对具体的HTML标记符，很多时候，我们都省略类选择器前面的HTML标签名，直接使用“.类名”的格式声明一个类样式。

例如有样式

.strong

{

font-weight:bold;

}

此时，页面中只要需要font-weight样式属性的标签，例如<p>、<div>、<span>等，都可以使用class="strong"调用该样式，使字体加粗。这是多个HTML标签共用同一个样式的例子。

上述两种类的定义也可以复合使用，例如下面代码中声明了.style1与p.stlye1两个样式表，类名相同。

.style1{color:red; }

p.style1{background:gray; font-size:20px;}

页面中的<p>和<span>两个标签都使用style1样式，则color、background和font-size三个属性同时作用于<p>标签，而只有color属性作用于<span>标签，请读者仔细体会样式作用的原理。

<span class="style1">这是一个范围</span>

3.4.3 ID作样式选择器

HTML标签的ID是一个身份标识，针对某个特定标签的样式控制或编程，都要使用标签的ID。ID作样式选择器与类和HTML标签作样式选择器的语法基本一致，页面中对应标签只需要设置与ID样式选择器一致的ID就可以使用该样式，一般情况下，页面标签的ID是唯一的，因此，ID样式选择器一般只针对某个特定的标签作用一次。

定义格式如下：#ID { attributes1:values1;attributes2:values2;…}

例如下面代码用#yellow声明一个ID样式表，表示字体为黄色。

#yellow{color:yellow}

其引用如下：

<p id="yellow">本段为黄色</p>

上述代码请参见本章范例id_selectors.htm。

使用类选择器和ID选择器有以下一些区别：

类选择符可以重复使用，且可以用在任意元素上，使用任意次；

页面中HTML标签的id属性应该是唯一的，拥有id的元素才会应用该样式；

ID选择器的优先权高于类选择器。

3.4.4 层次样式选择器

HTML标签是可以嵌套使用的，本章范例div_li_style.htm有如下代码，使用了两个层，并分别指定了id，层内嵌套有列表标签。

<ul>

<li >这是div1中的列表</li>

<li>这是div1中的列表</li>

</ul>

</div>

<ul>

<li id="li1">这是div2中的列表，id为li1</li>

<li>这是div2中的列表</li>

</ul>

</div>

如果要实现图3-8的样式：div1中<li>标签为加粗字号，红色，div2中<li>标签为普通字号，蓝色，如果使用类作样式选择器，则需要针对<li>标签设计两个不同的类样式，并在<li>标签中调用，声明和调用样式的代码变得较复杂。

事实上，CSS规范中提供了层次样式选择器，可以实现上述效果。

图3-8 层次样式选择器

下列代码给div1和div2定义了层次样式表

div#div2 ul li{font-weight:normal;color:blue;}

div#div1 ul li{font-weight:bold; color:red;}

层次样式表的概念与HTML文档树的层次结构是一致的，沿着某个起始的节点，经过一定路径，从而达到指定的位置，层次样式选择器就是使用这条路径作选择器的名称的。

在上面代码中，层次选择器div#div1 ul li所定义的样式表示将div标签下面一个id为div1名下的ul和li标签的字体设置成加粗，颜色为红色。

需要说明的是，样式选择器的基本形式只有HMTL标签、类、ID，层次选择器实际上是上述三种基本选择器的组合方式。

3.4.5 超链接专用选择器

由于HTML中的超链接标签<a>有link、visited、hover、active四个状态，分别表示链接、已访问过的链接、鼠标停在上方时、点击鼠标时四个状态。

CSS规范为超链接提供了4种专用选择器：　　

a:link（没有接触过的链接）：用于定义链接的常规状态。这种链接状态是基本的，推荐至少要定义这种链接样式。

a:visited（访问过的链接）：用于阅读文章，能清楚地判断已经访问过的链接。颜色要和超链接常规状态颜色不同，多用于以内容为主的网站。

a:hover（鼠标放在链接上的状态）：用于产生视觉效果。(推荐“a:hover”链接颜色使用红色，能产生极好的视觉效果。)

a:active（链接被点击时的状态）：用于表现鼠标按下时的链接状态。　

以上4种选择器第4种较少使用，在定义选择器时可以省略，但要严格按上述顺序定义，否则可能会无效。

a:link{text-decoration:none ; color:red;}

a:visited {text-decoration:none ; color:gray;}

a:hover {text-decoration:underline ; color:red ;}

a:active {text-decoration:none ;color:green;}

上述样式控制的超链接如图3-9所示，没有访问过的超链接为红色，访问过的为灰色，被点击时为绿色，鼠标悬停在超链接上方时为红色加下划线。

图3-9 超链接样式

如果网页中不同区域的超链接需要设置成不同的样式，如上图所示，第一个栏目的超链接未访问时为红色，第二个栏目未访问时为蓝色，此时，可以单独设计一个用来控制超链接样式的类，超链接类的语法格式为a.类名{样式定义}，详见本章范例link_style.htm的代码。

a.news:link{text-decoration:underline ;color:blue;}

a.news:visited{text-decoration:underline ;color:green;}

a.news:hover {text-decoration:underline ;color:red;}

a.news:active {text-decoration:underline ;color:green;}

调用上面超链接样式，必须在超链接标签中显示指定样式类名，代码如下。

3.4.6通配选择器*

有时，需要将网页中所有标签设置成某一共同的样式，例如，所有文字的颜色都显示成红色，此时，可使用通配样式选择器“*”为所有的元素定义统一的属性。

例如，页面中声明了通用样式选择器的样式

*{color:red;}

则页面中所有标签的文字都以红色显示，除非另外再受到其他样式的控制。

转载于:https://my.oschina.net/u/1866565/blog/300189

weixin_33802505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式表---1

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

css样式表---1

“相关推荐”对你有帮助么？