一、CSS介绍和语法
二、CSS引入方式
三、基本选择器
四、高级选择器
五、伪类选择器
六、伪元素选择器
1?? CSS介绍和语法
1、 CSS的介绍
（1）为什么需要CSS？
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。而此时CSS就出现了。 CSS的出现解决了以下问题： 首先，将HTML页面的内容与样式的分离；其次，提高了Web开发的效率。 （2）什么是CSS？ CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。 （3）CSS的优势 一是内容与表现分离；二事网页的表现统一，容易修改；三是丰富的样式，使页面布局更加灵活；四是减少网页的代码；五是运用独立页面的CSS，有利于网页被搜索引擎收录。 （4）如何使用CSS？ 通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。 2、CSS语法 （1）CSS基础语法 CSS语法分为两部分： 选择器和声明 声明由属性和值组成，多个声明之间用分号隔开。
语法：
选择器｛
声明1；
声明2；
声明3；
｝
例如：
h2{
color:green;
font-size:20px;
}
（2）代码注释
方法：/*代码注释写在这里*/
2?? CSS引入方式
网页中引入CSS样式有三种：
1、内联样式
2、行内样式表
3、外部样式表
①链入式
②导入式
（1）内嵌方式
style 标签
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式1</title><!--CSS引入的方式一-->
<style>
h2{
color:green; /*这是注释*/
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h2>这是二号标题</h2>
</div>
</body>
</html>
（2）行内样式
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式2</title>
</head>
<body>
<div>
<p style="font-size: 30px;color:red">这是一个段落标签</p>
</div>
</body>
</html>
（3）外联样式表--链接式
link 标签
例如：index.css为css样式表文件
index.css文件如下
p{
color:pink;
font-size:30px;
}
然后在HTML文件中通过link标签引入，语法：index.css"/>
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<p >这是一个段落标签</p>
</div>
</body>
</html>
（4）外联样式表[email protected] url()方式 导入式
同样导入index.css
语法如下：
<style>
@import url(index.css);
</style>
注意：@import url() 必须写在文件最开始的位置
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_1</title>
<style>
@import "index.css";
</style>
</head>
<body>
<div>
<p >这是一个段落标签</p>
</div>
</body>
</html>
链接式与导入式的区别：
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
原文地址：https://www.cnblogs.com/schut/p/9279054.html
时间： 2024-07-28 13:27:12