CSS入门基础

最新推荐文章于 2025-07-30 15:47:02 发布

梦在脚下学海无涯

最新推荐文章于 2025-07-30 15:47:02 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/pythonsnail/article/details/107294919

CSS 专栏收录该内容

0 篇文章

订阅专栏

CSS的语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述

id和class选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":

id选择器作为唯一标识，用于一种特殊的格式（ID选择器只能被一个元素引
用）

注意：虽然id可以给多个标签定义个样式，浏览器也允许这种错误但是，在写的时候不能这样写。首先… 多个 ID 定义，同一页面当中会bai令到 DOM 的判别出错
另外绝对du不符合国际 W3C 组织的网页标准

错误案例

在这里插入图片描述
错误代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS入门</title>
	<style>
	#WordRed{
		color:red;
	}

	</style>
</head>
<body>
<p id="WordRed">HELLO WORLD</p>
<p id="WordRed">你好！</p>
<h1 id="WordRed">我很好</h1>

</body>
</html>

错误原因

id作为唯一标识不能被多个标签引用

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，
class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个
点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

允许元素引用class

语法：
元素.(名字){
定义样式
}

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配
html中所有标签元素，

如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色字体20px：

* {color:red;font-size:20px;}

CSS的创建

插入样式的三种方法:

多重样式优先级别

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

外部样式表(External style sheet)

在head标签定义

<head>
<link rel="stylesheet" type="text/css" href="red.css">
</head>

建立一个.css结尾的文件（我建立的是red.css)

在里面写上CSS样式：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<link rel="stylesheet" href="red.css">
</head>

<body>
<h1 >这个标题不受影响</h1>
<p >这个段落居中对齐。</p> 
</body>
</html>

内部样式表(Internal style sheet)

利用style标签在head 标签内定义

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)

利用style属性在标签内定义

<p style="color:sienna;margin-left:20px">这是一个段落。</p>