CSS(层叠样式表,Cascading Style Sheets)是一种用于描述网页内容在页面上的展示样式的语言,它与HTML(超文本标记语言)一同用于构建和设计网页。CSS可以控制页面元素的外观、布局和样式,如文字颜色、字体、大小、背景、边框、间距等。
CSS的工作方式是通过将样式规则应用于HTML元素来改变其外观。样式规则是由选择器和声明组成的。选择器选择要应用样式的元素,声明包含要应用的样式属性和值。
CSS具有以下特点:
-
分离性:CSS将网页的表现与内容分离,即将样式信息与HTML代码分开,使得网页的设计更加灵活和易于维护。
-
层叠性:当多个CSS样式规则同时应用到同一个元素时,CSS会根据规则的优先级和特定的层叠顺序来确定最终的样式表现。
-
继承性:某些CSS属性可以继承到子元素,即父元素的样式会自动应用到子元素上。
-
选择器:CSS提供了多种选择器,可以根据元素的类型、类名、ID等进行选择,从而精确地应用样式。
通过使用CSS,网页设计师可以轻松地改变网页的外观和布局,使网页更加美观、直观和易于导航。同时,CSS的模块化和可复用性也使得样式代码可以更好地组织和管理,提高了开发效率和维护性。
1.类选择器多类名的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 定义一个用于设置元素背景颜色为红色的类 */
.red-background {
background-color: red; /* 设置背景色为红色 */
}
/* 定义一个用于使文本加粗的类 */
.bold-text {
font-weight: bold; /* 设置字体粗细为粗体 */
}
/* 定义一个用于使元素内容居中的类 */
.centered {
text-align: center; /* 将文本内容水平居中对齐 */
}
</style>
</head>
<body>
<!-- 使用多类名的元素,同时应用了三个样式类 -->
<p class="red-background bold-text centered">这是一个具有红色背景、加粗文本且居中的段落。</p>
</body>
</html>
在这个例子中:
- 我们定义了三个CSS类:
.red-background
用于设置背景颜色为红色,.bold-text
用于设置文本加粗,.centered
用于将文本居中。- 在HTML的
<p>
标签中,我们使用了多个类名(red-background bold-text centered
),这意味着这个段落会同时应用这三个类的所有样式。
最终结果是 <p>
标签内的文本将以红色背景显示,并且字体加粗,同时整个段落内容居中对齐。
2.通配符选择器
/* 使用通配符选择器 "*",它会匹配页面上的所有元素,并设置它们的字体颜色和字体大小 */
* {
font-size: 16px; /* 设置所有元素的字体大小为16像素 */
color: #333; /* 设置所有元素的字体颜色为深灰色 */
}
请注意,在实际项目中,虽然通配符选择器可以全局统一样式,但因其影响范围广,可能会带来性能问题,因此推荐尽量针对具体元素或元素类别进行样式设置。
3.CSS字体属性之字体
在CSS中,设置字体系列(font-family)的属性用于定义元素内容所使用的字体。以下是一个具体的例子:
/* 选择器可以是任何HTML元素或自定义类名 */
p {
/* 设置字体系列:首先列出首选字体,如果浏览器不支持第一个字体,则尝试下一个,直到找到可用字体为止 */
font-family: "Arial", sans-serif;
/* 其他相关字体样式也可以在此处一同声明 */
font-size: 18px; /* 设置字体大小为18像素 */
font-weight: normal; /* 设置字体粗细为正常 */
line-height: 1.5; /* 设置行高为1.5倍字体大小 */
}
/* 如果希望所有页面文本都有一个通用字体系列,可以使用通配符选择器,但请谨慎,因为这会影响所有元素的默认字体 */
body * {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
h2 {
font-family: '微软雅黑';
}
p {
font-family: 'Times New Roman', Times, serif;
}
4.CSS字体属性之字体大小
在CSS中,设置字体大小(font-size)的属性用于控制元素中文本的显示尺寸。以下是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置字体大小为16像素 */
font-size: 16px;
}
h1 {
/* 设置一级标题的字体大小为32像素 */
font-size: 32px;
}
#special-text {
/* 对于ID为'special-text'的元素,设置字体大小为2em,这里的2em是相对单位,基于父元素的基础字体大小计算 */
font-size: 2em;
}
article.small-text {
/* 对于class为'small-text'的文章元素,设置字体大小为0.875rem,这里的rem是相对于根元素(html)的基础字体大小计算 */
font-size: 0.875rem;
}
在这个例子中:
- `p` 元素的字体大小被设定为固定的16像素。
- `h1` 元素作为一级标题,其字体大小更大,设为32像素。
- ID为 `'special-text'` 的元素,其字体大小是父元素基础字体大小的两倍。
- 类名为 `'small-text'` 的所有 `article` 元素,其字体大小被设定为相对于根元素字体大小的0.875倍。
5.CSS字体属性之字体粗细
在CSS中,设置字体粗细(font-weight)的属性用于控制文本的线条粗细。以下是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
h1 {
/* 设置一级标题的字体为加粗 */
font-weight: bold; /* 或者使用数值表示法:font-weight: 700; */
}
p.important {
/* 对于类名为'important'的段落元素,设置字体比常规更粗 */
font-weight: bold; /* 或者 font-weight: bolder; 表示相对于父元素的字体粗细进行加粗 */
/* 使用数字值精确指定粗细程度 */
font-weight: 600;
}
em.emphasize {
/* 对于强调文本(<em>标签),使其字体比常规更细 */
font-weight: lighter;
}
在这个例子中:
- `h1` 元素被设定为粗体字,这可以通过关键字 `bold` 或数字值 `700` 来实现。
- 类名为 `'important'` 的所有段落(`p`)元素将具有较粗的字体,这里使用了关键字 `bold` 或 `bolder`,后者会根据其父元素的字体粗细进行相对调整。
- 类名为 `'emphasize'` 的 `<em>` 标签内的文本将会变得比其正常字体更细,通过使用关键字 `lighter` 实现这一效果。
6.CSS字体属性之文字样式(风格)
在CSS中,设置字体样式(文字风格)通常使用 `font-style` 属性。以下是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p.normal-text {
/* 设置正常字体样式 */
font-style: normal;
}
em.italicized-text {
/* 设置斜体字体样式 */
font-style: italic;
}
i.oblique-text {
/* 设置倾斜字体样式 */
font-style: oblique;
}
在这个例子中:
- 类名为 `'normal-text'` 的所有段落(`p`)元素将保持标准的字体样式。
- 类名为 `'italicized-text'` 的 `<em>` 元素(或者其他应用了该类名的元素)中的文本将以斜体显示,如果浏览器支持的话,它会尝试使用指定字体的斜体版本;如果没有可用的斜体版本,则可能以某种方式模拟斜体效果。
- 类名为 `'oblique-text'` 的 `<i>` 元素或其他应用此类名的元素中的文本将以倾斜样式显示,与斜体类似,但这里的倾斜是浏览器根据普通字体样式进行的一种人为倾斜处理,而非使用字体本身的斜体变体。注意:在实际应用中,虽然 `<i>` 和 `<em>` 标签在默认情况下通常表现为斜体,但它们在语义上有所不同,其中 `<em>` 表示强调,而 `<i>` 用于表示一种不同语境下的文本样式,例如技术术语、外文短语等。通过CSS我们可以分别控制这些元素的字体样式。
7.CSS字体属性之复合属性
在CSS中,可以使用 `font` 复合属性一次性设置多个字体相关的样式。下面是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p.custom-font {
/* 使用复合属性 font 设置多个字体相关样式 */
font: italic bold 18px/32px "Arial", sans-serif;
}
/* 上述复合属性分解说明:
- font-style: italic; 定义字体为斜体
- font-weight: bold; 定义字体为粗体
- font-size: 18px; 定义字体大小为18像素
- line-height: 32px; 定义行高为32像素(在font复合属性中,使用'/'符号表示)
- font-family: "Arial", sans-serif; 定义字体系列,优先使用Arial,若无,则使用无衬线字体系列
*/
/* 等效于以下单独声明各个属性的方式: */
p.custom-font {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 32px;
font-family: "Arial", sans-serif;
}
通过 `font` 复合属性,我们可以将多种字体样式属性合并成一行,从而简化CSS代码,并且更高效地表达一个元素的综合字体样式。
8.CSS文本外观属性之颜色
在CSS中,设置文本颜色的属性是 `color`。下面是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本颜色为红色 */
color: red;
}
h1.title {
/* 设置所有 class 为 'title' 的一级标题文本颜色为蓝色 */
color: blue;
}
a.custom-link {
/* 设置所有 class 为 'custom-link' 的链接文本颜色为绿色,并且在鼠标悬停时变为橙色 */
color: green;
}
/* 使用RGB表示颜色 */
p.rgb-color {
color: rgb(255, 0, 0); /* 这同样是红色 */
}
/* 使用十六进制表示颜色 */
p.hex-color {
color: #FF0000; /* 同样也是红色 */
}
/* 使用HSL表示颜色 */
p.hsl-color {
color: hsl(0, 100%, 50%); /* 这还是红色 */
}
9.CSS文本外观之文字对齐
在CSS中,设置文本对齐的属性是 `text-align`。下面是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本左对齐 */
text-align: left;
}
.centered-text {
/* 设置所有类名为 'centered-text' 的元素文本居中对齐 */
text-align: center;
}
.right-aligned {
/* 设置所有类名为 'right-aligned' 的元素文本右对齐 */
text-align: right;
}
.justified-text {
/* 设置所有类名为 'justified-text' 的元素文本两端对齐 */
text-align: justify;
}
/* 特殊情况下的文本对齐,比如对于内联元素 */
span.inline-element {
display: inline-block; /* 需要先转换为块级或行内块级元素才能应用text-align */
width: 100px; /* 为了演示效果,设置了宽度 */
text-align: center; /* 内联元素内容(如文字)居中对齐 */
}
在这个例子中,我们分别展示了如何将文本设置为左对齐、居中对齐、右对齐以及两端对齐。同时,也提到了一个特殊情况,即内联元素需要先转换为可设置宽度和对齐方式的显示类型(例如:inline-block),然后才能对其内部内容进行对齐设置。
10.CSS文本外观之装饰文本
/* 选择器可以是任何HTML元素、类名或ID */
a {
/* 设置链接文本带有下划线 */
text-decoration: underline;
}
h2.strike-through {
/* 设置所有class为 'strike-through' 的二级标题具有删除线效果 */
text-decoration: line-through;
}
em.underline-overline {
/* 设置所有使用 <em> 标签且类名为 'underline-overline' 的强调文本既有下划线又有上划线 */
text-decoration-line: underline overline;
/* 可以进一步自定义装饰线的颜色(假设支持的浏览器) */
text-decoration-color: hotpink;
/* 装饰线样式,如波浪线等(假设支持的浏览器) */
text-decoration-style: wavy;
}
/* 对于链接,也可以控制hover状态下的装饰效果 */
a:hover {
/* 当鼠标悬停在链接上时,移除下划线 */
text-decoration: none;
}
11.CSS文本外观之文本缩进
在CSS中,设置文本缩进通常使用 `text-indent` 属性。下面是一个具体的例子:
/* 选择器可以是任何HTML元素、类名或ID */
p.indent {
/* 设置段落首行缩进2个字符(等效于约10px,具体取决于字体大小和字符宽度) */
text-indent: 2em;
}
blockquote.quote {
/* 设置所有 blockquote 元素的首行缩进50像素 */
text-indent: 50px;
}
/* 若需要实现每行缩进而非仅首行缩进,则需配合其他CSS属性如 padding 或 margin 实现 */
p.full-indent {
/* 使用内边距实现每行缩进 */
padding-left: 1em;
}
在这个例子中:
- 类名为 `'indent'` 的所有段落(`<p>`)元素的首行将被缩进2个字符单位。
- 所有 `<blockquote class="quote">` 引用块的首行将被缩进50像素。
- 类名为 `'full-indent'` 的段落通过 `padding-left` 属性实现了每行内容都从左侧开始有1个字符单位的内边距缩进效果。
请注意,`text-indent` 只影响元素的第一行文本,而 `padding-left` 或 `margin-left` 则会影响整个元素的内容区域。
12.CSS文本外观之行间距
在CSS中,设置行间距(行高)的属性是 `line-height`。下面是一个具体的例子:```css
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本的行间距为1.5倍行字体大小 */
line-height: 1.5;
}
h1.title {
/* 设置一级标题的行间距为28像素 */
line-height: 28px;
}
/* 使用数值形式表示相对单位,自动根据当前字体大小计算行间距 */
p.relaxed-spacing {
/* 行间距设置为当前字体大小的1.7倍 */
line-height: 1.7;
}
/* 使用百分比值,基于当前字体大小计算行间距 */
p.tight-spacing {
/* 行间距设置为当前字体大小的120% */
line-height: 120%;
}
在这个例子中:
- 所有的段落(`<p>`)元素的行间距被设置为其字体大小的1.5倍。
- 类名为 `'title'` 的所有一级标题(`<h1>`)元素的行间距被固定为28像素。
- 类名为 `'relaxed-spacing'` 的段落元素使用了相对单位,其行间距将是字体大小的1.7倍。
- 类名为 `'tight-spacing'` 的段落元素设置了行间距为其字体大小的120%。
通过调整 `line-height` 属性的值,我们可以控制文本内容的垂直间距,实现美观和易读性上的优化。
13.内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表</title>
<style>
div {
color: pink;
}
</style>
</head>
<body>
<div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>
</html>
14.行内样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内样式表</title>
</head>
<body>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底压心底不能告诉你</p>
<p> 晚风吹过温暖我心底我又想起你</p>
<p> 多甜蜜多甜蜜怎能忘记</p>
<p>不能忘记你把你写在日记里</p>
<p>不能忘记你心里想的还是你</p>
<p>浪漫的夏季还有浪漫的一个你</p>
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>
15.外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>
16.用HTML和css写一个简单的案例
当然,下面是一个简单的HTML和CSS案例,它创建了一个具有红色背景、居中显示的标题以及一个段落文本。
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单示例</title>
<link rel="stylesheet" href="styles.css"> <!-- 假设CSS文件名为styles.css -->
</head>
<body>
<div class="container">
<h1 class="centered-title">欢迎来到我的网站!</h1>
<p class="welcome-text">这是一个使用HTML和CSS编写的简单页面示例。</p>
</div>
</body>
</html>
CSS部分(styles.css):
/* 设置整个页面背景为红色 */
body {
background-color: red;
}
/* 创建一个居中的容器,并设置一些内边距 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 让容器高度等于视口高度 */
padding: 20px;
}
/* 设置居中显示的标题样式 */
.centered-title {
color: white;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
/* 设置段落文本样式 */
.welcome-text {
color: darkgray;
font-size: 18px;
line-height: 1.5;
}
在这个例子中,我们首先在HTML文档中定义了基本结构,包括一个标题和一个段落。然后,在CSS文件中,我们设置了背景颜色、居中对齐、字体大小和行间距等样式属性。
后续内容:请点击