前端三件套-CSS-天涯论坛 - Powered by Discuz! Archiver

1fy07h 发表于 2024-6-30 05:07:39

前端三件套--CSS

<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.CSS简介--层叠样式表（CascadingStyleSheets，CSS）</h2>
网页实质上是一个多层的结构，经过CSS能够分别为网页的每一个层来设置样式，而最后咱们能看到只是网页的最上边一层。
CSS修改元素样式的方式大致能够分为3种：内联样式（行内样式）内部样式表外边样式表内联样式：
在标签内部经过style属性来设置元素的样式
<div style="color: black; text-align: left; margin-bottom: 10px;"><p style="color:red;font-size:60px;">内联样式（行内样式）</p></div>
问题：运用内联样式，样式只能对一个标签生效。倘若期盼影响到多个元素，必要在每一个元素中都复制一遍；并且当样式出现变化时，咱们必要要一个一个的修改，非常的不方便。（重视：研发时绝对不要运用内联样式）
内部样式表：
在head中的style标签里编写样式，经过css的选取器选中元素设置样式。内部样式表更加方便对样式进行复用
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
 p{
 color:green;
 font-size:50px;
 }
 </style>
</div>
问题：咱们的内部样式表只能对一个网页起功效，它里边的样式不可跨页面进行复用
外边样式表：
将css样式编写到一个外边的CSS文件中，而后经过link标签来引入外边的CSS文件，能够在区别页面之间进行复用
<div style="color: black; text-align: left; margin-bottom: 10px;"><link rel="stylesheet" href="./style.css"></div>
将样式编写到外边的CSS文件中，能够运用到浏览器的缓存机制，从而加快网页的加载速度，加强用户的体验。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2.CSS基本语法</h2>
（1）注释
CSS中的注释没论单行、多行只能运用/*和*/包裹。
HTML中的注释没论单行、多行只能运用包裹。
JS中的注释单行注释运用//。多行注释运用/*和*/包裹。
（2）选取器
选取器权重：选取器权重内联样式1，0，0，0ID样式0，1，0，0类和伪类选取器0，0，1，0元素选取器0，0，0，1通配选取器0，0，0，0继承的样式无优先级在某个样式后面添加！important最高优先级CSS经过选取器选中页面中的指定元素。
通配符选取器：选取页面中的所有元素。
<div style="color: black; text-align: left; margin-bottom: 10px;">*{
 color: red;
 }
</div>
元素选取器：亦叫标签选取器，按照标签名叫作来选取元素。
<div style="color: black; text-align: left; margin-bottom: 10px;">h1{
 color: green;
 }
</div>
类选取器：按照class名叫作来选取元素。
<div style="color: black; text-align: left; margin-bottom: 10px;">.left{
 color: blue;
 }
</div>
ID选取器：按照id属性值选中一个元素。
<div style="color: black; text-align: left; margin-bottom: 10px;">#red{
 color: red;
 }
</div>
属性选取器：按照元素的属性值选中一组元素。语法1：[属性名] 选取含有指定属性的元素语法2：[属性名=属性值] 选取含有指定属性和属性值的元素语法3：[属性名^=属性值] 选取属性值以指定值开头的元素语法4：[属性名$=属性值] 选取属性值以指定值结尾的元素语法5：[属性名*=属性值] 选取属性值中含有某值的元素复合选取器：交集选取器：选中同期复合多个要求的元素。<div style="color: black; text-align: left; margin-bottom: 10px;">.a.b.c{
 color: blue;
 }
</div>并集选取器：运用逗号分隔。<div style="color: black; text-align: left; margin-bottom: 10px;">h1,span{
 color: green;
 }
</div>
关系选取器：子元素选取器：选中指定父元素的子元素。<div style="color: black; text-align: left; margin-bottom: 10px;">div.box > p > span{
 color: orange;
 }
</div>后代选取器：选取指定元素内的指定后代元素。<div style="color: black; text-align: left; margin-bottom: 10px;">div span{
 color: skyblue;
 }
</div>兄弟元素选取器：选取兄弟元素<div style="color: black; text-align: left; margin-bottom: 10px;">p + span{
 color: red;
 }

 p ~ span{
 color: red;
 }</div>
伪类选取器：选取指定伪类元素。
伪类（不存在的类），用来描述一个元素的特殊状态，例如：第1个子元素，被点击的元素，鼠标移入的元素，运用：开头。:first-child 第1个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素n：第n个，n的范围0到正没穷2n或even：选中偶数位的元素2n+1或odd：选中奇数位的元素:link 未拜访的链接:visited 已拜访的链接 因为隐私的原由，因此visited这个伪类只能修改链接的颜色:hover 鼠标悬停的链接:active 鼠标点击的链接伪元素选取器：表

ejn2tr4200 发表于 2024-9-2 00:02:11

论坛外链网http://www.fok120.com/

4lqedz 发表于 2024-10-14 20:56:17

我完全同意你的看法，期待我们能深入探讨这个问题。

页: [1]

天涯论坛's Archiver

前端三件套--CSS