初入前端之CSS篇

科技2022-07-14 117

CSS篇

CSS简介和语法选择器常用选择器复合选择器关系选择器属性选择器伪类选择器元素的伪类以及伪元素选择器样式的继承选择器的权重单位

CSS简介和语法

网页分为三个部分：结构HTML 表现CSS 行为JS javaScript

CSS：级联样式表，层叠样式表

网页实际上是一个多层的结构，通过CSS分别为网页的每个层设置样式而我们最终能看到的只是网页上的最上边一层 CSS设置网页中元素的样式。

用css修改元素的样式

第一种方式(内联样式，行内样式)；内嵌式

标签内部通过style属性问题：使用内联样式，样式只能对一个标签生效

第二种方式（内部样式表）：内联 -将样式编写到head的style标签里

然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时候只需要修改一处即可内部样式表更加方便对样式进行复用内部样式表只能对一个网页作用不可以跨页面复用

第三种方式（外部样式表）最佳实现：外联

可以将css样式编写到一个外部的css文件中然后可以通过link标签引入外部的文件中

外部样式表需要通过link标签引入，意味着只要想使用这些样式的网页可以引用在标签中，bai“rel=stylesheet”，rel是关联的意du思，关联的是一个样式表(stylesheet)文档，它zhi表示这个link在文档初始dao化时将被使用。使样式中不同页面间复用

将样式编写到外部的css文件中，可以使用到浏览器的缓存机制从而加快网页的加载速度，提高用户体验

CSS中的注释：注释中的内容会自动被浏览器锁忽略

css的基本语法：选择器：声明块选择器，通过选择器可以选中页面中的指定元素比如p的作用就是选中页面中的所有p元素声明块，通过声明块来指定为元素设置的样式声明块由一个个的声明组成声明是个名值对结构一个样式名对应一个样式值，名和值以：连接，以；结尾 p{ color:red; font-size: 60px; }

选择器

常用选择器

元素选择器：将所有的段落设置红色作用：根据标签名选中指定元素语法：标签名{} 例子；p{} h1{} id选择器：将某段设为红色作用：根据元素的id属性值选中一个元素语法：#id属性值{] 例子：#box{} #red{} #red{ color:red; } 通配选择器作用：选中页面的所有元素语法：*class 是标签的一个属性。和id类似不同的是class可以重复，通过class属性为元素分组。可以同时为一个元素指定多个class属性。

复合选择器

将class为red的div字体大小设置为30px*/ 交集选择器作用：选中同时符合多个条件的元素语法：选择器1选择器2选择器3.... 注意：如果有元素选择器必须有元素选择器开头 div.red{ font-size: 30px; } .a.b.c{ color:green; } <div class="red2 a b c">我是div2</div> 选择器分组（并集选择器）作用：同时选择多个选择器对应的元素语法：选择器1，2，3，4 h1,span{ color:green; }

关系选择器

子元素选择器：为div的子元素span设置一个字体颜色红色（div直接包含的span）作用：语法:父元素>子元素 div > span{ color: orange; } 后代元素选择器：作用：选中指定元素内的指定后代元素语法：祖先后代 div span{ color:blue; } p+span{ /* 找p后面的下一个span*/ color: red; } p~span{ /* 选择p后面所有的span */ color:red; }

属性选择器

[属性名] 选择含义指定属性的元素 [属性名=属性值] 选择含义指定属性的值的元素 [属性名^=属性值] 选择属性值以指定值开头的元素 [属性名$=属性值] 选择属性值以指定值结尾的元素 [属性名*=属性值] 选择属性值中含有某值的元素

伪类选择器

伪类不存在的类

用来描述一个元素的特殊状态比如：第一个元素，被点击的元素，鼠标移入的元素

伪类一般都是：开头 :first-child :last-child 最后一个

ul>li:nth-child()第n个子元素 n 第n个从0开始到n2n/even 选中偶数的元素2n+1或者odd 奇数位的元素

-以上伪类是根据所有的子元素排序

:first-of-type :last-of-type :nth-of-type

这几个伪类的功能和上述的类似，不同点是他们中同类型元素进行排序

- :not()否定伪类 -将符合条件的元素从选择中去除

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 将ul里的第一个li设置为红色 */ /* /* ul>li:first-child{ color:red; }*/ /* ul>li:nth-child(2n){ color: blue; }*/ /* ul>li:nth-child(odd){ color: blue; }*/ /* ul>li:not(:nth-child(3)){ color:yellowgreen; }*/ ul>li:not(:nth-of-type(3)){ color:yellowgreen; } </style> </head> <body> <ul> <span>我是一个span</span>  <li>第0个</li> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> </body> </html>

元素的伪类以及伪元素选择器

1.伪类 - link用来表示没有访问过的链接（正常的链接） - visited表示访问过的网络 - 描述越具体越往后

a:link{ color:red; } a:visited{ color:orange; /* 只能修改链接的颜色*/ } a:hover{ color: blue; font-size: 50px; /* 鼠标移入*/ } a:active{ color:yellowgreen; /* 鼠标点的时候*/ } 伪元素：表示页面一些特殊的不真实存在的元素例子： ::开头 ::first-letter 表示第一个字母 ::fitst-line表示第一行 p::selection 表示选中的内容 ::before 元素的开始位置 ::after 元素的最后 - before .after 必须结合content属性来使用 - p::first-letter{ font-size: 50px; } p::first-line{ background-color:yellowgreen; }

样式的继承

样式的继承：一个元素设置的样式会应用到它的后代元素继承可以将通用的样式设置共同的祖先

-不是所有样式都会被继承背景相关，布局相关等的都不会

选择器的权重

样式的冲突 - 当我们通过不同的选择器选中相同的元素并且为相同的样式设置不同值

发生样式冲突时，应用那个样式由选择器权重（优先级）选择器的权重： - 就近原则：覆盖原来的值内联样式： 1，0，0，0 id选择器： 1，0，0，0 类和伪类选择器： 1，0，0，0 元素选择器： 0，0，0，1 通配选择器： 0 0 0 0 继承的样式：没有优先级比较优先级时，需要所有选择器优先级相加计算，优先级越高，优先显示（分组选择器单独计算）选择器的累加不会超过最大数量级，类选择再高也不会超过id important 超过内联慎用

单位

长度单位：（1）像素 - 屏幕实际上是一个一个的小点构成 - 不同屏幕的像素大小不一样像素越小的屏幕显示的效果越清晰 - 所以同样的200px中不同的设备下显示效果不一样

（2）百分比 - 属性设置为相对于父元素属性的百分比 - 随父元素一起改变

（3） em - em是相对于元素的字体大小来计算 - 1em=1FONT-SIZE =10*字体大小 - em会根据字体大小的改变而改变（4）rem ：room - rem是相对于根元素的字体大小来计算 - html{ font-size:30px}

颜色单位:

css中可以直接用颜色来设置各种颜色比如：red，orange，但是在css中直接使用颜色名是非常不方便的

RGB值： - RGB通过三种颜色的不同浓度来调配出不同的颜色 - R red,G green， B blue - 每一种颜色在0-255之间（0%-100%） - 语法：RGB(红色，绿色，蓝色) RGBA: .5 就是在rgb的基础上增加了一个a表示不透明度 - 需要四个值，前三个和rgb一样，第四个表示不透明度 1 表示完全不透明 0 表示完全透明 .5 半透明 16进制的RGB值： -语法：#红色绿色蓝色 - 颜色浓度通过00--ff - 如果颜色两位两位重复可以简写 #aabbcc -->#abc HSL值 HSLA值： H 色相 0-360 S 饱和度% ;颜色的浓度 0-100% L 亮度%；颜色亮度 0-100%

Processed: 0.015, SQL: 8