-
【Web】CSS学习笔记
目录
一、CSS简介
CSS英文全称【cascading style sheet】：层叠样式表。
作用：CSS用于美化网页、还可以进行网页布局。
前端三层是什么呀？
答案：前端分为三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）。语言 层级 作用 HTML 结构层 可以利用语义化标签搭建网页内容 CSS 样式层 可以利用一些样式技术，美化页面、或者进行网页布局。 JavaScript【简称JS】 行为层 可以让用户和网页进行人机交互 总结：CSS，前端人当中称之为样式层，可以对网页进行美化。比如：文字设置颜色、文字设置大小、设置文字字体。可以进行网页页面布局。
1. CSS书写规则
CSS【层叠样式表，简称样式】：根据在网页书写位置不同。分为三种：行内样式、内嵌样式、外链样式。
注意：我们刚开始学习的是行内样式写法。
<div style="color:red;">我是行内样式呀div> <p style="color:yellow;">我是一个段落呀p> <a style="color:gree;font-size:66px">我是一个超级链接a>- 1
- 2
- 3
- 任意标签【容器、文本】都可以添加行内样式。上面写法、书写位置称之为行内样式。
- 需要在双标签、单标签的开始标签位置进行书写
- 在开始标签名字后面，别忘记有空格，给这个标签添加一个style（英文含义：样式）属性
- 但是需要注意的是：这个style属性的属性值，写法很独特。
style属性的属性值写法:
- 样式属性名字:样式属性的属性值
- 别忘记在样式属性值后面加上一个分号，代表当前这一个样式设置完毕，进行下一个样式属性。
- 一个标签可以同时设置多个样式，多个样式之间用分号隔开。
二、常用样式
在制作网页的时候，我们经常和网页中文字打交道。比如设置文字颜色、文字大小、文字字体。
1. color
color这个样式，主要的作用是设置文字的颜色。
属性值：是有英文单词、十六进制数字组成。
1.1 下面这种写法：color属性值对应颜色英文单词。
<div style="color:red;">我是一个划分区域容器级别标签div> <div style="color:orange;">我是一个划分区域容器级别标签div> <div style="color:yellow;">我是一个划分区域容器级别标签div> <div style="color:green;">我是一个划分区域容器级别标签div> <div style="color:cyan;">我是一个划分区域容器级别标签div> <div style="color:blue;">我是一个划分区域容器级别标签div> <div style="color:purple;">我是一个划分区域容器级别标签div> <div style="color:skyblue">我是一个划分区域容器级别标签div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意：
- 一般情况下，一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
- 任意标签都可以设置行内样式。
<div style="color:red;color: black">我是一个划分区域容器级别标签div>- 1
注意：
- 一般情况下，一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
- 任意标签都可以设置行内样式
1.2 下面这种写法：color属性值对应十六进制数字。
<ul> <li> <h3 style="color:#a52a2a;">西游记h3> li> <li> <h3 style="color:#7FFF00;">三国演义h3> li> <li> <h3 style="color:#CD5C5C;">水浒传h3> li> <li> <h3 style="color:#7CFC00;">红楼梦h3> li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 如果color样式的属性值为十六进制数字，切记以#号开头，分号结束。
- 十六进制的英文字母不区分大小写
- 十六进制的数字不需要死记硬背，因为你记不住。参考手册即可。
1.3 下面这种写法：rgb(red,green,blue)有三色素组成，红色部分三色素，需要的是0~255之间的数字.
p#box1{ color:rgb(188,99,44); }- 1
- 2
- 3
注意：
标签文字的颜色数值，可以rgb三色素形式。三色素数值是0~255之间整数，三色素数值之间用逗号隔开。2. font-size
font-size:字体大小。这个样式的主要的作用是可以设置文字的大小。
属性值：属性值是由数字加上px单位。pixel：px全称，像素含义。
属性值：有三种写法。
- 像素单位：比如50px，代表文字大小为50像素。
<div style="font-size: 1px;">我的大小为1pxdiv> <div style="font-size: 12px;">我的大小为12pxdiv> <p style="font-size:16px;">我的大小为16px，是浏览器默认大小p> <div style="font-size: 20px;">我的大小为20pxdiv> <div style="font-size: 25px;">我的大小为25pxdiv> <div style="font-size: 30px;">我的大小为30pxdiv>- 1
- 2
- 3
- 4
- 5
- 6
- 百分比写法：就是后代元素的字体大小，是祖先元素字体大小的百分比。
em单位：就是后代元素的字体大小，是祖先元素的字体大小的多少倍。
#box1{ font-size: 500%;//80px }- 1
- 2
- 3
- 代表的是这个匹配标签字体大小为就近的祖先元素font-size的500%。
- 由于咱们这个案例，p标签就近的祖先元素为body（默认字体大小为16px）。
#box2{ font-size: 5em;//80px }- 1
- 2
- 3
- 代表的是这个匹配的标签字体大小为就近的祖先元素font-size的5倍。
- 由于咱们这个案例，p标签就近的祖先元素body(默认字体为16px)。
一、谷歌浏览器
谷歌浏览器，一般标签默认文字的大小是16px，谷歌浏览器最小的12px，如果比12px还小，显示12px。
谷歌浏览器字体大小最大都是上不封顶的。
三、IE浏览器
IE浏览器，一般标签默认文字的大小16px，IE浏览器最小的1px，如果比1px还小，显示1px
IE浏览器字体大小最大也是上不封顶的。
<h1>我是一级标题h1> <h1>我是二级标题h1>- 1
- 2
注意：比如h系列标签，默认字体大小的。还有一些浏览器自带默认样式。
3. font-family
font-family:中文含义，即为字体系列。这个样式主要的作用是设置文字的字体。
文字：分为中文、英文。中文有属于字体字体、英文也有属于自己字体。
<p>默认字体p> <p style="font-family:'微软雅黑'">微软雅黑p> <p style="font-family:'方正粗黑宋简体'">方正粗黑宋简体p> <p style="font-family:'楷体'">楷体p>- 1
- 2
- 3
- 4
- font-famliy属性值外层需要加上一对单引号。
- font-family:可以同时设置多个字体，多个字体之间用逗号隔开，从左到右，后面字体设置覆盖前面字体设置。
<hr/> <p style="font-family:'Arial'">my name is jchp> <p style="font-family:'Webdings','Arial'">my name is jchp> <p style="font-family:'Webdings','Arial'">my name is jchp> <hr/> <div style="font-family:'Webdings','Arial','楷体','简方正粗黑宋体'">my name is 花骨朵div>- 1
- 2
- 3
- 4
- 5
- 6
- 英文字体不需要记忆：
1：如果文字内容，为纯的英文（没有汉字），设置多个英文字体。后者没有用。
2：如果文字内容，为文字+英文，设置多个中英文字体。从左到右找到第一个符合自己字体进行设置。4. line-height
line-height:它主要的作用是，可以设置文字实际占有的高度。
文字实际占有的高度，不是由font-size大小决定的，是有行高决定的。文字在行高中垂直居中的。
属性值：2种写法。
- 像素单位：100px，代表文字占有的高度为100px。
- 百分比：按照自身的font-size大小进行划分的。
p{ font-size: 50px; }- 1
- 2
- 3
p{ font-size: 50px; /*行高:line-height*/ line-height: 100px;//文字实际占有的高度为100px }- 1
- 2
- 3
- 4
- 5
p{ font-size: 50px; /*行高:line-height*/ line-height: 200%; }- 1
- 2
- 3
- 4
- 5
行高经常用来做什么?经常用来制作：固定宽度和高度的标签，文字垂直居中。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0; padding: 0; } div{ /*标签的宽度*/ width:600px; /*标签的高度*/ height: 200px; /*外边框*/ border:5px solid red; font-size:50px; /*让文字行高和标签的高度一样即可*/ line-height:200px; } style> head> <body> <div> 我是老花骨朵呀 div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 文字垂直居中只需让文字实际占有的高度，和标签的高度一样即可。
5. font-weight
font-weight：可以让文字加粗。
属性值：纯数字、英文单词。
#box{ /* color:red;*/ /*font-weight:让文字加粗*/ font-weight: 700; }- 1
- 2
- 3
- 4
- 5
- font-weight:属性值可以是纯数字（没有像素单位）
- 属性值为纯数字：100~700之间的整数。【网页文字默认加粗的效果400】
#box{ /* color:red;*/ /*font-weight:让文字加粗*/ font-weight: bold; }- 1
- 2
- 3
- 4
- 5
- font-weight:属性值可以为英文单词
- normal【英文含义：正常的意思】相当于默认加粗数值400。bold【英文含义：加粗】，相当于数字700
注意：加粗的这个属性值没有像素单位。
6. font-style
font-style:它主要的作用是可以让文字倾斜。属性值：英文单词
normal：正常、文字不倾斜。
italic:斜体字【工作当中经常使用到它】
oblique:倾斜
<style type="text/css"> *{ margin:0; padding: 0; } .normal{ font-style: normal; } .italic{ font-style: italic; } .oblique{ font-style: oblique; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
7. 复合样式—font
其实font是一个符合样式：
- font-style:文字倾斜
- font-weight:加粗
- font-size:字体大小
- line-height:行号
- font-family：字体设置【宋体、微软雅黑】
相当于：这个五个样式简写方式
font：font-style font-weight font-size line-height font-family
.normal1{ color:rgb(123,66,99); font:italic bold 50px/300px '楷体'; }- 1
- 2
- 3
- 4
- font是上面五个属性简写方式。多个属性值之间用空格隔开。
- 字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换。
- 字体大小和行高之间用斜杠链接。
8. 文本相关样式
8.1 text-align
text-align：它主要的作用是设置网页中的文本的水平对齐方式。属性值：英文单词
- left:让网页中的文本水平靠左侧对齐。（默认数值）
- center:让网页中的文本水平居中对齐。
- right:让网页中的文本水平靠右侧对齐。
注意：不管单行文本、多行文本都可以通过text-align属性值，进行设置文本水平方向对齐方向。
.cur{ width:400px; height: 200px; /*外边框*/ border:2px solid red; /*设置文本对齐方式*/ text-align: right; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 默认情况下：网页的文本水平对齐方式靠左侧对齐。
- 不管是单行文本、还是多行文本都可以通过text-align进行设置水平对齐方式。
8.2 text-decoration
text-decoration：它主要的作用是可以给文本添加线条修饰。属性值：英文单词
- none:没有线条修饰
- overline:文本上方有线条修饰
- line-through:文本有中线的修饰
- underline:文本有下线的修饰
<style type="text/css"> *{ margin:0; padding: 0; } .none{ text-decoration: none; } .overline{ text-decoration: overline; } .through{ text-decoration: line-through; } .underline{ text-decoration: underline; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
8.3 text-indent
text-indent:英文含义，文本缩进。
text-indent:可以设置文本首行的缩进的距离。
属性值：2种
- 像素单位：比如100px，代表文本首行向右缩进100像素
- em单位：比如10em，代表文本首行向右缩进10个中文字符。
.indent{ width:400px; height: 400px; border:1px solid red; /*文本首行缩进*/ text-indent: 100px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
下面em单位代表的是文本首行缩进的中文字符个数。
.indent{ width:400px; height: 400px; border:1px solid red; /*文本首行缩进*/ text-indent:2em;//代表首行缩进两个中文字符 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
9. 盒模型样式
盒模型有人也称之为‘框模型’，盒模型就是网页中的标签，在网页中实际占有区域而已。
盒模型是有五个样式组成：
width(宽度)、height（高度）、padding(内边距)、border（边框）、margin(外边距)。另外还有一个：background-color:汉语意思，背景颜色。
background-color:样式属性值和color样式的属性值一样的【英文单词，16进制数字】
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0; padding: 0; } div{ width:400px; height: 400px; padding:50px; border:10px solid red; margin:60px; } style> head> <body> <div> 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 标签在网页中实际占有的区域：width +height +padding+border+margin
- 标签可以书写内容区域：width +height
9.1 宽度、高度
宽度（width）和高度（height）：设置标签可以书写内容区域。
属性值：像素单位、百分比单位。
- 非常常用像素单位
宽度和高度常用的单位为像素单位：数字设置为多少，宽度和高度即为多少像素。
#inner{ width:200px; height: 200px; background-color: red; }- 1
- 2
- 3
- 4
- 5
- 也是比较常用的单位：百分比
元素的宽度和高度可以写百分比单位：元素的宽度和高度百分比参照父元素的宽度和高度进行划分的。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0; padding: 0; } #inner{ width:50%; ====>200px height:100%;=====>400px background-color: red; } #outer{ width:400px; height: 400px; border:1px solid cyan; } style> head> <body> <div id="outer"> <div id="inner">div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 元素宽度和高度属性值可以书写为百分比形式
- 元素的宽度和高度百分比，是按照父元素的宽度和高度进行百分比划分的。
注意事项：
- 元素的宽度和高度属性值为百分比。元素的宽度和高度会随着父元素的宽度和高度变化而变化。
- body为网页主题部分，它有默认宽度。默认宽度为用户浏览器宽度。在开发当中很少设置body的宽度。
如果某一个标签想和网页主体一样宽。作为body的子元素设置为100%即可。 - 类似div这种容器级别标签，如果没有设置w、h。宽度默认和父元素一般宽。高度为零。
如果设置文本，会让文本撑出一个高度。
9.2 内边距
内边距：内边距（padding），它主要的作用是，设置宽高区域和边框距离的设置。特点：内边距不能显示内容的，但是可以设置背景。
属性值：像素单位。
注意：padding这个样式，它是一个复合样式。是由下面这四个单一样式组成的。
padding-top、padding-right、padding-bottom、padding-left。
.pdd{ width:200px; height: 200px; border:2px solid red; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- padding是一个复合样式，是由上面这四者组成。而我们这个padding样式，它的样式属性值写法，有四种。
- 多个属性值之间用空格隔开。
第一种写法：四个属性值（多个属性值之间，用空格隔开）
分别代表：上、右、下、左（顺时针）四个内边距数据设置。
padding: 10px 20px 30px 40px;- 1
第二种写法：三个属性值（多个属性值之间，用空格隔开）
分别代表：上、右和左、下内边距数据设置。
padding: 10px 20px 30px;- 1
第三种写法：两个属性值（多个属性值之间，用空格隔开）
分别代表：上下和左右内边距数据设置。padding: 10px 20px;- 1
第四种写法：一个属性值。
分别代表的是：上右下左内边距设置。
padding:10px;- 1
下面这种情况需要注意：
padding: 20px; padding-left: 40px;- 1
- 2
- 如果复合样式padding属性值书写完毕，在复合样式后面，如果在出现单一内边距样式出现。会覆盖前者内边距设置数据。
9.3 边框
作用：边框（border），主要的作用是设置标签外层边框。
属性值：属性值是由三部分组成，三个属性值之间需要用空格隔开。
三个属性值分别是：边框的宽度、边框线条设置、边框的颜色。
.bk{ width:200px; height: 200px; padding: 10px; /*边框*/ border:10px solid red; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- border三个属性值：属性值之间用空格隔开。
- 三个属性值：边框的宽度、边框线条类型、边框的颜色。
注意：border是一个复合样式。是由下面这三个单一样式组成。
- border-width：边框的宽度
- border-style：边框的线条类型
- border-color：边框的颜色
9.3.1 border-width
作用：它主要的作用是，设置标签边框的宽度。
属性值：它的属性值的写法，类似padding，属性值都是像素单位。也是有四种写法。
border-width:10px 20px 30px 40px;- 1
代表：代表的是标签：上、右、下、左边框的宽度。（多个属性值之间用空格隔开）
border-width:10px 20px 30px;- 1
代表：代表的是标签：上、左右、下边框的宽度（多个属性值之间用空格隔开）。
border-width:10px 20px;- 1
代表：代表的是标签：上下、左右边框的宽度。（多个属性值用空格隔开）
border-width:50px;- 1
代表：代表的是标签：上、右、下、左边框的宽度。
9.3.2 border-style
作用：它主要的作用是，设置边框的线条类型。
属性值：它的属性值写法类似于padding，也是有四种写法。属性值都是英文单词
- solid 实线
- dashed 虚线
border-style:solid solid dashed solid;- 1
代表：上、左右、下的线条类型
border-style:solid dashed solid;- 1
代表：上、左右、下的线条类型
border-style:dashed solid;- 1
代表：上下、左右的线条类型
border-style:dashed;- 1
代表：上、右、下、左线条类型
9.3.3 border-color
作用：主要的作用是设置边框的颜色。
属性值：属性值写法，类似于padding。也是有四种写法。属性值可以英文单词、也可以16进制颜色值。
属性值也有四种写法，多个之间用空格隔开。
border-color: red orange yellow green;- 1
属性数目和真实图的关系都和上面一样。border:10px solid red; --------------------相当于下面这种单一样式的写法---------------------- border-width: 10px; border-style: solid; border-color: red;- 1
- 2
- 3
- 4
- 5
9.3.4 小练习
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0; padding: 0; } .outer{ width:300px; height: 200px; border:1px solid red; } .outer div{ color:green; text-align: center; border-width: 0px 0px 1px 0px; border-style: dashed; border-color: cyan; font-size: 18px; font-family: '楷体'; } style> head> <body> <div class="outer"> <div>我是新闻1div> <div>我是新闻2div> <div>我是新闻3div> <div>我是新闻4div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
9.4 外边距
作用：外边距，主要的作用是设置标签与标签之间的距离。特点：外边距中不能显示内容，不能设置背景。
属性值：它的属性值写法类似于padding，单位都是像素单位。
注意：margin它也是一个复合样式。是由下面四个单一的样式组成的。
margin-top、margin-right、margin-bottom、margin-left。
.mr{ width: 200px; height: 200px; padding: 20px; border:2px solid red; background-color: cyan; /*外边距：四个单一样式*/ margin-top:10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
外边距在工作当中：经常使用复合样式margin。它的属性值写法类似于padding，有四种写法。
margin:10px 20px 30px 40px;- 1
代表：代表的是标签上、右、下、左外边距。（多个属性值之间用空格隔开）
margin:10px 20px 30px;- 1
代表：代表的是标签上、左右、下外边距（多个属性值之间用空格隔开）
margin:10px 20px;- 1
代表：代表标签上下、左右外边距。（多个属性值之间用空格隔开）
margin:10px;- 1
代表：代表的是上、右、下、左外边距。
<style type="text/css"> *{ margin:0; padding: 0; } .mr{ width: 200px; height: 200px; padding: 20px; border:2px solid red; background-color: cyan; /*外边距：四个单一样式*/ margin-bottom: 50px; margin-left: 150px; } .siblings{ width:200px; height: 200px; padding: 20px; border:2px solid pink; background-color: skyblue; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
总结：外边距：用来设置标签与标签之间距离。
老百姓大普通话：相当于这个标签向外踹了一脚，告诉别人（别的标签）离我远点。
三、CSS书写位置
在CSS【层叠样式表】中根据书写位置不同：行内样式、内嵌样式、外链样式。
行内样式写法：
- 双标签、单标签。在开始标签名字后面加上一个style;
- 只不过style属性值比较特殊。样式名字：样式属性值；样式名字：样式属性值；
<div style="color:red;font-size:20px">鹅鹅鹅div> <div style="color:red;font-size:20px">曲项向天歌div> <div style="color:red;font-size:20px">白毛浮绿水div> <div style="color:red;font-size:20px">红掌拨清波div>- 1
- 2
- 3
- 4
行内样式在工作中使用频率不是很高？
- 网页中如果样式类似，行内样式需要一个标签一个标签去设置。工作量大。
- 标签和样式没有分离。特别是初学者，学起来比较费劲。
内嵌样式在工作中使用频率相对高一些？
- 工作量很小。
- 标签和样式进行分离。初学者学起来相对友好一些。
<style> div{ color:cyan; font-size: 30px; } style>- 1
- 2
- 3
- 4
- 5
- 6
1. 内嵌样式书写语法规则
<head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> p{ color:red; font-size: 30px; background-color: pink; } style> head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
① 内嵌样式需要书写在style标签里面。而且style标签一般放置head标签内部。
② style标签的type属性，可有可无。属性值text/css,纯文本CSS样式。
③ 要通过选择器，选择将来要添加样式标签。
④ 选择器后面紧随大花括号。不是小括号，不是中括号。
⑤ 在大花括号里面书写要添加样式。（对于空格、换行、缩进不敏感）
样式名字：样式属性值；
样式名字：样式属性值；
样式名字：样式属性值；
⑥ 每一个样式结束之后，在后面别忘记加上分号。
四、选择器*
选择器【英文】：selector
选择器：选择器是CSS（层叠样式）中一种模式，用来选择器给那些网页中的标签添加样式而已。
CSS选择器分为两种：基础选择器、高级选择器。（现在学习的是CSS2的选择器）
基础选择器：标签选择器、id选择器、类选择器、通配符选择器。（4种）
高级选择器：后代选择器、交集选择器、并集选择器。（3种）
1. 基础选择器
1.1 标签选择器
标签选择器：在CSS样式中通过标签名字，选择给那些标签添加样式。
选择器范围：网页当中同名标签都会添加样式。
<style type="text/css"> h1{ color:red; } p{ color:cyan; font-size: 20px; } li{ color:yellow; background-color: skyblue; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 标签选择器：通过标签名字，选择器网页中标签进行添加样式。不管标签嵌套层次多深，都可以选中添加样式。
1.2 id选择器
id选择器：
第一步：给想要添加样式标签添加一个id属性。
第二步：在内嵌样式中，通过#+id属性值进行选择匹配。<style type="text/css"> #box{ color:red; font-size: 20px; background-color: yellow; } #box1{ color:cyan; } #BoX{ color:yellow; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 标签的id属性值写法：首个字符必须是英文字母，后面的属性值可以是英文字母、数字、下划线。
- 每一个标签的ID属性值务必唯一。（就和人的身份证是一样的，没人一个，不同）
- id属性值区分（英文的）大小写。
1.3 类选择器
类选择器：
第一步：给需要添加样式标签，添加一个class属性。
第二步：在内嵌样式中，通过.+标签的class的属性值选择范围：只要标签拥有class属性，且class属性值相同就可以选择匹配上【哪怕标签类型不同】
<style type="text/css"> .cur{ color:red; } style>- 1
- 2
- 3
- 4
- 5
- class属性值：首个字符务必是英文的，后面的属性值可以是数字、字母、下划线。（区分大小写）
- class属性值可以有多个，多个之间用空格隔开。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> .lan{ color:cyan; } .fs20{ font-size: 50px; } style> head> <body> <ol> <li>小明li> <li class="lan fs20">小红li> <li class="lan">小兰li> <li>小王li> <li>小李子li> ol> <p class="lan fs20">我是一个段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
1.4 通配符选择器—了解
通配符选择器：*
作用范围：通配符选择器，选择网页中全部标签。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ color:red; background-color: gold; } style> head> <body> <h1>我是祖国的栋梁之才h1> <div> <p>我是一个pp> div> <div> <p>我是一个pp> div> <div> <p>我是一个pp> div> <form> <input type="text" value="我是默认文本"/> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 注意：通配符不常用与设置某一个标签，它经常用来设置网页中全部标签样式。
在网页中很多的容器级别标签、文本级别标签p。都拥有内边距padding、外边距margin。
是网页外观看起来不是很好看。在这种情况下我们可以使用通配符，将这些标签的内外边距归零。DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0px; padding: 0px; } h1{ background-color: red; } p{ background-color: cyan; } style> head> <body> <h1>我是祖国的栋梁之才h1> <div> <p>我是一个pp> div> <div> <p>我是一个pp> div> <div> <p>我是一个pp> div> <form> <input type="text" value="我是默认文本"/> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 通配符选择器：一般用于清除元素默认拥有的外边距、内边距。
2. 高级选择器
我们已经学习完了四种基础选择器：标签选择器、id选择器、类选择器、通配符选择器。
但是在实际工作当中，我们网页中标签的嵌套关系可能很复杂，用基础选择器可能实现不了选中标签添加样式，
或者用基础选择器选中标签添加样式比较复杂。
因此，由基础选择器衍生出一些高级选择器：后代选择器、交集选择器、并集选择器。
2.1 后代选择器
后代选择器使用:
如果你想给某一标签添加样式，先寻找他的祖先元素。
在书写内嵌样式的时候，从左到右一层一层寻找，直到找到要添加样式的标签。
而且需要注意，左侧的都是祖先标签的选择器，而且祖先标签的选择器之间用一个空格隔开，最右侧的这个选择器，是最终添加样式的标签选择器。
<style type="text/css"> div ul li p{ color:red; } style>- 1
- 2
- 3
- 4
- 5
表示：div标签的后代ul的后代li的后代全部p标签添加样式
<style type="text/css"> div ul p { color:red; } style>- 1
- 2
- 3
- 4
- 5
表示：div标签的后代ul的后代标签全部p标签添加样式。同上
- 在使用后代选择器的时候，可以省略一些祖先标签的选择器。
#list .cur p{ color:green; font-size: 20px; }- 1
- 2
- 3
- 4
表示：带有id属性值为list的标签的后代带有class属性值为cur的后代p全部的标签添加样式。
总结：后代选择器使用
-
先找到要添加样式标签的祖先元素。通过在内嵌样式中一层一层的找到需要添加样式标签。
-
是从左到右最后一个选择器给选中标签添加样式。
-
祖先标签选择器之间一定要记住需要用空格隔开。
-
后代选择器在使用的时候，可以省略一些祖先标签的选择器。
2.2 交集选择器
交集选择器：被选中需要添加样式的标签，需要同时符合多个基础选择器而已。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> p.cur{//选中的p标签，而且身上需要有class属性，属性值为cur color:green; } h2.cur{//选中的h2标签，而且身上需要有class属性，属性值为cur color:red; } style> head> <body> <div> <h2 class="cur">我是二级标题h2> <p>我是小猫咪，天天就是睡觉p> <p class="cur">我是小猫咪，天天就是睡觉p> <p>我是小猫咪，天天就是睡觉p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
交集选择器：无非是选中标签同时需要符合多个基础选择器。
交集选择器：在使用的时候一般都是标签选择器和类选择器一起使用。
交集选择器：一般情况下都是标签选择器在前，类选择器在后。
交集选择器：在使用的时候标签选择器和类选择器之间没有任何符号。
交集选择器：交集选择器可以和其他的高级选择器一起使用。2.3 并集选择器
我们已经学习完六种选择器，但是有的时候，这六中选择器不同同时选择页面中全部情况。
因此我们可以使用并集选择器。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> h2,p {//代表给h2和p标签同时添加下面样式 color:green; background-color: red; } style> head> <body> <div> <h2>我是祖国的老花骨朵h2> <p>我是大帅哥，虽然有点丧良心p> <p>我是大帅哥，虽然有点丧良心p> <p>我是大帅哥，虽然有点丧良心p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
并集选择器，是有基础选择器之间用逗号隔开。【最后面不需要添加逗号】
并集选择器：代表的是这些选择器合并一起，共同添加一些相同样式。
并集选择器可以结合其他高级选择器一起使用。DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> div h2 , div p{ color:red; background-color: green; } style> head> <body> <div> <h2>我是祖国的老花骨朵h2> <p>我是大帅哥，虽然有点丧良心p> <p>我是大帅哥，虽然有点丧良心p> <p>我是大帅哥，虽然有点丧良心p> div> <h2>我是h2标题h2> <p>我也是一个段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
表示：div的后代标签h2、和div后代标签p，同时设置相同样式。
五、CSS特性
css【层叠样式】其实它拥有两大特性（注意事项）：继承性、层叠性。
1. 继承性
继承性：有的时候，我们发现没有被选择器选中的标签，也添加上了样式。由于这个标签的祖先元素添加样式。
导致这个没有被选择器选中的标签页继承了一些样式。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ margin:0px; padding: 0px; } .box{ width:400px; height: 250px; background-color: cyan; color:red; font-size: 50px; font-family: '楷体'; } style> head> <body> <div class="box"> <p>我是一个段落p> <p>哈哈哈p> <p>么么哒p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- css层叠样式中有继承特性：祖先元素的样式中（涉及到文字相关样式），后代元素可以继承。
注意：祖先元素的文字相关的样式，可以被后代元素继承。
2. 层叠性
我们已经学习完4中基础选择器、3中高级选择器，选中网页中标签添加样式。
我们已经学习完CSS继承性，没有被选择器选中标签，可以继承祖先元素的文字样式。问题：
1.我们学习了很多选择器，如果网页中某一个标签，同时被多个选择器选中添加相同的样式。到底听那个选择器呀？2.我们学习了继承，后代标签可以继承祖先标签的文字样式，如果后代标签的祖先元素有很多（文字样式），到底该继承谁的呀？
解决方案：层叠性
如果网页中标签同时被多个选择器选中，添加相同样式，其实CSS会通过一些手段进行对比，将最后一个选择器层叠调、覆盖调其他选择器。
2.1 标签同时被多个选择器选中，添加相同样式。
解决方案：层叠性。
在CSS中权重高的选择器，会层叠掉权重低的选择器。
基础选择器：
在基础选择器中，根据选择器选择范围大小，划分权重，选择器选择范围越小，权重越高。
id选择器权重>类选择器权重>标签选择器权重>通配符选择器权重
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> *{ color:red; } p{ color:orange; } #box{ color:pink; } .cur{ color:purple; } style> head> <body> <p id="box" class="cur">我是祖国的老花骨朵p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 如果一个标签被多个选择器选中添加相同的样式，样式属性值不是‘混合物’。
- 根据选择器权重高低进行层叠、覆盖，权重高的层叠、覆盖权重低的选择器。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> #box p{ color:red; } #box #box1 p{ color:orange; } #box #box1 #box2 p{ color:green; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我爱你我的祖国p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 如果是高级选择器，某一个标签同时被多个选择器选中。
层叠依据是:
对比：id选择器个数=>类选择器个数=>标签选择器个数
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> p{ color:yellow; } #box p{ color:red; } .box .box1 .box2{ color:green; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我爱你我的祖国p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
层叠依据是：
如果高级选择器中id选择器个数、类选择器个数、标签选择器个数一样的。
后者覆盖前者。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> #box p{ color:red; } #box2 p{ color:skyblue; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我爱你我的祖国p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2.2 标签没有被选择器选中，继承祖先元素的文字样式
- 后代元素可以继承祖先元素的文字样式：就近原则。（不用看选择器权重）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> #box{ color:red; font-size: 12px; } #box .box1{ color: orange; font-size: 20px; } .box .box1 .box2{ color:green; font-size: 40px; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我是你们大佬的后代p标签p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 后代标签继承祖先元素的文字样式，选择器选择的都是就近的（比选择器权重）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> #box .box1 .box2{ color:red; font-size: 20px; } #box .box1 #box2{ color: yellow; font-size: 30px; } #box #box1 #box2{ color:pink; font-size: 50px; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我是你们大佬的后代p标签p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 后代标签继承祖先元素文字样式，权重是一样的（后者覆盖前者）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style type="text/css"> #box .box1 #box2{ color:red; font-size: 40px; } #box #box1 .box2{ color: orange; font-size: 60px; } style> head> <body> <div id="box" class="box"> <div id="box1" class="box1"> <div id="box2" class="box2"> <p>我是你们大佬的后代p标签p> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
-
相关阅读:
OpenPose训练教程
创建对象在堆区中如何分配内存
LeetCode47：全排列②
算法题：摆动序列
【设计模式】 - 结构型模式 - 外观模式
STC15单片机-状态机点灯
c++ 智能指针详解
交换高级特性 —— 链路聚合
基于springboot+vue的青年公寓服务平台
【计算机组成原理】第三章单元测试
- 原文地址：https://blog.csdn.net/qq_62361050/article/details/126036957
