1）文笔有限，如果发现博客有书写有误的地方恳请读者直言不讳，我一定会第一时间改正。
2）代码的具体实现可以参考代码中的注释，如果由于注释不清楚而不明白相应原理，可以与作者私聊。码字不易，有兴趣的小伙伴点个赞呗，大家相互学习。

传送门：

1 定义
2 CSS的语法规则
3 CSS 与 HTML的三种结合方式
4 CSS 选择器
5 常用样式

1 定义

CSS 的全称是 Cascading Style Sheets，即层叠样式表。它是用于增强网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

2 CSS的语法规则

其中，语法各部分的含义如下：

选择器： 浏览器根据选择器决定受 CSS 样式影响的 HTML 标签
属性： 需要改变的样式名，并且每个属性都有一个值。
声明： 属性和值被冒号分开，并由花括号包围，这样就组成了一个完的样式声明。

3 CSS 与 HTML的三种结合方式

利用一个实例来介绍三种结合方式的区别。

需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。

1）直接在 HTML 的标签的 style 属性上设置来修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。-->
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

2）在 head 标签中，使用 style 标签来定义各种自己需要的 CSS 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码."text/css" 是固定的-->
    <style type="text/css"> /* 需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。*/ div{ 
     border: 1px solid red; } span{ 
     border: 1px solid red; } </style>
</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

HTML的注释符号是：
CSS的注释符号是:/* 注释内容 */

３）把 CSS 样式写成一个单独的 CSS 文件，再通过 link 标签引入即可复用

首先定义一个单独的 CSS 文件，用于存放 CSS样式

div{
     border: 1px solid yellow;
 }
span{
    border: 1px solid red;
}

引用这个CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。-->
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="（前一步定义的文件名）"/>

</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

4 CSS 选择器

4.1 标签名选择器

标签名选择器，可以决定哪些标签被动的使用这个样式。标签名选择器的格式是：

标签名{
	属性：值;
}

/*如下：*/
div{
	border: 1px solid yellow;
	color: blue;
	font-size: 30px;
}

实例：在所有 div 标签上修改字体颜色为蓝色、字体大小 30 个像素、边框为 1 像素的黄色实线；并且修改所有 span 标签的字体颜色为黄色、字体大小 20 个像素、边框为 5 像素的蓝色虚线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css"> div{ 
     border: 1px solid yellow; color: blue; font-size: 30px; } span{ 
     border: 5px dashed blue; color: yellow; font-size: 20px; } </style>
</head>
<body>
	<!-- 需求：在所有 div 标签上修改字体颜色为蓝色、字体大小 30 个像素、边框为 1 像素的黄色实线； 并且修改所有 span 标签的字体颜色为黄色、字体大小 20 个像素、边框为 5 像素的蓝色虚线。 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

4.2 id 选择器

id 选择器，可以让我们通过id 属性选择性的去使用这个样式。id 选择器的格式是：

#id 属性值{
属性：值;
}

/*如下：*/
#id001{
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
}

实例：分别定义两个 div 标签，第一个div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色、字体大小30个像素、边框为1像素的黄色实线。第二个div 标签定义 id 为 id002 ，然后根据id 属性定义 css 样式修改的字体颜色为红色、字体大小20个像素、边框为5像素的蓝色点线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css"> #id001{ 
     color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ 
     color: red; font-size: 20px; border: 5px blue dotted ; } </style>
</head>
<body>		
	<!-- 需求：分别定义两个 div 标签，第一个div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字 体颜色为蓝色、字体大小30个像素、边框为1像素的黄色实线。第二个div 标签定义 id 为 id002 ，然后根据id 属 性定义 css 样式修改的字体颜色为红色、字体大小20个像素、边框为5像素的蓝色点线。 -->
	
	<div id="id002">div标签1</div>
	<div id="id001">div标签2</div>
</body>
</html>

4.3 class 选择器

class 类型选择器，可以通过 class 属性有效地、选择性地去使用这个样式。class 类型选择器的格式是：

.class 属性值{
	属性：值;
}

/*如下：*/
.class01{
	color: blue;
	font-size: 30px;
	border: 1px solid yellow;
}

实例：修改 class 属性值为 class01的 span 或 div 标签、字体颜色为蓝色、字体大小30个像素、边框为1像素黄色实线。修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class类型选择器</title>
	<style type="text/css"> .class01{ 
     color: blue; font-size: 30px; border: 1px solid yellow; } .class02{ 
     color: grey; font-size: 26px; border: 1px solid red; } </style>
</head>
<body>
	<!--修改 class 属性值为 class01的 span 或 div 标签、字体颜色为蓝色、字体大小30个像素、边 框为1像素黄色实线。修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。 边框为1像素红色实线。 -->
	<div class="class01">div标签</div>
	<div class="class02">div标签</div>
	<span class="class02">span标签</span>
	<span>span标签2</span>
</body>
</html>

5 常用样式

见代码注释：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-css常用样式.html</title>
    <style type="text/css"> div{ 
     /*字体颜色*/ color: red; border: 1px yellow solid; /*宽度*/ width: 300px; /*高度*/ height: 300px; /*背景颜色*/ background-color: green; font-size: 30px; /*DIV居中*/ margin-left: auto; margin-right: auto; /*文本居中*/ text-align: center; } table{ 
     /*表格样式*/ border: 1px red solid; border-collapse: collapse; } td{ 
     border: 1px red solid; } a{ 
     /*超链接去下划线*/ text-decoration: none; } ul{ 
     /*列表去除修饰*/ list-style: none; } </style>
</head>
<body>
    <ul>
        <li>11111111111</li>
        <li>11111111111</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">Sharm Home</a>
    <div>我是div标签</div>
</body>
</html>

今天的文章静态网页开发技术之CSS分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/33224.html

静态网页开发技术之CSS