[h2]一、CSS简介[/h2]作用：为了解决html目前结构和表现混合在一起的问题，引入css规范，专门用来规范一个html页面中各种标签的显示样式，由html负责网页的内容，由css负责的网页的样式
CSS；Cascading Style Sheet,层叠样式表，是一种用于控制网页样式并允许将样式和内容分离的一种标记性语言，对于网页的样式，推荐使用css
本质：为html页面的布局添加样式
层叠：使用不同的方式给同一个html标签设置不同的样式，最后将所有的样式叠加到一起，共同作用于该标签
传统html的缺点：
a.维护困难【为了修改某个特殊标记需要花费大量的时间】
b.标记不足【文字间距，段落缩进等在html中无法完成】
c.网页过胖【如果对标签没有统一的风格的定制，HTML页面体积过大】
d.定位困难【在同一个html页面中如果多处使用同一个标签，定位其中的某一个标签很困难】
css的优点：
a.完成了html标签和css样式的分离
b.html的缺点恰恰是css的优点
h2{color: blue;}p{/*font-size: 20px;*/text-decoration: underline;}标题一段落一标题er 段落er 标题san段落san标题si段落si 需求：描述一个人的特征
张三{
身高：180cm;
体重：80kg;
性格：开朗；
}
组成：姓名，属性，属性值
同样的，描述一个网页中的某个标签
标题{
字体：宋体；
字号：20像素；
颜色：红色；
装饰：下划线；
}
替换为英文：
h1{
font-family:宋体；
font-size:20px;
color:red;
text-decoration:underline;
}
css的思想：首先指定对什么对象进行设置，然后指定该对象的哪些方面需要设置，最后给出值，css由三部分组成：对象，属性和属性值
在css的三个组成部分中，对象最重要，它指定了对一个html文件中哪些标签进行设置，在css中被称为选择器
为什么被称为选择器：为了能够使得css和html元素对应起来，就必须定义一套对应的规则，实现css对html的选择
语法：
选择器{
属性1：属性值1；
。。。
}
说明：选择器是css的核心 作用：对当前html文件中所有的标签都起作用
语法：
*{
}
/*通配符选择器 */*{color: red;}/*注意：通配符选择器实际使用，很少用，一般用来设置整个页面的内外边距*/段落标题 作用：对一个html页面中某一类标签设置，细化了通配符选择器的功能
语法：
标签名称{
}
缺点：对同一个html文件中所有的同类标签设置为统一的样式，在实际开发中是不存在的
/*元素选择器 * 根据标签的名称在html中进行匹配同类的标签 */p{color: purple;}h1{color: gray;}/*通配符选择器 * */*{color: red;}/*结论：元素选择器的优先级高于通配符选择器*/段落标题段落标题段落标题 和属性id有关
作用：可以唯一的匹配出当前html文件中的标签
语法：#id属性的值{}/*通配符选择器 * */*{color: red;}/*元素选择器 */p{color: purple;}h1{color: gray;}/*id选择器*/#p1{color: orange;}#text{text-decoration: underline;}/* * 1.所谓优先级，指的是不同的选择器设置了相同属性的时候，【id选择器>元素选择器>通配符选择题】 * 2.如果不同的选择器中设置的是不同的属性，则体现出的层叠【多个样式共同作用域同一个标签】 */标题段落段落标题 属性class有关
作用：在元素选择器的基础上，可以缩小匹配的范围
语法：
.class属性的值{
}
/*通配符选择器 * */*{color: red;}/*元素选择器 */p{color: purple;}h1{color: gray;}/*类选择器*/.pink{color: pink;}.big{font-size: 30px;}/*id选择器*/#text{color: blue;}/* * 1.设置了相同属性的时候，id选择器的优先级高于类选择器 * 2.同一个类选择器，可以同时作用于多个不同的标签 * 3.多个类选择器可以同时作用于同一个标签 */段落标题段落标题段落标题 作用：根据标签的属性或者属性值匹配
语法：
基本选择器[属性名]{}
基本选择器[属性名=“值”]{}
p{color: red;}/*属性选择器*/p[id='p1']{color: yellow;}/*p[id]{color: blue;}*//* * 注意：对于同一类选择器而言，并没有优先级一说，谁后出现，则会覆盖掉先出现的 */.text1[id]{color: cyan;}/* * 说明：属性选择器就是基本选择器和属性之间的结合 */段落一段落一段落一段落一 作用：匹配子标签或者后辈标签
语法：
匹配子标签或者后辈标签：
先辈标签选择器 子标签或者后辈标签选择器{
}
匹配子标签：
先辈标签选择器 > 子标签选择器{
}
/*li{background-color: cyan;}*//*.first{background-color: cyan;}*//*子标签*//*#ul1 li{background-color: purple;}*/#ul1>li{background-color: purple;}div>p{color: orange;}/*后辈标签*//*div p{color: orange;}*//* * 先辈选择器还是子选择器，都可以右任意的基本选择器充当 */苹果香蕉菠萝西瓜苹果香蕉菠萝西瓜第一个p标签第二个p标签 作用：类似于属性选择器，在已经匹配到的一类标签中进行二次筛选
语法：
选择器：具体的指令{
}
/*hover:悬浮，当鼠标悬浮的时候需要设置的样式*/p:hover{color: blue;font-size: 30px;}/*#first:hover{color: blue;font-size: 30px;}*//*添加头部或者尾部：了解*/#first:before{content: "这是头部";}#first:after{content: "这是尾部";}#first:first-letter{font-size: 20px;}/*设置一个p标签中在浏览器中显示的第一行*/p:first-line{text-decoration: underline;}/* * 注意：选择器可以是任意的选择器 */世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事世上无难事只怕有心人 说明：结构选择器和伪类选择器类似，但是具体的指令不相同
语法：
选择器：具体的指令{
}
/*匹配第一个或者最后一个*/ul li:first-child{color: red;}ul li:last-child{color: blue;}/*,顺序查找：匹配指定的子标签 ********* * 注意：第几个子标签，从1开始 * * nth-child() * num * odd:奇数 * even：偶数 */ul li:nth-child(odd){color: orange;}/*倒序查找*/ul li:nth-last-child(2){color: cyan;}/*设置空标签的样式*/ul li:empty{background-color: purple;}/*否定，除了指定的标签之外，其他所有符合条件的标签都会被设置*/ul li:not(#text){color: green;}苹果香蕉菠萝西瓜菠萝西瓜 作用：多种不同的选择器匹配到的html标签共享同一种样式
语法：
选择器1，选择器2，。。。。{}
/*div,p,span{font-size:20px;color: red;}*//*.box,#p1,span{font-size:20px;color: red;}*/.box,p[id='p1'],span{font-size:20px;color: red;}hello6578265jnvgsjdfhjahgjkla 只要在html标签中设置style
人生若只如初见何事秋风画悲扇 在当前html文件中，在head标签的子标签style中，书写css选择器
作用：可以对多个标签设置样式，缺点：只对当前html文件有效
/*内嵌样式*/.p1{color: #FF0000;font-size: 20px;}#p2{color: #FF0034;font-size: 30px;}人生若只如初见何事秋风画悲扇hello link：引入外部的css文件
语法：
MIME类型:表示标记文档的类型，格式为：大类型/小类型
text/css；css文件
text/javascript:js文件
image/jpg:jpg的图片
image/*；各种类型的图片
/*当链接了外部的css文件之后，在当前html文件中还可以使用内嵌样式*/人生若只如初见何事秋风画悲扇hello 导入样式和链接样式的效果是相同的，只是运作方式不同
语法：
@import url(“css的相对路径”)
@import url(“css的相对路径”)
。。。。
@import url("css/style1.css");人生若只如初见何事秋风画悲扇hello /*导入样式*/@import url("css/red.css");hello |
|
转播
