CSS笔记（1）

最新推荐文章于 2024-09-26 19:50:45 发布

dont touch me！

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量73

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/m0_71067366/article/details/131554914

版权

CSS用于设置网页元素样式，包括内联样式、内部样式表和外部样式表。选择器如ID选择器(#id)、类选择器(.class)和通配选择器(*)等，用于选取元素。伪类如:hover和:active可定义元素的不同状态，伪元素如::before和::after用于创建内容。

摘要由CSDN通过智能技术生成

1.CSS简介

1)网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们看到的知识网页最上边一层

2）CSS用来设置网页中元素的样式

3）使用CSS来修改元素的样式

第一种方式：

使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，必须要一个个修改，很不方便

第二种方式：

内部样式表，将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

但是内部样式表只能对一个网页起作用，它里边的样式不能对页面进行复用

第三种方式：

外部样式表，将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件，使样式可以在不同的桌面之间进行复用

2.CSS的基本语法

1）选择器声明块

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

 <style>
        p{
            color:red;
            font-size:40px;
        }
    </style>

声明块，声明块由一个个声明组成，声明是一个名值对结构，名和值之间以 : 连接，以 ; 结尾

3.常用选择器

3.1id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{ }

例子：#box{ } #red{ }

id不能取同一个，但是class属性可以重复使用，可以通过class属性来为元素分组

#red{
color:red;
}

3.2类选择器

作用：根据元素的class属性选中其中一组元素

语法：.class属性值

可以同时为一个元素指定多个class属性

.blue{
color:blue;
}

3.3通配选择器

作用：选中页面中的所有元素

语法：*

*{
color:red;
}

3.4交集选择器

作用：选中同时复合多个条件的元素

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

注意点：

交集选择器中如果有元素选择器，必须使用元素选择器开头

3.5并集选择器

作用：同时选择多个选择器对应的元素

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

3.6关系选择器

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，一个元素的父元素也是他的祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素

1）子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

div.box>span{
color:orange;
}

2)后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先后代

div span{
color:blue;
}

3)兄弟元素选择器

作用：选择下一个兄弟元素

语法：前一个+下一个

p+span{
color:red;
}

作用：选择下边所有的兄弟

语法：兄~弟

p~span{
color:red;
}

3.7属性选择器

1）[属性名] 选择含有指定属性的元素

2）[属性名=属性值] 选择含有指定元素和属性值的元素

3）[ 属性名^=属性值] 选择属性值以指定值开头的元素

4）[属性值$=属性值]选择属性值以指定值结尾的元素

<style>
        p[title$=abc]{
            color:aqua;
        }
    </style>
</head>
<body>
    <p title="asdabc">
少年
</p>
<p title="werabc">青年</p>
</body>

5）[属性名*=属性值]选择属性值中含有某值的元素的元素

3.8伪类选择器

1）伪类用来描述一个元素的特殊形态，一般情况下都是使用 : 开头

2）:first-child 第一个子元素

3）:last-child 最后一个子元素

4）:nth-child() 选中第n个子元素

特殊值：

n 第n个 n的范围为0到正无穷

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

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

以上这些伪类都是根据所有的子元素进行排序

1) :first-of-type

2) :last-of-type

3) :nth-of-type

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

4）not()否定伪类：将符合条件的元素从选择器中去除

ul>li:not(:nth-child(3)){
color:yellow;
}

4.超链接的伪类

1）:link 用来表示没访问过的链接

2）:visited 用来表示访问过的链接

由于隐私的原因，所以visited这个伪类只能修改链接的颜色，不能修改大小等

3）:hover 用来表示鼠标移入的状态

4）:active 用来表示鼠标点击时的状态

5.伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）

伪元素使用 :: 开头

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

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

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

div::before{
content:'abc'；
color:blue;
}

dont touch me！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫