CSS--------引用方式和选择器

最新推荐文章于 2023-11-07 00:11:31 发布

春.生

最新推荐文章于 2023-11-07 00:11:31 发布

阅读量190

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/funny54/article/details/117461697

版权

一.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>&nbsp;</td>
				</tr>
				<tr>
					<td>分组选择器</td>
					<td>在样式表中有很多具有相同样式的元素。为了尽量减少代码，可以使用分组选择器。</td>
					<td>每个选择器用逗号分隔。</td>
					<td>&nbsp;</td>
				</tr>
			</table><br>
			<p class="end">演示结束</p>
		</div>
	</div>
</body>
</html>

3.运行截图

本次分享到此结束，再见！

春.生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--------引用方式和选择器

一.CSSCSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。层叠样式表(英文全称：CascadingStyle Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。...
复制链接

扫一扫