HTML基础 CSS基础3

来源：互联网发布：北京80坐标系数据编辑：程序博客网时间：2024/05/22 14:35

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 &copy; 2017 you name is here </div></body></html>

8.span元素：内联的 <span> 元素在网页中定义一个区域，这个区域在物理上不通过换行符与其他区域分开。如果需要格式化包含在一个区域中的另一个区域，比如在一个<p>,<blockquote>或者<div>元素中的区域，就适合使用<span>标记。

阅读全文

0 0