标签：独立 port div 基础语法 cas dex col mil 重复
一、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）外联样式表--@import 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的浏览器来说就是无效的
标签：独立 port div 基础语法 cas dex col mil 重复
原文地址：https://www.cnblogs.com/schut/p/9279054.html
