CSS(层叠样式表)是网页设计中不可或缺的一部分,它使得HTML文档更加美观和功能丰富。本文将详细介绍CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容,并通过具体的代码示例进行解析,帮助读者更好地理解和掌握CSS的应用。
目录
CSS(Cascading Style Sheets,层叠样式表)是一种用于控制网页外观的标记性语言。它与HTML配合使用,可以精确地控制网页中的文本、图像、表格等元素的样式。CSS的主要作用是将内容与表现分离,使网页的维护和更新更加方便。
CSS的基本语法结构如下:
- css选择器 {
- 属性名: 属性值;
- 属性名: 属性值;
- }
CSS可以通过以下几种方式引入到HTML文档中:
行内样式直接在HTML标签中使用style属性来定义样式。例如:
html <p style="color: red; font-size: 16px;">这是一个段落。</p>
内部样式表在HTML文档的<head>部分使用<style>标签来定义样式。例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- p {
- color: lightblue;
- }
- </style>
- </head>
- <body>
- <p>这是一个段落。</p>
- </body>
- </html>
外部样式表通过<link>标签或@import规则引入外部CSS文件。例如:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body>
- <p>这是一个段落。</p>
- </body>
- </html>
或者使用@import规则:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- @import url("css/style.css");
- </style>
- </head>
- <body>
- <p>这是一个段落。</p>
- </body>
- </html>
CSS选择器用于选择要应用样式的HTML元素。常见的基本选择器包括:
全局选择器*选择所有元素。例如:
- * {
- color: seagreen;
- }
标签选择器通过标签名称选择元素。例如:
- p {
- color: lightblue;
- }
类选择器通过class属性选择元素。例如:
- .list {
- color: brown;
- }
ID选择器通过id属性选择元素。例如:
- #a {
- color: black;
- }
复合选择器由多个基本选择器组成,用于更精确地选择元素。常见的复合选择器包括:
群组选择器同时选中多个标签,用逗号隔开。例如:
- .list, #a, p {
- color: red;
- }
后代选择器选中选择符1的所有后代选择符2,用空格隔开。例如:
- ol li {
- color: blueviolet;
- }
CSS优先级决定了当多个样式规则应用于同一个元素时,哪个规则会被应用。优先级规则如下:
权重值是一个虚拟的概念,用于计算选择器的优先级。权重值的计算规则如下:
例如:
- * {
- color: seagreen;
- } /* 权重值:0 */
-
- p {
- color: lightblue;
- } /* 权重值:1 */
-
- .list {
- color: brown;
- } /* 权重值:10 */
-
- #a {
- color: black;
- } /* 权重值:100 */
-
- .list, #a, p {
- color: red;
- } /* 权重值:10 + 100 + 1 = 111 */
-
- ol li {
- color: blueviolet;
- } /* 权重值:1 + 1 = 2 */
CSS提供了多种颜色表示法,常用的有:
使用英文单词表示颜色。例如:
- div {
- background-color: red;
- }
使用十六进制表示颜色。例如:
- div {
- background-color: #f00;
- }
使用RGB三原色表示颜色。例如:
- div {
- background-color: rgb(255, 0, 0);
- }
使用HSB表示颜色。例如:
- div {
- background-color: hsb(0, 100%, 50%);
- }
CSS还支持设置颜色的透明度,使用rgba或hsla表示法。例如:
- div {
- background-color: rgba(122, 196, 159, 0.5);
- }
常见的图片格式包括:
JPG是一种有损压缩格式,适用于照片等复杂图像。例如:
-
- <img src="img/photo.jpg" alt="照片">
PNG是一种无损压缩格式,支持透明,适用于图标、logo等。例如:
-
- <img src="img/logo.png" alt="Logo">
GIF是一种动图格式,支持256种颜色,适用于简单的动画。例如:
-
- <img src="img/animation.gif" alt="动画">
伪类选择器用于选择具有特定状态的元素。常见的伪类选择器包括:
- a:link {
- color: red;
- }
-
- a:visited {
- color: yellow;
- }
-
- a:hover {
- color: green;
- }
-
- a:active {
- color: blue;
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- div {
- width: 300px;
- height: 200px;
- background-color: rgb(122, 196, 159, 0.5);
- }
- </style>
- </head>
- <body>
- <div>这是一个div元素。</div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body>
- <div class="a" id="a">文字</div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <img src="img/dabai.jpg" alt="提示文字" title="大白" width="300">
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- a:link {
- color: red;
- }
- a:visited {
- color: yellow;
- }
- a:hover {
- color: green;
- }
- a:active {
- color: blue;
- }
- </style>
- </head>
- <body>
- <a href="#">点击跳转</a>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- * {
- color: seagreen;
- }
- p {
- color: lightblue;
- }
- .list {
- color: brown;
- }
- #a {
- color: black;
- }
- .list, #a, p {
- color: red;
- }
- ol li {
- color: blueviolet;
- }
- </style>
- </head>
- <body>
- <ul>
- <li>你干嘛呀</li>
- <li>你干嘛呀</li>
- <li class="list">你干嘛呀</li>
- <li id="a">你干嘛呀</li>
- <li>你干嘛呀</li>
- <li>你干嘛呀</li>
- </ul>
- <ol>
- <li>哎呦</li>
- <li>哎呦</li>
- <li>哎呦</li>
- <li>哎呦</li>
- <li>哎呦</li>
- </ol>
- <p>段落文本</p>
- <p>段落文本2</p>
- </body>
- </html>
本文详细介绍了CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容,并通过具体的代码示例进行了解析。希望本文能帮助读者更好地理解和掌握CSS的应用,提高网页设计的技能。在未来的学习和实践中,建议多尝试不同的CSS技巧和效果,不断积累经验,提升自己的技术水平。