6.配置外部CSS: 外部样式表是包含CSS样式规则的文本文件,使用.css扩展名。这种.css文件通过link元素与网页关联。因此,多个网页可关联同一个.css文件。.css文件不包含任何XHTML标记——它只包含CSS样式规则。
link属性:link元素将外部样式与网页关联。它位于网页的head部分,是一个独立标记。在HTML5语法中,link元素编码为<link>。在XHTML中为<link/>。有三个属性随同link元素使用,即rel,href和type。
rel的属性值是“stylesheet” href属性的值是.css的文件名 type的属性值是“text/css”,即CSS的MIME类型。type在HTML中是可选的。而在XHTML中是必须的。
如何创建外部样式:启动文本编辑器,输入样式,将文件另存为color.css。 如:body{background-color:#0000FF;color:#FFFFFF;} (注意:该文件不包含任何HTML代码,只编码CSS规则)
配置网页:修改一般网页中的title元素,在head部分添加link标记,在body部分添加一个段落:
<html>
<head>
<title> Styles
</title>
<link rel="stylesheet" href="color.css">
</head>
<body>
<p> Nothing is impossible</p>
</body>
</html>
7.CSS的class,ID和上下选择符:
class选择符: 如果希望将CSS规则应用于网页中的某一类元素,而非只是应用于某一元素时。就要使用class选择符。设置一“类”样式时,要将类名作为选择符。在类名前添加圆点(.)。以下代码配置名为feature的一个类,将文本颜色设为红色: .feature {color:#FFoooo;} 类中的样式可用于你希望的任何元素。这里使用class属性来做到,比如 class=“feature”。在想要应用一“类”样式的标记中,就不用在类名中加圆点了。如: <li class="feature">Good</li>
id选择符:要标识网页上的单个区域,并向其应用一个特定的CSS规则,就应该使用id选择符而不是class选择符。为某个id配置样式时,要在id前加一个#符号。以下代码在样式中配置名为“footer“的id: #footer {color:#333333;} 。 使用id样式时就不用在前头加”3“号了。如: <div id="footer">Good good study,day day up </div>
在CSS中,id选择符和class选择符的使用很相似。通常在配置单个元素时 使用id选择符,配置多个元素时使用class选择符。
上下文选择符: 在容器(父)元素的上下文中配置一个元素时,就要使用上下文选择符。也称为后代选择符。先列出容器选择符(可以使元素选择符,class,id等),再列出要配置样式的选择符。 如: 为了规定早先配置的footer id 中的锚标记使用绿色文本 ,可以这样编码样式规则: #footer a { color:#00f00;}
使用:
都是先在网页的head部分添加 class 和 id 样式,然后在HTML元素中关联刚才创建的class和id 。
<html>
<head>
<title> Styles
</title>
<style type="text/css">
.feature{ color:red;}
#footer{color:yellow;}
</style>
</head>
<body>
<p> Nothing is impossible</p>
<ul>
<li class="feature"> perfect </li>
<li class="feature">funny </li>
</ul>
<div id="footer">Copyright © 2017 you name is here </div>
</body>
</html>
8.span元素: 内联的 <span> 元素在网页中定义一个区域,这个区域在物理上不通过换行符与其他区域分开。如果需要格式化包含在一个区域中的另一个区域,比如在一个<p>,<blockquote>或者<div>元素中的区域,就适合使用<span>标记。