一、CSS的简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
注意：CSS不能单独使用，只能依托于HTML或XML应用等
1. 什么是CSS？
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2.样式能解决什么样的问题？
样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
二、CSS样式的分类
1.内联样式：将样式写在开始标签里的style属性；
实例演示：
<body> <div style="border: 10px dotted red; background-color: aqua; width: 500px;font-size: xx-large; height: 300px;"> 虽千万人吾往矣 </div> </body>
2.内部样式：将样式写在head的子元素style里，此时需要选择器（详细说明见下文选择器）来定位你要设置样式的那个元素。
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式分类-内部样式表</title> <style> #d1 { background-color: aqua; width: 400px; height: 200px; font-size: larger; margin: 0 auto; <!-- 设置边框弯曲度 --> border-radius: 20%; } #d2 { background-color: chartreuse; width: 400px; height: 200px; } </style> </head> <!-- 内部样式表： 将样式写在head的子元素style里， 此时需要使用选择器来定位你要设置样式的那个元素 语法： 选择器{ 属性： 值； ...... } --> <body> <div id="d1">我是 </div> <div id="d2">我是 </div> </body> </html>
3.外部样式：将样式写在外部以.css结尾的文件里，通过 link 标签引用到要使用的HTML文件；
实例演示：HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- rel指定文件类型，href指定文件位置 --> <link rel="stylesheet" href="./css/my.css"> </head> <!-- 将样式单独分装到另一个文件中，文件扩展名是css 然后使用link标签，将样式文件已入到HTML文件 --> <body> <div id="d1">wohahahaah</div> <div id="d2">wohahahaah</div> <div id="d3">wohahahaah</div> </body> </html>my.css文件
#d1 { width: 220px; height: 200px; background-color: aqua; } #d2 { width: 280px; height: 300px; background-color: blue; } #d3 { width: 340px; height: 400px; background-color: greenyellow; } /* 样式文件扩展名是css，该文件中可以设置无数种样式 */CSS文件与HTML代码文件一般置于同一祖辈的文件夹中，方便使用
二、选择器
1、基本选择器
1）.标签选择器：
标签选择器也叫元素选择器，主要有 body, div, h1, table等标签选择；
结构： 标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：
-
标签选择器选择的是一类标签，而不是单独的一个
-
标签选择器无论嵌套关系有多深，都能够找到对应的标签
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 标签选择器也叫元素选择 */ body { font-size: 20px; color: rgb(1, 4, 28); } div { /* border-inline-xxx: xxx 可以是width， heigth, style 设置左右边框 border-block-xxx: 设置左右边框大小，颜色，线条 */ border-inline-style: solid; border-inline-width: 2px; border-inline-color: red; background-color: azure; width: 200px; height: 200px; } </style> </head> <body> <p>段落1</p> <div>div1</div> <p>段落2</p> <div>div2</div> </body> </html>
2）.类选择器：
每个元素都有class属性，不用元素class值是可以相同的，表示同一类的元素
一个标签可以有多个class值，使用空格隔开；
格式：.classname{
属性名：值；
......
}
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 类选择器是一小圆点开头的样式选择器.小圆点后面是具体的class名称 */ .c1 { font-size: 20px; color: crimson; } .c2 { font-size: 30px; color: orange; } .c3 { font-style: italic; } .c4 { font-style: oblique; color: black; font-size: xx-large; } </style> </head> <body> <!-- 每个元素都有class属性，不同元素class值可以相同，表示是同一类的元素 class值可以有多个 ，使用空格隔开 --> <div class="c1">div1</div> <p class="c2 ">段落2</p> <h1 class="c1 c3">标题1</h1> <p class="c4">pppabnsibvioisb</p> </body> </html>
3）.id选择器：
id值是唯一的，具有不可重复性；
一个标签上只能有一个id属性值；
一个id选择器只能选中一个标签。
与class选择器的区别：
1.class选择器以 . 开头，id选择器以 # 开头；
2.class值可以重复，id值是唯一的。
3.实际开发中的情况 类选择器用的最多 id一般配合js来使用，除非情况特殊，一般不要给id设置样式 实际开发中会遇到冗余代码的抽取
格式：
#id{ 属性名：值； ...... }实例演示：
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器学习</title> <style> /* id 选择器必需使用#作为开始符号，紧跟着id值 id的值是唯一的，具有不可重复性， 与class的区别： 1.class选择器以. 开头，id选择器以#开头 2.class的值可以重复， */ #d1{ border: 10px dotted red; width: 200px; height: 400px; } </style> </head> <body> <div id="d1">div1</div> <div id="d2">div1</div> <div id="d3">div1</div> <div id="d4">div1</div> </body> </html>
4）.通配符选择器：
就是*选择器，表示所有标签都被选中，即在这里书写所有元素都会发生改变，但是他的优先级是最低的，会被后面的属性覆盖掉前面有的属性
注意：
-
开发中应用极少，只有在特殊的情况下才会使用
-
在小页面中可能会用于去除页面中默认的margin和paddin
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通配符选择器</title> <style> /* 就是*选择器,表示所有元素都被选中 */ #d1 { width: 300px; height: 200px; background-color: aqua; } .c1 { background-color: rgb(230, 243, 61); } *{ font-size: 50px; } </style> </head> <body> <div id="d1">div1</div> <p class="c1 ">段落2</p> <h1 class="c1">标题1</h1> <p class="c1">pppabnsibvioisb</p> </body> </html>
2、复合选择器
1）.交集选择器：
语法： 选择器1选择器2{css属性名：属性值}
作用：选中页面中同时满足多个选择器的标签，紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：
-
之间没有任何东西隔开，紧挨着的，
-
交集选择器中如果有标签选择器，标签选择器必须放在前面
2）.并集选择器：
语法： 选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意： 选择器与选择器之间用逗号隔开 可以是基础选择器或者复合选择器 每组选择器通常一行写一个，提高代码的可读性
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器</title> <style> /* 交集选择器： 多个选择器挨着写；(选择器1选择器2选择器3) 上述多个选择器中共同选中的标签设置样式 */ .c1#p1 { color: blue; font-size: 50px; background-color: aqua; } p.c2 { font-size: 50px; } /*并集选择器，使用逗号隔开 */ #s1, .c4, .c3 { color: red; } </style> </head> <body> <h1>交集选择器的测试</h1> <div class="c1">div1</div> <div calss="c1">div2</div> <p class="c1" id="p1">段落1</p> <p class="c2">段落2</p> <hr> <h1>并集选择器</h1> <span id="s1">用户名已存在</span><br> <span class="c3">密码不正确</span> <p class="c4">段落3</p> <div calss="c2">div3</div> </body> </html>
3、关系选择器(兄弟，父子选择器)
父亲选择器：父亲选儿子
语法：父>儿子{}
后代选择器：通过祖先选后代
语法：祖先 后代 {}
兄+弟选择器：兄长选择紧挨着的弟弟
语法 ：兄+弟{}
兄~弟选择器： 兄长选择符合条件的所有弟弟
实例演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>关系选择器(兄弟、父子选择器)</title> <style> /* 父子选择器演示 */ div>span { font-size: 50px; color: aqua; } /* 后代选择器演示 */ div span { color: orange; } /* 兄+弟选择器 */ p+div { background-color: aquamarine; } /* 兄~弟选择器 */ div~div { color: palegreen; } </style> </head> <body> <div> 我是div <p> 我是div中的p <br> <span>我是p中的span</span> </p> <div>我是div中的div1</div> <div>我是div中的div2</div> <span>我是div中的span1</span><br> <span>我是div中的span2</span> </div> <span>我是div之外的span1</span><br> <span>我是div之外的span2</span> </body> </html>
4、属性选择器
| 语法 | 用法 |
|---|---|
| [属性] | 选中含有指定属性的元素 |
| [属性=属性值] | 选中含有指定属性和指定属性值的元素 |
| [属性^=属性值] | 选中含有指定元素和指定属性值开头的元素 |
| [属性$=属性值] | 选中含有指定元素和指定属性值结尾的元素 |
| [属性*=属性值] | 选中指定元素和含有指定元素的属性 |
实例演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> <style> [title] { /* background-color: rgb(13, 250, 227); */ font-size: xx-large; } [title=A] { color: rgb(228, 0, 0); } [title^=a] { font-size: x-large; color: aqua; } [title$=c] { color: rgb(71, 16, 198); } [title*=b] { color: teal; } </style> </head> <body> <h1 title="a_d">《出塞》</h1> <p title="A">唐·王昌龄</p> <p title="abc">秦时明月汉时关，</p> <p title="abab">万里长征人未还。</p> <p title="a_c">但使龙城飞将在，</p> <p title="">不教胡马度阴山。</p> </body> </html>依据CSS属性规则，后面的属性会将之前设置的属性覆盖，因此有的之前的属性看不到。
5、伪类选择器（不存在的，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素等
- 伪类选择器一般都使用 : (英文输入法冒号)开头
1）.元素选择伪类选择器
常用的伪类选择器：
:first-child 第一个元素被选中；
:last-child 最后一个元素被选中；
:nth-child 第n个子元素被选中；
2n表示偶数位元素被选中，2n+1表示奇数位元素被选中。
注意！： 使用伪类选择器时，注意空格的问题，优先使用冒号前面带空格的 。
注意！：空格是不同层级的
:first-of-type 表示同类型的第一个元素
:last-of-typr 表示同类型的最后一个元素
:nth-of-type 表示同类型的第n个元素 偶数位用even/奇数数位用odd
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器-元素选择伪类选择器</title> <style> /* div :first-child { color: aqua; } */ /* div :last-child { color: rgb(20, 8, 177); } */ /* div :nth-child(even) { background-color: cadetblue; } */ /* div :nth-child(odd) { background-color:blueviolet; font-size: xx-large; } */ /* div :first-child { font-size: small; color: pink; } */ /* body div:first-child { background-color: blueviolet; } */ /* 选中同一类型的第一个，注意！是不同层级的第一个 */ /* div:first-of-type{ color: blue; } */ /* p:last-of-type { color: red; } */ /* 选中同一类型的奇数位元素 注意！是不同层级的*/ /* p:nth-of-type(odd){ color: aqua; } */ </style> </head> <body> <div>div1 <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <div>divdiv <p>段落</p> <p>段</p> </div> </div> <div>div2 <p>段落5</p> <p>段落6</p> </div> <div>diV3 <p>段落7</p> </div> </body> </html>每个示例都会有不同的结果，每个都是一下更好理解。
2）.否定伪类选择器
:not() 括号里传入其他选择器，但是不支持复合选择器的传入
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 如果带child的伪类选择器和其他的伪类选择器共同使用，冒号前面的空格不需要写 */ /* p:not(p:first-child):not(p:last-child){ color: red; } */ /* p:not(p:first-of-type):not(p:last-of-type){ color: aqua; } */ </style> </head> <!-- :not(其他选择器)：注意括号里不能传入复合选择器 --> <body> <div> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> </div> </body> </html>
3）.超链接伪类选择器
:link 超链接独有的选择器，表示未访问过的a标签；
:visited 超链接都有的选择器，表示访问过的a标签；
由于隐私的问题，所以visited这个伪类只能修改链接的颜色。
:hover 表示鼠标进入该元素时的状态，该选择器所有元素都可以使用；
:active 表示鼠标左键点击该元素的状态，该选择器所有元素都可以使用。
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接的伪类选择器</title> <style> /* 超链接访问前的颜色设置 */ a:link { color: orangered; } /* 访问后 */ a:visited { color: greenyellow; } /* */ a:hover { background-color: blue; } p:active { font-size: 40px; color: aqua; } </style> </head> <body> <div> <a href="https://www.baidu.com">网站1</a> <a href="https://www.jd.com">网站2</a> </div> </body> </html>
6、伪元素选择器
虚假的元素，实际上是没有的，但是css为了设置一些样式，默认提供的，一般都用在段落标记中。
p::first-letter 首字符 p::first-line 首行 P::slection 被鼠标选中的样式设置 p::before 第一个字符之前插入 p::after 最后一个字符之后插入 before和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素选择器的学习</title> </head> <style> p::first-letter { font-size: 50px; color: aqua; } /* p紧邻这的弟弟p设置首行 */ p+p::first-line { background-color: aquamarine; } p::selection { color: red; background-color: teal; } p::before { content: "“你好”"; color: red; } p::after { content: "$$$"; background-color: aqua; } </style> <body> <p>hello</p> <p>world,世界这么大还是遇见你</p> </body> </html>
7.选择器的优先级
就是选择器的优先级，当我们使用不同的选择器选中了相同的元素，对同一个属性设置了不同的样式，浏览器要使用哪一个呢？
取决于选择器的优先级，谁的优先级高(也就是权重大)，就使用谁
内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
8.样式的继承
CSS样式继承是指子元素会继承父元素的某些样式属性。
css针对于样式继承的设计，是为了减少开发过程中的代码量
父元素设计好的样式，子元素不需要重复设置比如：字体，大小，分格
继承不了的有背景，布局等
9.认识单位
像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样像素
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- 是一个相对单位
- em是相对于当前元素内的字体大小来计算的
- em会根据字体大小的改变而改变
- 1em = 1font-size
- 如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px
rem
- rem是相对于根元素的字体大小来计算
颜色单位
1. 颜色单位可以使用有英文单词的颜色，比如 black,red,yellow,.......
注意：能叫上名字的毕竟是少数，不能表示出来所有的颜色
2. rgb ：颜色的三原色，red, green, blue
在电脑上可以使用8位二进制来表示三原色，
red: 00000000~11111111
green: 00000000~11111111
blue: 00000000~11111111
二进制的数字不同，表示该颜色的比例不同。从左到右分别是红，绿，蓝。每个原色，也可以使用16进制表示
red #ff
green #ff
blue #ff小贴士：如果三原色的16进制的字符一致，可以简写 比如： #aabbff 可以简写成 #abf
3. rgba: 前三个表示的就是三原色，第四个a表示不透明度。
1表示不透明，0表示完全透明，5表示半透明
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
