前端CSS学习笔记

最新推荐文章于 2024-11-08 16:59:14 发布

小西几啦啦啦

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量79

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_44678974/article/details/120004230

版权

本文详细介绍了CSS的基础知识，包括CSS的作用、HTML与CSS的关系、语法结构、样式引入方式（内联、内部和外部样式表）、选择器类型（标签、ID、类、后代、交集和并集选择器）以及CSS的三大特性——继承、层叠性和优先级。此外，还讲解了a标签的伪类选择器及其顺序规则，为初学者提供了全面的学习指南。

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

前端CSS学习笔记

1、认识CSS

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

2、HTML与CSS的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

3、语法

1、声明

CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。
在这里插入图片描述

2、声明块

将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{”“}”将多个CSS声明括起来，这样就构成了一个CSS声明块。
在这里插入图片描述

3、规则集

选择器：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素。

声明：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性：改变 HTML 元素样式的途径。

属性值：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

4、CSS的引入样式

1、内联样式

内联样式表就是把css代码直接写在现有的HTML标签中。

<!--1、通过内联样式设置div样式 -->
<div style="color:rgb(209, 11, 248)">我是一个div</div>

注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条样式，代码设置可以写在一起，中间用分号隔开。

2、内部样式表

将样式表编写到head中的style标签中，使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护。

<!-- 2、内部样式表 -->
    <style>
        div {
            /* 字体大小 */
            font-size: 40px;
        }
    </style>

注意：设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略。

3、外部样式表

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式。

5、CSS选择器

1、标签选择器

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。

格式：

标签名称{

属性：值；

}

 /* 标签选择器 */
 div {
		/* 字体大小 */
         font-size: 40px;
      }

注意：标签选择器选中的是当前页面中所有的标签，而不能单独的选中某一个标签

2、id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性

格式：

#id名称{

属性：值；

}

 /* id选择器 */
        #div1 {
            color: red;
        }

注意：

1、每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id

2、在同一个界面中id的名称是不可以重复的

3、在编写id选择器时一定要在id名称前面加上#

3、类选择器

作用：根据指定的类名称找到对应的标签，然后设置属性

格式：

.类名{

属性：值；

}

.div4 {
		color: purple
       }

注意：

1、每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2、在同一个界面中class的名称是可以重复的

3、在编写class选择器时一定要在class名称前面加上.

4、后代选择器

作用：找到指定的标签的所有特定的后代标签，设置属性

格式：

选择器1 选择器2{

属性:值；

}

注意：

1、后代选择器必须要用空格隔开

2、后代选择器不但可以使用标签名称，还可以使用其他选择器

3、后代选择器可以使用空格一直延续下去

5、交集选择器

作用：给所有的选择器选中的标签中，相交的那部分标签设置属性

格式：

选择器1选择器2{

属性:值；

}

注意：

1、选择器和选择器之间没有任何连接符号

2、选择器可以使用标签名称、id名称、class名称

6、并集选择器

作用：给所有的选择器选中的标签设置属性

格式：

选择器1,选择器2{

属性:值；

}

7、序选择器(结构伪类选择器)

1、同类别中的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child 选中同级别中的的第n 个标签

2、同级别同类型中的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中的同类型的最后一个标签

8、a标签的伪类选择器

a标签存在的状态：

1、默认状态，从来没有被访问过

2、被访问过的状态

3、鼠标长按状态

4、鼠标悬停在a标签的状态

格式：

:link 修改从未被访问过的样式

:visited 修改被访问过的样式

:hover 修改鼠标悬停在a标签上的样式

:active 修改鼠标长按的样式

 /* 给a标签从未访问过的时候的样式*/
        a:link {
            color: red;
            text-decoration: none
        }

        /* 已经被访问 */
        a:visited {
            color: cyan
        }

        /* 鼠标悬停 */
        a:hover {
            color: greenyellow
        }

        /* 鼠标长按 */
        a:active {
            color: blue
        }

注意：a标签的伪类选择器如果同时出现的话，有严格的顺序要求：

默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active