02HTML5学习之用层叠样式表CSS配置颜色于文本

能更好地控制字体和页面布局。这些特性包括字号、行间距、字符间距、缩进、边距和元素排列等。
样式与结构分离。页面上的文本与颜色的格式可以单独配置与存储，从而使body部份独立开来。
样式可以存储。我们可以将样式单独保存为一个文件，然后在网页上引用即可。修改样式时，HTML保持不变。这就意味着，如果你的客户打算将若干网页的背景颜色从红色改为白色，你只需要修改包含样式的一个文件即可，而不用挨个去改每一张网页文档了。
文档可以变得更小。格式部分从文档中剥离出来了，因而实际的文档应该能变小。
维护更方便。同样的道理，如果要修改样式，只需单独修改样式表。

配置层叠样式表

使用CSS技术的方法有四种：内联、嵌入、外部以及导入。

内联样式：代码写在网页的body部份，作为HTML标签的属性。因此样式的作用范围仅限于包含该属性的特定元素。
嵌入样式（也称作内部样式）：在网页的head部分定义样式。这些样式说明对整张网页文档起作用。
外部样式：样式写在独立的一个文本文件中。在写网页时，通过head部分配置链接元素与外部样式文本文件产生关联。
导入样式：与外部样式类似，样式也是写在外部文本文件中，网页中进行引用。通过使用@import指令将外部样式导入为嵌入样式，也可以导入到其它的外部样式表中。

样式选择器与声明

样式表由样式规则组成，这些规则说明了所应用的样式。每一个规则由两部分组成，选择器与声明。

CSS样式规则选择器。选择器可以是一个HTML元素的名称、一个类名或一个id名称。
CSS样式规则声明。声明指出你所设置的CSS属性以及分配给该属性的值。

背景颜色属性

CSS中的background-color属性用于设置某个元素的背景颜色。请注意，声明是用大括号括起来的，而声明属性与声明值之间则用冒号分隔。示例如下：

body {background-color: yellow}

颜色属性

CSS中的颜色属性(color)用于设置某个元素的文本颜色（前景）。示例如下：

body { color: blue }

配置背景颜色与文本颜色

如果要用一个选择器来配置多个属性，我们可以用分号(;)将各项属性分隔开来：

body { color: blue; background-color: yellow; }

各属性项之间的空格是可选的。结尾处的分号也是可选的，但如果之后还需要增加另外的样式规则，保留末尾的分号还是有必要的。

CSS属性介绍

属性名称	说明	属性值
background-color	某个元素的背景色	任意有效的颜色
color	某个元素的前景（文本）色	任意有效的颜色
font-family	某个字体或字体系列的名称	任意有效的字体或字体系列，如serif、sansserif、fantasy、monospace或cursive
font-size	字符大小	有多种变化：数字值，以pt为单位（磅），或者以px为单位（像素），或者以em为单位（对应于当前字体中大写的M所占的宽度）；百分比数值；文本值，xx-small、x-small、small、medium、large、x-large以及xx-large
font-style	字符样式	Normal、italic或oblique
font-weight	规定字体的粗细	有多种变化：文本值（normal、bold、bolder以及lighter）、数值（100、200、300、400至900）
line-height	设置行高	通常也以百分比数值来呈现，例如200%对应的是两倍的间距
margin	简写属性，用于配置某个元素的外边距属性。	一个数值（以px或em为单位），例如`body {margin: 10px}`将页面边距设置为10像素。在消除边距时不要加上px或em单位，`body{margin:0}`即为正确的写法
margin-left	配置元素左外边距值	一个数值（以px或em为单位），auto或0
margin-right	配置元素的右外边距	一个数值（以px或em为单位），auto或0
text-align	规定文本的水平对齐方式	Center（居中）、justify（两端对齐）、left（左对齐）或right（右对齐）
text-decoration	配置文本是否需要加下划线；通常应用于超链接	如果设置为"none"，那么浏览器显示的有超链接的文本就不像通常所做的那样带下划线了
text-indent	配置文本首行的缩进方式	一个数值（以px或em为单位）、auto或百分比
text-shadow	规定添加到文本的阴影效果。这是CSS3中的属性。	二到四个数值（以px或em为单位），用于指定水平偏移、纵向偏移、模糊半径、扩散距离，再标一个颜色值
text-transform	控制文本大小写	none（无，默认）、capitalize(首字母大写)、uppercase（全部大写）或lowercase（全部小写）
white-space	规定如何处理元素中的空白	normal（默认）、nowrap、pre、pre-line和pre-wrap
width	元素内容的宽度	一个数值（以px或em为单位），auto（默认）或百分比

2、为网页配色

配色的CSS语法

在CSS中有多种配置颜色的方法，语法如下：

颜色名称
十六进制颜色码
简写的十六进制颜色码
十进制颜色码（RGB三原色）
CSS3中新引入的HSL颜色码（色相、饱和度、明度）。

代码规则如下：

CSS语法	颜色类型
p{ color: red; }	颜色名称
p{ color: #FF0000; }	十六进制颜色码
p{ color: #F00; }	简写的十六进制颜色码（一个字符代表一种原色）
p{ color: rgb(255, 0, 0); }	十进制颜色码（RGB三原色）
p{ color: hsl(0, 100%, 50%); }	HSL颜色码

3、带样式属性的内联CSS

样式属性（Style）

内联样式的使用方法是在相关标签中添加样式属性代码。样式属性的值写在样式规则声明中，根据需要配置。声明是由属性和值组成的，每个属性和值之间用冒号隔开。如果有多个属性，每个属性之间用分号隔开。示例如下：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>Inline CSS Example</title>
</head>
<body style="background-color:#F5F5F5;color:#008080">
<h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1>
<p>This paragraph inherits the styles applied to the body tag.</p>
</body>
</html>

4、带样式元素的内嵌CSS

样式（Style）元素

嵌入样式是在页面的head节中设置的，写在<style>元素中。在起始的<style>标签和结束的</style>标签之间，包含一系列嵌入样式规则。使用XHTML语法时，要为<style>标签设定一个类型属性，值是“text”或“css”，以指明MIME类型。在HTML5中就不需要这个属性了。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
<style>
body { background-color: #e6e6fa; color: #191970; }
h1 { background-color: #191970; color: #e6e6fa; }
h2 { background-color: #aeaed4; color: #191970; }
</style>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b>
<a href="index.html">Home</a> &nbsp;
<a href="service.html">Service</a> &nbsp;
<a href="contact.html">Contact</a>
</b>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services:</p>
<ul>
<li>Website Design</li>
<li>Interactive Animation</li>
<li>E-Commerce Solutions</li>
<li>Usability Studies</li>
<li>Search Engine Optimization</li>
</ul>
<h2>Meeting Your Business Needs</h2>
<p>Our expert designers are creative and eager to work with you.</p>
</main>
<footer>
<small><i>Copyright &copy; 2014 Your Name Here</i></small>
</footer>
</body>
</html>

5、用CSS配置文本

字体系列属性（font-family）

font-family属性用于指定字体系列。浏览器使用已经安装在用户本地计算机中的字库来显示文本。如果本地没有安装相应的字体，此时就会显示默认字体。绝大多数浏览器的默认显示字体是Times New Roman。
列出字体属性值的各个字体与种类，就创建了内置的备份计划。浏览器会根据这份清单的顺序依次尝试使用各字体。示例代码如下：

p { font-family: Arial, Helvetica, sans-serif; }

如果想使用其它字体，了解font-face规则。

font-size值的类别	属性值	提示
文本值	xx-small、x-small、small、medium（默认）、large、x-large、xx-large	当浏览器里的文本大小发生变化时，能较好地缩放；为文本尺寸提供的选项有限
像素单位（px）	带单位的数值，如10px	相对于显示器屏幕分辨率而言；并不是每种浏览器都能随文本大小变化而很好的缩放
磅单位（pt）	带单位的数值，如10pt	用于配置网页的打印版本；并不是每种浏览器都能随文本大小变化而很好地缩放
Em单位（em）	带单位的数值，如.75 em	W3C推荐；当文本在浏览器里大小发生变化时，能较好地缩放；为文本尺寸提供的选项较多
百分比值	百分比值，如75%	W3C推荐；当文本在浏览器里大小发生变化时，能较好的缩放；为文本尺寸提供的选项较多

CSS3文本阴影属性

CSS3的text-shadow属性为网页上的文本添加了不同深度、多种维度的阴影显示效果。在设置文本阴影属性时，需要指定阴影的水平偏移、垂直偏移、模糊半径（可选）和颜色等值。

水平偏移：是一个像素值。正值时阴影在右，负值时阴影在左。
垂直偏移：是一个像素值。正值时阴影在下，负值时阴影在上。
模糊半径（可选）：是一个像素值。忽略时默认为0，表示一个尖锐的阴影。数值越大，阴影越模糊.
颜色值：有效的颜色值。

下面代码效果为水平偏移3像素，垂直偏移3像素，模糊半径5像素的深灰色阴影：

text-shadow: 3px 3px 5px #666;

6、CSS类、id与派生选择器

类选择器

当我们需要将某个CSS声明赋予多个指定的页面元素时，可以使用CSS类选择器，这样就不需要把样式与每一个HTML元素一一对应了。在样式表的类名前放置一个点。下面的代码展示了一个样式表类：

.feature { color: #c70000; }

下面代码展示了类的引用：

<li class="feature">Hello</li>

id选择器

使用CSS中的id选择器，我们可以设定一个CSS规则并将其统一应用到页面上的某个区域中。在相同的页面上，类选择器可以使用多次，而id选择器在每个页面上只能使用一次。在设置id的样式时，需要在样式表的id名称前加上井号（#）。id名称可以包括字母、数字、连字符、下划线等，但不能有空格。下面为示例代码：

#main { color: #333333; }

以下为设置代码：

<div id="main">this</div>

派生选择器

为某个容器元素（父元素）里的元素设置样式时，可以使用CSS派生选择器。这样做的好处在于减少各种类与id的数量，但仍能为页面上的特定区域配置样式。先列出容器选择器（可以是元素选择器、类选择器或是id选择器），再指定需要添加样式的特定选择器，即可实现派生选择器的配置。如下示例：

main p { color: #00ff00; }

7、Span元素

在为页面上某个单独于其他内容的部分设置格式时，分区元素div很有用，它被称为块显示元素。与之相对的span元素在页面上定义了一个区域，它与其他内容并没有物理分离；这种方式称为内联显示。如果要设置某个包含在其他元素之中的子元素的样式，可以使用<span>标签。

8、使用外部样式表

这样的CSS的优点在于把样式配置在单个文件中。

链接元素

链接元素将某个外部样式表文件与网页关联起来。它被放置在网页的head节中。链接元素是一个单独使用的空标签，有三个属性，分别是rel、href和type。

rel属性的值是"stylesheet"。
href属性的值是样式表文件的名称。
type属性的值是"text/css"，也即CSS的MIME类型。在HTML5中，type属性是可选的，但在XHTML中，必须要设置。

9、用CSS实现HTML元素居中

要做到将HTML元素居中，要点在于配置一个分区元素(div)以包含或者说囊括（wrap）所有内容。
接下来设置这样的CSS样式规则。所谓外边距（margin）指的是围绕在某个元素四周的空白区域。在body元素的例子中，外边距是页面内容与浏览器边界之间的空白区域。顾名思义，margin-left和margin-right这两个属性分配配置了左外边距和右外边距。外边距可设为0，单位可以是px、em或百分比，或者"auto"（自动）。如果将margin-left和margin-right均设置为auto，浏览器将计算可用空间，然后平均分配给左边距和右边距。width属性配置的是块显示元素的宽度。如下示例代码：

#wrapper {
width: 700px;
margin-left: auto;
margin-right: auto;
}

10、层叠

下图说明了在样式中由外及里应用“层叠”的概念。
层叠概念

外部样式可以应用于多个页面。如果网页既包含指向外部样式表的链接，又包含嵌入样式，则首先生效的是外部样式，然后再应用嵌入样式。
如果网页既包含嵌入样式，又包含内联样式，则内嵌先生效，然后再是内联样式。
任意一个HTML标签或属性都能使样式失效。

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017

雨凊

发布了35 篇原创文章 · 获赞 11 · 访问量 751

私信关注