前端那些事NO.2

tech

Publish Date: 2025-02-06

Update Date: 2025-02-06

Word Count: 860

Read Times: 4 Min

Read Count:

目标

掌握CSS的语法结构和在网页上的应用
掌握CSS的文本和字体样式
掌握CSS背景样式

概念

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

基本语法

实例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>will</title>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>

<p>这个段落的左外边距为 50 像素：50px</p> 

</body>
</html>

实例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Will</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:150px;}//元素与相邻元素的距离
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>这是标题</h1>
<hr>

<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>

<p><a href="https://www.bilibili.com/" 
target="_blank">这是一个链接</a></p>

</body>
</html>

类选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=”para1”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Will</title> 
<style>
#para1
{
	text-align:center;//居中
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

class选择器

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

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

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