目录
一.CSS概述
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二.CSS的引入方式
CSS的引入方式有四种,分别是行内样式、外链样式、内嵌样式、导入样式。
我们可以通过下面的表格来进行简单的了解。
引入方式 | 描述 | 使用方法 | 备注 |
---|---|---|---|
行内样式 | 行内样式(也称内联样式)可用于为单个元素应用唯一的样式。 | 把style 属性添加到相关元素。style 属性可包含任何 CSS 属性。 | 行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起)。请谨慎使用此方法。 |
外链样式 | 通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观! | 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。 | 外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。外部 .css 文件不应包含任何 HTML 标签。 |
内嵌样式 | 如果一张 HTML 页面拥有唯一的样式,那么可以使用内嵌样式表。 | 内嵌样式是在 head 部分的 <style> 元素中进行定义。 | |
导入样式 | 通过使用@import关键字导入css样式表 | 导入样式是在 head 部分使用@import关键字导入.css文件 | 不经常使用。 |
注意:请勿在属性值和单位之间添加空格(例如 margin-left: 20 px;)。正确的写法是:margin-left: 20px;
关于这四种引入方式的优先级:采用“就近原则”(考虑离标签的距离)。
三.CSS选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
1.基本选择器
CSS的主要作用就给网页中的元素设置样式,选择器则是用来匹配元素色。CSS支持很多选择器,最基本的选择器有标签选择器、id选择器、类选择器、通用选择器。
下面就是这四种选择器的基本内容:
选择器 | 描述 | 使用方法 | 备注 |
---|---|---|---|
标签选择器 | 直接将HTML标签作为选择器 | 使用HTML标签就可以选择对应的HTML标签 | 如果要将相同的规则应用于多个标签,则可以用逗号隔开他们。 |
id选择器 | id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素! | 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。 | id 名称不能以数字开头。 |
类选择器 | 类选择器选择有特定 class 属性的 HTML 元素。 | 如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。 | 类名不能以数字开头! |
通用选择器 | 通用选择器(*)选择页面上的所有的 HTML 元素。 | 使用*就可以选择页面上的所有的 HTML 元素。 |
基本选择器的优先级:id选择器>类选择器>标签选择器>通用选择器
2.CSS组合器
依据元素所在位置的上下文关系来定义样式,可以是标记更加简洁。根据上下文关系不同,CSS组合器又包括子代选择器、后代选择器、分组选择器。合理地使用CSS组合器,可以使HTML代码变得更简洁。
下面就是这三种选择器的基本内容:
选择器 | 描述 | 使用方法 | 备注 |
---|---|---|---|
子代选择器 | 子选择器匹配属于指定元素子元素的所有元素。 | 使用大于号(>)分可隔父子元素,父元素在前,子元素在后。 | 只能匹配某一元素的直接子元素。 |
后代选择器 | 后代选择器匹配属于指定元素后代的所有元素。 | 它选中的元素包含直接子元素和非直接子元素,可以使用空格进行连接。 | |
分组选择器 | 在样式表中有很多具有相同样式的元素。为了尽量减少代码,可以使用分组选择器。 | 每个选择器用逗号分隔。 |
|
3.伪类选择器
同一个标签,不同的状态,有不同的样式,这就叫做"伪类"。伪类用于定义元素的特殊状态,伪类是使用冒号表示。
下面就列举一些常用的伪类:
选择器 | 描述 | 例子 |
---|---|---|
:link | 链接点击之前 | a:link |
:visited | 链接被访问过后 | a:visited |
:hover | ”悬停“ 鼠标放到标签上 | a:hover |
:active | "激活" 鼠标点击标签但是不松手 | a:active |
:focus | 某个标签获得焦点时候的样式 | input:focus |
4.伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个<p>元素之后插入内容 |
::before | p::before | 在每个<p>元素之前插入内容 |
::first-letter | p::first-letter | 选择每个<p>元素的首字母 |
::first-line | p::first-line | 选择每个<p>元素的首行 |
::selection | p::selection | 选择用户选择的元素部分 |
四.代码实现
接下来就是通过一个HTML代码来实现上述内容。在这个代码中使用的是CSS的外链样式。
1.CSS代码
/*CSS样式*/
/*通用选择器*/
*{
margin: 0;
padding: 0;
}
/*类选择器*/
.content{
width:1200px;
height: 600px;
margin: 0 auto;
padding: 5px;
background-color: #aabbcc;
}
/*id选择器*/
#paragraph{
text-indent: 2em;
}
/*标签选择器*/
a{
text-decoration: none;
}
/*子代选择器*/
div>ul{
list-style:none;
text-align: center;
}
/*后代选择器*/
.second p{
text-indent: 2em;
}
/*分组选择器*/
table,th,td{
margin: 0 auto;
width:1100px;
height: 80px;
border: 1px solid black;
border-collapse: collapse;
}
/*伪类选择器*/
a:hover{
color:red;
}
a:active{
color:green;
}
/*伪元素选择器*/
.end::after{
content:"再见!";
}
2.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS相关内容</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="content">
<h1>一.CSS概述</h1>
<p id="paragraph">层叠样式表(英文全称:<a href="#">Cascading</a> Style Sheets)是一种用来表现HTML(标准<a href="#">通用标记语言</a>的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的<a href="#">计算机语言</a>。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p id="paragraph">CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。</p><br>
<div class="second">
<h1>二.CSS引入方式</h1>
<p>CSS的引入方式有四种,分别是行内样式、外链样式、内嵌样式、导入样式。</p>
<p>我们可以通过下面的表格来进行简单的了解。</p><br>
<table class="table1">
<tr>
<th>选择器</th>
<th>描述</th>
<th>使用方法</th>
<th>备注</th>
</tr>
<tr>
<td>子代选择器</td>
<td>子选择器匹配属于指定元素子元素的所有元素。</td>
<td>使用大于号(>)分可隔父子元素,父元素在前,子元素在后。</td>
<td>只能匹配某一元素的直接子元素。</td>
</tr>
<tr>
<td>后代选择器</td>
<td>后代选择器匹配属于指定元素后代的所有元素。</td>
<td>它选中的元素包含直接子元素和非直接子元素,可以使用空格进行连接。</td>
<td> </td>
</tr>
<tr>
<td>分组选择器</td>
<td>在样式表中有很多具有相同样式的元素。为了尽量减少代码,可以使用分组选择器。</td>
<td>每个选择器用逗号分隔。</td>
<td> </td>
</tr>
</table><br>
<p class="end">演示结束</p>
</div>
</div>
</body>
</html>
3.运行截图
本次分享到此结束,再见!