CSS基础学习选择器

最新推荐文章于 2024-03-30 11:42:57 发布

乡下鲨的目光

最新推荐文章于 2024-03-30 11:42:57 发布

阅读量298

点赞数 1

分类专栏：笔记文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_63074394/article/details/123222876

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上面一层。（层叠样式表）

1.使用CSS来修改元素的样式

第一种方式（内联样式，行内样式）：在标签内部使用style属性来设置元素的样式。存在问题：样式只能对一个标签生效，修改时不方便。注意在开发时绝对不要使用内联样式。

第二种方式（内部样式表）：将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。优点是更加方便对样式进行复用，缺点是只能对一个网页起作用，不能跨页面进行复用。

第三种方式（外部样式表）：可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。好处是只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

2.style标签里，不遵循html语法规则，遵守的是CSS的语法规则。

3.CSS中的注释/*就是内容会自动被浏览器所忽略。

4.CSS的基本语法包括：选择器声明块

选择器：通过选择器可以选中页面中的指定元素，比如P的作用就是选中页面中所有的P元素。

声明块：通过声明块来指定要为元素设置的样式，声明块会由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以冒号：连接，以分号；结尾。注意声明块最后一个分号可以省略。

5.选择器

a.元素选择器：根据标签名来选中指定的元素

语法：标签名{}

例如：p{} h1{} div{}

p{ color:red;}

b.id选择器：根据元素的id属性值选中一个元素

语法：#id属性值{}

例如：#box{} #red{}

<style>
 .blue{
         color:blue;
       }
 .abc{
         font-size:20px;
       }
</style}

<body>   
   <p class="blue  abc">今天天气真好</p>
</body>

c.类选择器：根据元素的class属性值选中一组元素

语法： .class属性值

<style>
 .blue{
         color:blue;
       }
</style}

<body>   
   <p .class="blue">今天天气真好</p>
</body>

注意：id不能重复，class可以重复；

可以同时为一个元素指定多个class属性，多个属性之间用空格隔开；

<style>
     .blue{color:blue;
     }
     .abc{font-size:20px;
     }
</style>
<body>
<p class="blue abc">今天天气真好</p>
</body>

d.通配选择器：选中页面中的所有元素

语法：*

*{color:red;}

注意：1.（交集选择器）当一个元素同时被指定多个选择器时，可以将多个选择器并排写在一起；如果有元素选择器，必须以元素选择器开头；同时满足；

语法：选择器1选择器2选择器3选择器n{}

2.（并集选择器）当同时选择符合多个选择器对应的元素时，可以将多个选择器写在一起用逗号隔开；满足其中；

语法：选择器1，选择器2，选择器3，选择器n{}

3.以上两种可以复合使用

e.关系选择器:利用父子元素关系或兄弟关系或后代祖先元素关系来为元素指定选择器

1.子元素选择器：选中指定父元素的指定子元素

语法：父元素>子元素

2.后代元素选择器：选中指定元素内的指定后代元素

语法：祖先后代

3.兄弟元素选择器：在处于拥有兄弟关系的元素之间操作

a.选择下一个兄弟，语法：前一个+后一个

b.选择下边所有的兄弟，语法：兄~弟

f.属性选择器：

1.选择含有指定属性的元素，格式：[属性名]

2.选择含有指定属性和属性值的元素，格式：[属性名=属性值]

3.选择属性值以指定值开头的元素，格式：[属性名^=属性值]

4.选择属性值以指定值结尾的元素，格式：[属性名$=属性值]

g.伪类选择器

伪类：一般使用：开头

如：first-child 第一个子元素

：last-child 最后一个子元素

：nth-child(n) 选中第n个子元素

特殊值：n表示第n个；

2n或even 表示选中偶数位的元素；

2n+1或odd表示选中奇位数的元素；

：link 用来表示没访问过的链接

：visited用来表示访问过的链接

：hover用来表示鼠标移入的状态

：active用来表示鼠标点击

注意：由于隐私原因，visited伪类只能修改链接的颜色

<style>
    a:hover{
               color:red;
               font-size:50px;
            }
</style>
<body>
   <a>今天天气真好</a>
</body>

伪元素：特殊位置的元素，一般使用：：开头

::first-letter表示第一个字母

::first-line表示第一行

::seletction表示选中的内容

::before元素的开始

::after元素最后

注意：before和after必须结合content 属性来使用

p::selection{
     background-color:yellow;
          }

6.样式的继承：继承只会发生在后代元素之中，利用继承可以将一些通用样式统一设置到共同的祖先元素上；并不是所有的样式都会被继承，比如背景相关的和布局相关的这些样式。

7.选择器的权重（优先级）：发生样式的冲突时，用哪个选择器由选择器的权重（优先级）决定

选择器的权重：内联样式 1000

id选择器 100

类和伪类选择器 10

元素选择器 1

注意：比较优先级时，需要将所有的选择器的优先级进行相加计算，优先级越高，越优先显示。

选择器的累加不会超过其最大的数量级。

如果优先级计算后相同，此时则优先使用靠下的样式。

8.单位

长度单位：像素px

百分比：可以将属性值设置为相对于其父元素属性的百分比

em：相对于元素的字体大小来计算的，1em=1font-size

rem:相对于根元素的字体大小来计算

颜色单位: RGB值：通过三种颜色的不同浓度来调配出不同的颜色（每一种颜色范围在0~255之间）

语法：RGB(红色，绿色，蓝色）

background-color:rgb(255,0,0)

RGBA:在rgb基础上增加了一个a表示不不透明度，需要四个值，前三个和rgb一样，第四个表示不透明度。

1表示完全不透明

0表示完全透明

.5表示半透明

十六进制的rgb值：语法:#红色绿色蓝色

颜色浓度范围0~ff

如果颜色两位重复可以进行简写

background-color:#ffff00
background-color:#ff0

HSL值 HSLA值：H 色相（0~360）

S 饱和度（颜色的浓度0%~100%）

L 亮度（颜色的亮度0%~100%）

乡下鲨的目光

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习选择器

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上面一层。（层叠样式表）1.使用CSS来修改元素的样式第一种方式（内联样式，行内样式）：在标签内部使用style属性来设置元素的样式。存在问题：样式只能对一个标签生效，修改时不方便。注意在开发时绝对不要使用内联样式。第二种方式（内部样式表）：将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改...
复制链接

扫一扫