一、CSS层叠样式表 1.主要是用来调整标签样式(让女生化妆成美女) 2.语法结构 3.注释语法 /*注释内容*/ 4.三种编写CSS的方式 1>.head中style标签内部直接编写(学习阶段使用 方便) 2>.head中link标签引入外部css文件(最正规) 3>.直接在标签内部通过style属性编写(不推荐)

二、CSS基本选择器

p

span 1.标签选择器:直接编写标签名来查找标签 div{color:green;} # 将body内所有的div块儿标签内字体变成绿色 2.类选择器:通过编写class的值来查找标签 .c1{color:red;} # 将类是c1的标签字体颜色变成红色(类使用 .) 3.id选择器:通过编写id的值来精准查找标签 #d1{color:aquamarine;} # 将ID是d1的标签字体颜色变成天青色(ID使用 #) 4.通用选择器:查找所有的标签 *{color:blue;} # body内所有的标签字体颜色变成蓝色(全部使用 *) 三、CSS组合选择器 div下面的span div下面的span 1.查找div标签内部所有的span(后代) 后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签 #d1 span{color: blue;} 2.查找div标签内部所有的儿子span 儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签 #d1>span{color: orange;} 3.查找div标签同级别下面紧挨着的一个span标签(弟弟) 毗邻选择器 #d1+span{color: red;} 4.查找div标签同级别下面所有的span标签(弟弟们) 弟弟选择器 #d1~span{color: blue;} 四、CSS属性选择器 我是A 所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性 1.查找属性名含有name的标签 *[name]{background-color: greenyellow;} 2.查找属性名含有name并且值是username的标签 *[name="username"]{background-color: orange;} 3.查找input标签并且 属性名含有name值是username的 input[name='username']{background-color: aqua;} 前面的选择器可以是任意类型的 标签、id、class 五、CSS选择器之分组与嵌套

我是p

我是span 当多个选择器查找到的标签需要调整相同的样式 那么可以合并(不用重复写相同的代码) div,p,span{color: red;} 并且合并的选择器彼此不干扰也没有类型的限制 #d1,.c1,span{color: green;} 还可以在选择器基础之上添加额外的选择使得查找更精确 p.c1{color: blue;} div#d1{color: antiquewhite;} 六、CSS选择器之伪类选择器 a标签默认的颜色有两种 紫色跟蓝色 紫色:链接地址已经被点击过了 蓝色:链接地址从来没有点击过 我是真的服了你个老六啊！ a:hover{color: greenyellow;} # 当鼠标悬浮在A标签上 颜色变色 a:link{color:blue;} # 当鼠标点击之后 颜色变色 a:visited{color: darkgray;} # 当鼠标已经点击之后 颜色变色 a:active{color: aqua;} # 当链接被选择 颜色变色 a{text-decoration:none;} # 取消a标签自带的下划线 '''鼠标悬浮上去之后样式改变 适用于所有含有文本的标签''' 七、CSS选择器之伪元素选择器

时间会证明一切 尽管努力吧！

通过css代码来操作标签的文本内容 p:first-letter{font-size: 88px; color: greenyellow;} # html里面都是以px像素作为单位的 修改第一个文字大小 颜色 p:before{content:"你有努力嘛？"; color: red;} # 在p的首位前面添加数据 p:after{content:"我在努力啦！"; color:blue;} # 在p的末尾添加数据 伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬 八、CSS选择器优先级

每日对自己说一遍 加油加油呀！

# 原p标签直接修改 # head里面style修改成蓝色 # 通过外链修改 当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的 选择器相同 引入位置不同 就近原则 谁离标签靠得近就是用谁的

每日对自己说一遍 加油加油呀！

#d1{color: red;} .c1{color: blue;} p{color: black;} 当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的 选择器不同的情况 行内 > id选择器 > 类选择器 > 标签选择器 如果想类选择器等级高 可以使用强制修改等级 给他特权 需要关键字 !important .c1{color: blue !important;} 九、字体样式

上了生活的贼船，就做快乐的海盗。

body{font-family:"微软雅黑";} # 修改body中的字体 p{ font-size: 30px; # 修改文字大小 font-weight: bold; # 修改文字属性 normal bold bolder lighter color: aquamarine; # 修改文字颜色 color:rgb(red, green, blue); # 修改文字颜色rgb color: #; # 修改文字颜色#十六进制颜色 color: rgba(red, green, blue, alpha); # 修改文字颜色rgba text-align: center; # 文字居中 left rgiht text-decoration: underline; # 文字样式 请看下图 text-indent: 100px; # 文字首文字间距 } 十、背景属性 div{ width: 800px;height: 800px; # 设置div大小 background-color: aquamarine; # 设置div背景颜色 background-repeat: no-repeat; # 设置图片只出现一张不重复(不设置则会出现多张) background-repeat: repeat-x; # 设置图片横向出现多张图片 background-repeat: repeat-y; # 设置图片竖向出现多张图片 background-position: center center; # 设置图片位置 background-image:url(可本地可网络) # 设置图片 } 十一、边框属性 长方形正方形 div{ width: 800px;height: 400px; # 设置div长宽 background-color: aquamarine; # 设置div border-left-color: blue; # 设置左边框线 可以 left right top bottom border-left-width: 5px; # 左边框线粗度 border-left-style: dashed; # 设置边框线类型 '''solid 单实线 dashed 虚线 dotted 点线 double 双实线''' border: 5px solid black; # 可以缩写 border-left: 5px solid red; # 也可以单边缩写 }

p{ width: 400px;height: 400px; # 设置p长宽 background-color: aquamarine; # 设置背景颜色 border-radius: 50%; # 设置变圆 10-50 逐渐变圆 border: 5px solid black; # 设置边框线 background-image: url(); # 设置背景图片 background-position: center; # 设置图片位置 } 十二、display属性

加油：

开心：

'''我们发现为什么第二个input为什么不见了 是因为设置了dispaly隐藏起来了''' dispaly: none block inline inline-block 111 222 333 span{display: block;} # 占满整个页面宽度 变成块儿标签 技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请点点赞收藏+关注 谢谢支持 !!! }

一. CSS 定义CSS 指层叠样式表 (Cascading Style Sheets)。所有的主流浏览器都支持层叠样式表。二. CSS 优点使页面结构表现分离，极大地提高了工作效率。三. CSS 样式表分类内联样式（在 HTML 标签中使用）内部样式表（位于 标签内部）外部样式表内联样式拥有最高的优先权，其次为内部样式表，最后为外部样式表。四. HTML如何使用 CSS1. 内联样式（在 HTML 标签中使用）

p标签

2. 内部样式表（位于 head 标签内部） 3. 外部样式表3.1 link 引入此种方法使用频率最高，也是最常使用的方法，让结构与表现分离。 例：

p标签

3.2 import 引入这种方法导入方式和 方式功能一样，就是语法不同，在 之间使用。此种方法import结尾必须加 “；”。@import ""; 例：

p标签

@import url(""); 例：

p标签

五. 选择器1. 全局选择器（*）*{}作用于全局

这是一个段落标签！

这是一个加粗标签！ 2. 标签元素选择器通过作用标签名进行设置。如 p、h1、em、a，甚至可以是 html 本身。

这是一个段落标签！

3. id 选择器通过 id 属性的值进行设置。id 选择器具有唯一值，相同的 id 属性的值不可重复。对应 #

这是一个段落标签！

4. class（类）选择器通过class属性的值进行设置可以多个class属性值相同，开头不能用数字。对应 .

这是一个段落标签！

这是一个加粗标签！ 5. 选择器分组可以将任意多个选择器分组在一起，对此没有任何限制。设置多个标签为相同样式，可以用到使用此选择器。多个标签之间用逗号分隔。

这是一个段落标签！

这是一个加粗标签！ 6. 后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

1. 一组
   • 一组一列
2. 二组

7. 子元素选择器与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。子选择器使用了大于号（>)作为子结合符。子结合符两边可以有空白符。

holle world !

8. 伪类选择器:link 未访问的状态:visited 已访问的状态:hover 鼠标经过的状态:active 选定的状态，鼠标点击的一瞬间 跳转 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。六. 盒子模型元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。盒子模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。一个盒子中主要的属性有五个：width：内容的宽度height：内容的高度padding：内边距border：边框margin：外边距1. 内边距（padding）定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值，但不允许使用负值。有四个单独的属性，分别设置上、右、下、左内边距：padding-top：上内边距padding-right：右内边距padding-bottom：下内边距padding-left：左内边距可以同时设置上、右、下、左内边距：(1). padding:10px;上、右、下、左内边距都是10px(2). padding:10px 20px;上、下内边距为10px，左、右内边距为20px(2). padding:10px 20px 30px;上内边距为10px，左、右内边距为20px，下内边距为30px(2). padding:10px 20px 30px 40px;上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px顺序：上 - 右 - 下 - 左2. 边框（border）边框是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。每个边框有 3 个方面：宽度、样式，以及颜色。样式：(1).定义单边样式border-top-style：上边框样式border-right-style：右边框样式border-bottom-style：下边框样式border-left-style：左边框样式(2),同时定义多边样式：border-style: solid dotted dashed double; 宽度(1).定义单边宽度border-top-width：上边框宽度border-right-width：右边框宽度border-bottom-width：下边框宽度border-left-width：左边框宽度(2),同时定义多边宽度：border-width: 10px 5px 15px 5px; 颜色(1).定义单边宽度border-top-color：上边框颜色border-right-color：右边框颜色border-bottom-color：下边框颜色border-left-color：左边框颜色(2),同时定义多边颜色：border-color: 10px 5px 15px 5px; 同时边框宽度、样式，以及颜色(1).定义单边宽度、样式，以及颜色border-top:1px solid blue;：上边框宽度为1px,样式为实线，颜色为蓝色border-right:1px solid blue;：右边框宽度为1px,样式为实线，颜色为蓝色border-bottom:1px solid blue;：下边框宽度为1px,样式为实线，颜色为蓝色border-left:1px solid blue;：左边框宽度为1px,样式为实线，颜色为蓝色(2),同时定义多边颜色：border: 1px solid blue; 3. 外边距（margin）围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。有四个单独的属性，分别设置上、右、下、左外边距：margin-top：上外边距margin-right：右外边距margin-bottom：下外边距margin-left：左外边距可以同时设置上、右、下、左外边距：(1). margin:10px;上、右、下、左外边距都是10px(2). margin:10px 20px;上、下外边距为10px，左、右外边距为20px(2). margin:10px 20px 30px;上外边距为10px，左、右外边距为20px，下外边距为30px(2). margin:10px 20px 30px 40px;上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px七. 定位使用 position 属性，可以选择 4 种不同类型的定位，将会影响元素框生成的方式。position 属性值的含义：1. static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。2. relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。3. absolute(1). 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(2). 可以覆盖页面上的其他元素。(3). 可以设置z-index属性控制层叠顺序。4. fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。}

W3C标准：结构：HTML描述页面的结构表现：CSS控制页面中元素的样式行为：JavaScript相应用户操作CSS是层叠样式表网页实际上是一个多层的结构，通过CSS可以分别为网页的每个一层来设置样式，而最终能看到的只是网页的最上面一层。使用CSS来修改元素的样式：第一种方式（内联样式，行内样式）：在标签内通过style属性来设置元素的样式问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍。并且当样式发生变化时，我们必须要一个一个修改，非常麻烦。第二种方式（内部样式表）：将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式。可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。内部样式表更加方便对样式进行复用内部样式表只能对一个网页起作用，不能跨页面复用第三种方式（外部样式表）：最佳实践可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。语法HTML中的style里的内容属于CSS，要按照CSS语法编写。CSS中的注释/**/，内容会自动被浏览器所忽略。CSS的基本语法：选择器 声明块选择器：选中页面中的指定元素，例如 p 的作用就是选中页面中所有的p元素。声明块：指定元素的样式，声明块由多个声明组成，声明是一个名值对结构。一个样式名对应一个样式值，名和值之间以:(冒号)连接，以;(分号)结尾。常用选择器元素选择器作用：根据标签名来选中指定的元素语法：标签名{}例子：p{} h1{} div{}id选择器作用：根据元素的id属性值选中一个元素语法：#id属性值{}例子：#box{} #red{}类选择器（class选择器）作用：根据元素的class属性值选中一组元素语法：.class属性值{}例子：.red{}class是一个标签的属性，与id类似，不同的是class可以重复使用。可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性（中间用空格隔开）。通配选择器作用：选中页面中的所有元素语法：*{}复合选择器交集选择器作用：选中同时符合多个条件的元素语法：选择器1选择器2选择器3选择器n{}注意：交集选择器中如果有元素选择器，必须使用元素选择器开头例子：div.red{} .a.b.c{}分组选择器（并集选择器）作用：同时选择多个选择器对应的元素语法：选择器1,选择器2,选择器3,选择器n{}例子：#b1,.p1,h,span,div.red{}关系选择器父元素：直接包含子元素的元素叫做父元素子元素：直接被父元素包含的元素是子元素祖先元素：直接或间接包含后代元素的元素叫做祖先元素（一个元素的父元素也是它的祖先元素）后代元素：直接或间接被祖先元素包含的元素叫做后代元素（子元素也是后代元素）兄弟元素：拥有相同父元素的元素是兄弟元素子元素选择器作用：选中指定父元素的指定子元素语法：父元素 > 子元素例子：div.box > span{ color:orange; }后代元素选择器作用：选中指定元素内的指定后代元素语法：祖先 后代例子：div span{ color: skyblue; }选择下一个兄弟（紧接着的一个）语法：前一个 + 下一个例子：p + span{ color: red; }选择下面所有的兄弟语法：兄 ~ 弟例子：p ~ span{ color: green; }属性选择器[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素例子：p[title^=abc]{ color: teal; }伪类（不存在的类，特殊的类）伪类用来描述一个元素的特殊状态例如：第一个子元素、被点击的元素、鼠标移入的元素伪类一般情况下都是使用:(冒号)开头:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素（以上这些伪类都是根据所有的子元素进行排序）:first-of-type:last-of-type:nth-of-type()（以上三个伪类是在同类型元素中进行排序）:not() 否定伪类，将符合条件的元素从选择器中去除特殊值：n 第n个 n的范围是0到正无穷2n 或 even 表示选中偶数位的元素2n+1 或 odd 表示选中奇数位的元素a元素的伪类:link 表示没访问过的链接（正常的链接）:visited 表示访问过的链接（由于隐私的原因，所以visited这个伪类只能修改链接的颜色）:hover 用来表示鼠标移入的状态:active 用来表示鼠标点击的状态伪元素表示页面中一些特殊的并不真实存在的元素（特殊的位置）伪元素使用::(两个冒号)开头::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容::before 元素的开始::after 元素的最后（before和after必须结合content属性中使用，并且都不能被选中）

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur itaque voluptatibus culpa eveniet sequi minima maxime, impedit quibusdam magni iusto autem sint quam nostrum repellat molestiae reiciendis qui eos dolores!

样式继承继承发生在祖先和后代之间，为一个元素设置的样式同时也会应用到它的后代元素上。继承的设计是为了方便开发，利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式。注意：并不是所有的样式都会被继承。例如：背景相关的、布局相关的等样式都不会被继承。选择器的权重（优先级）样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。选择器的权重：内联样式 1000id选择器 100类和伪类选择器 10元素选择器 1通配选择器 0继承的样式 没有优先级比较优先级时，需要将所有的选择器的优先级进行计算（相加），最后优先级越高，则越优先显示（分组选择器单独计算）。选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器（不会跨级）。如果优先级计算后相同，此时则优先使用靠下的样式。可以在某一个样式的后面添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。（注意：在开发中，一定要慎用！！！）例子：.d1{ background-color: purple !important; }长度单位像素屏幕（显示器）实际上是由多个小点点构成不同屏幕的像素大小不同，像素越小的屏幕显示的效果越清晰- 所以同样的200px在不同的设备下显示效果不一样百分比可以将属性值设置为相对于其父元素属性的百分比设置百分比可以使子元素跟随父元素的改变而改变emem相对于元素的字体大小来计算1em = 1font-sizeem会根据字体大小的改变而改变（一般浏览器默认1font-size是16px）remrem是相对于根元素html的字体大小来计算 颜色单位在CSS中可以直接使用颜色名来设置各种颜色，但非常不方便。例如：red、orange、yellow、blue、green……RGB值RGB通过三种颜色的不同浓度来调配出不同的颜色R red，G green，B blue每一种颜色的范围在0-255（0%-100%）之间语法：GRB(红色,绿色,蓝色)RGBA在RGB的基础上增加了一个A表示不透明度需要4个值，前三个和RGB一样，第四个表示不透明度1表示完全不透明，0表示完全透明，.5表示半透明……语法：GRBA(红色,绿色,蓝色,不透明度)十六进制的RGB语法：#红色绿色蓝色颜色浓度00-ff如果颜色两位两位重复可以进行简写#aabbcc --> #abc#aabbcd 不能简写HSL值、HSLA值H 色相（0-360）S 饱和度 颜色的浓度（0-100%）0变灰色L 亮度 颜色的亮度（0-100%）0变黑色学习视频、笔记参考：https://www.bilibili.com/video/BV1XJ411X7Ud}