层叠样式表(CSS)

最新推荐文章于 2023-08-23 20:34:01 发布

Chase℡

最新推荐文章于 2023-08-23 20:34:01 发布

阅读量948

点赞数

分类专栏： HTML 前端开发

本文链接：https://blog.csdn.net/qq_29786111/article/details/118675250

版权

前端开发同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

我们在制作网页页面时，为了达到美观、实用常常要用到层叠样式表（Cascading Style Sheet,CSS）。

今天我们来讲一下怎样运用CSS来修饰页面

一个CSS中包含多条样式规则，每条规则都是有选择符(selector)和声明(declaration)组成的。
基本语法： 选择符{属性1：值；属性2：值；...}需注意，声明语句要放在选择符后面的大括号内，语句较多时要用分号将他们分隔开。

CSS选择符

CSS选择符共有三种基本类型，分别为类选择符、标签选择符、id选择符，基于实用性又在这三类的基础上衍生出通用选择符、分组选择符和包含选择符。
下面我们先来讲类选择符，它的应用范围是页面中所有带class属性，且为指定的名字标签的元素。
说明：

类选择符的名称必须以点号（.）开头；
类选择符的名称中只能包含字母、数字、连字符和下划线；
类选择符的名称必须以字母开头；
类选择符区分大小写。

标签选择符
标签选择符使用HTML中的标签命名，用于批量修饰页面中对应标签内的元素。
说明：每一个元素都包含在每对（个）标签内。

id选择符
id选择符以#开头
这里咱们顺便说一下id属性，在同一个页面中的元素的id属性值都必须是唯一的，这也就使id选择符在使用时更加精准。

分组选择符
在CSS中支持选择符分组，把同一类型的多个选择符放在一个组内共用一个声明，提高编程效率。
说明：n个选择符共用同一个声明，因此这n个选择符的作用范围内所有的元素格式都一样。
选择符与选择符之间用逗号（，）隔开。

包含选择符

样式表分类及引用

内嵌样式（最简单的样式定义方法）
内嵌样式是指在标签内部嵌入的样式
基本语法<标签名 style="属性1：属性值；属性2：属性值；...">
作为最简单的样式定义方法自然而然带来的就是只能作用于所在的标签内的元素，如果HTML文档中有多个要设置相同的样式标签，则每个标签内都要设置一次，利用效率很低。
内嵌样式的引用方法<p style="font-family:'宋体'；font-size:24px; color:#FFFFFF;">内嵌样式的引用方法</p>

内部样式
内部样式是指将CSS样式放在网页内部，样式规则用<style>标签括起来，放在网页的<head>...</head>之间，用来修饰本网页内部的元素。
基本语法

<style type="text/css">
选择符1{属性1：值；属性2：值：...}
选择符2{属性1：值；属性2：值：...}
...
选择符n{属性1：值；属性2：值：...}
</style>

语法说明：

内部样式必须用<style>标签括起来，且在<style>标签内部必须使用type="text/css"属性.
内部样式必须放在网页的<head>...</head>之内。
可以使用任意选择符
内部样式只能修饰本网页内部的元素

具体应用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS内部样式</title>
	<style type="text/css">
		.font1{font-family: "楷体";font-size: 24px;color: #000000;}
	</style>
</head>
<body>
<p class="font1">CSS内部样式的具体应用</p>
</body>
</html>

外部样式
外部样式是指将css规则单独放在一个后缀为.css的文件中，网站内的所有网页都可以引入该样式文件的样式，这样的引入方式可以大大提高开发效率，并且可以使同一网站内的各个页面使用同样的风格。
基本语法
外部样式的引入方法有两种
一、import引用

<style type="text/css">
 @import url（"外部样式表文件.URL"）;
 </style>

二、link引用

<link type="text/css" rel=stylesheet href="外部样式表文件 URL">

说明：外部样式表需要引入到当前网页后才可以修饰该页面。
如果使用link方式引入外部样式文件，只需将<link>标签直接放在<head>...</head>内即可，无需使用<style>标签。
import语句前必须加上“@”，语句后的分号（；）也一定要加上。

这里我做一个简单的应用，大家对照以下案例分析理解

这是一个名为Untitled-1的css文件，下面咱们将这个css文件通过两种方式分别引入到同一个网页文件内


.font1{ background-color:#9C9;}
.font2{font-size:24px; font-family:楷体;}
.font3{font-size:36px; font-family:宋体;}

import方式引入

<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS外部样式的引入</title>
</head>
<style>
 @import url("Untitled-1.css");
</style>
<body class="font1">
<p class="font2">CSS外部样式的第一种引入方法：import引用。</p>
<p class="font3">CSS外部样式的第二种引入方法：link引用</p>
</body>
</html>

link方式引入

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS外部样式的引入</title>
<link type="text/css" rel="stylesheet" href="Untitled-1.css" />
</head>
<body class="font1">
<p class="font2">CSS外部样式的第一种引入方法：import引用。</p>
<p class="font3">CSS外部样式的第二种引入方法：link引用</p>
</body>
</html>

效果图
在这里插入图片描述

伪类

伪类是用来描述元素的不同状态，在Web前端开发中经常使用link、visited、hover和active四个伪类描述超级链接的四种状态，这四个伪类只能使用在超级链接上
a:link{color:颜色;}:链接未访问之前的颜色。
a:visited{color:颜色;}:链接访问过后的颜色。
a:hover{color:颜色;}:鼠标指针经过链接上方的颜色。
a;active{color:颜色;}:鼠标正在单击时链接的颜色。

具体的使用方法

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类的使用</title>
<style>
a:link{color:#000}
a:visited{color:#CCC}
a:hover{color:#0FF}
a:active{color:#0F0}
</style>
</head>
<body>
<a href="">链接未访问前的颜色</a></br>
<a href="">链接访问过后的颜色</a></br>
<a href="">鼠标经过链接上方的颜色</a></br>
<a href="">鼠标正在单机时的颜色</a>
</body>
</html>

Chase℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
层叠样式表(CSS)

我们在制作网页页面时，为了达到美观、实用常常要用到层叠样式表（Cascading Style Sheet,CSS）。今天我们来讲一下怎样运用CSS来修饰页面一个CSS中包含多条样式规则，每条规则都是有选择符(selector)和声明(declaration)组成的。基本语法：选择符{属性1：值；属性2：值；...}需注意，声明语句要放在选择符后面的大括号内，语句较多时要用分号将他们分隔开。CSS选择符CSS选择符共有三种基本类型，分别为类选择符、标签选择符、id选择符，基于实用性又在这三类的基础
复制链接

扫一扫