CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.
什么是CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 可以通过以下方式添加到HTML中:
1. 内联样式- 在HTML元素中使用"style"属性
<div style="opacity: 0.3;padding: 30px;background-color:#8AC007 "></div>
2.内部样式表 -在HTML文档头部 <head> 区域使用<style>--元素--来包含CSS，具体分为以下中使用方式:
- 1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式
<style>
#IDName{
color: black;
margin-left: 30px;
font-size: 13px;
}
</style>
<p id="IDName">这个段落</p>
- 2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）
<style>
/*class选择器*/
.calssValue{
color: red;
margin-left: 100px;
font-size: 23px;
}
</style>
<p class="calssValue">center text</p>
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
<style>
p.center
{
text-align:center;
}
</style>
</head>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
PS : .A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
<li><span>内容也是红色</span></li>
</ol></p>
</body>
- 3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式
<head>
<style>
h1{font-family: Verdana;font-size: 36px;}
h2{color: blue;font-size: 18px;}
p{margin-left: 50px}
a:link{color: green}
a:visited{color: blue}
a:hover{color: chocolate}
a:active{color: aquamarine}
</style>
</head>
- 4.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
<p>yellow text</p><!--文字是黄色的-->
</div>
- 子选择器（sub-selector，SS）：指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
- 6.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
3. 外部引用 - 使用外部 CSS文件
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<meta charset="UTF-8">
<title>CSS实例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
样式表应该以 .css 扩展名进行保存。里边的具体语法格式跟内部样式表相同。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
.CSS中
h2{color: blue;font-size: 18px;background-color: burlywood}
内链中
<style>
h2{background-color: lawngreen}
</style>
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试！</h3>
</body>
网友评论