CSS__JavaWeb

最新推荐文章于 2024-07-18 14:29:38 发布

xh_Dopamine

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量113

点赞数 2

分类专栏： JavaWeb 文章标签： css html 前端

本文链接：https://blog.csdn.net/SDAU_LGX/article/details/116455158

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、什么是CSS
二、定义与使用

一、什么是CSS

CSS是层叠样式表的缩写。是一种用来美化网页的技术，通过CSS可以方便、灵活地设置网页中不同元素的外观，使网页更加美观。

二、定义与使用

2.1 定义

CSS由3个基本部分对象、属性和属性值组成，其中对象是最重要的，因此，它有一个专门的名称——选择器。属性是希望要设置的属性，每个属性都有一个对应的值。

基本语法：

selector{属性:属性值;属性:属性值;·····}

选择器共有三种类型，分别为标记选择器、类别选择器和ID选择器。
下面来分别介绍这三种选择器。

1.标记选择器
标记选择器通过HTML标签来定义样式表。
基本语法：

标签名1，标签名2···{属性:属性值;属性:属性值;·····}

例如：

h1,h2{text-align:center;color:blue;}
<h1>CSS</h1>
<h2>层叠样式表</h2>

2.类别选择器
类别选择器使用class定义样式表。若要为同一标签创建不同的样式或者为不同的标签创建相同的样式，就可以使用类别选择器，类别选择器有两种定义格式。

格式1

标签名.类名{属性:属性值;属性:属性值;·····}

注意：只能用于类名前指定的标签。

例如：

p.center{text-align:center;}
p.right{text-align:right;}

<p class="right">段落向右对齐</p>
<p class="center">居中对齐</p>

格式2

.类名{属性:属性值;属性:属性值;·····}

注意：只要class属性为该类名的标签都使用该样式。

例如;

.text{font-family:宋体;color:red;}
<p class="text">段落</p>
<h1 class="text">标题</h1>

3.ID选择器
ID选择器利用id定义样式表。
基本格式

#id 名称{属性:属性值;属性:属性值;·····}

例如

#sample{font-family:宋体;font-size:60pt;}
<p id="sample">段落</p>

2.2 使用

在HTML中CSS有四种使用方法：行内式、内嵌式、链接式和导入式。

1.行内式
行内式不需要定义选择器，利用style属性直接为元素设置样式，只对当前的标签作用。
例如，

<p style="color:blue;font-size:20px;">段落</p>

2.内嵌式
需要先定义选择器，利用<style></style>标签对将选择器定义在<head></head>之间，作用范围为此HTML文档。

例如：

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
	color: red;
	text-decoration: underline;
	font-size: 25px;
}

.info {
	font-size: 12px;
	color: blue;
}
</style>
</head>
<body>
	<p>第一行文本</p>
	<br>
	<h1 class="info">第二行文本</h1>
</body>
</html>

3.链接式
将定义好的CSS单独放到一个以.css为后缀的文件中，再使用<head</head>之间的<link>标签链接到所需要使用的网页中。
格式：

<link href="*.css文件路径" type="text/css" rel="stylesheet">

例如，

CSS文件

p {
	color: red;
	text-decoration: underline;
	font-size: 25px;
}

.info {
	font-size: 12px;
	color: blue;
}

HTML文件

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="test.css" type="text/css" rel="stylesheet">
</head>
<body>
	<p>第一行文本</p>
	<br>
	<h1 class="info">第二行文本</h1>
</body>
</html>

4.导入式
导入式和链接式非常相似，不过是通过import导入到文件中。
格式：

<style type="text/css">@import url(*.css文件路径);</style>

2.3 优先级

优先级顺序

嵌入式
内联式
外联式
浏览器默认

xh_Dopamine

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
10
评论
CSS__JavaWeb

文章目录一、什么是CSS一、什么是CSSCSS是层叠样式表的缩写。是一种用来美化网页的技术
复制链接

扫一扫

专栏目录