CSS基础——基础认知知识点总结

本文链接：https://blog.csdn.net/m0_74304535/article/details/130306993

一、CSS简介

1.1 CSS概述

CSS全称为层叠样式表（Cascading Style Sheet），是种格式化网页的标准方式，用于控制设置网页的样式，页面外观美化和布局与定位。并且允许CSS样式信息与网页内容（html语言定义的内容）分离的一种技术。

二、基本用法

1、CSS语法规则

CSS写在style标签中，style标签写在head标签里面，title标签的下面。

<head>
    <title>Document</title>
    <style>
        选择器{
            属性名；属性值；
        }
    </style>
</head>

选择器：用于选择要修饰的对象
属性名：修饰对象的哪一个属性（样式），例如:颜色大小等；
属性值：样式的取值

2、CSS引入方式：

1’内嵌式:CSS在style标签中，在页面头部进行定义，对当前页面中所有符合选择器的标签都起作用。
2’行内式:使用html标签的style属性定义，只对设置style的标签起作用。

<div style="color:aquamarine;">这是div标签</div>

3’外联式:也称外部样式，使用单独的.css文件进行定义，在网页中使用link标签或@import引入

    <link rel="stylesheet" href="./试验.css">

    <style>
        @import url(./试验.css);
    </style>

3、选择器

3.1基础选择器

1’标签选择器：标签名{css属性名：；} 通过标签名，找到所有该标签类型并设置样式。
2’类选择器： .类名{css属性名：；} 通过类名，找到所有有该类名的标签，并设置样式，利用class定义类名。
注：同时调用多个类选择器时，以空格分隔。
3’id选择器: #id属性值{css属性名：：} 通过id名，找到所有含该id的标签，并设置样式。
注： id在一个页面中唯一，一个标签只能有一个id属性，且一个id只能选中一个标签。
4’通配符选择器: *{} 找到网页中所有标签，并设置样式（一般用于清除内外边距 margin 和 padding）。

3.2复合选择器（选择器进阶）

1’后代选择器（后代包括儿子，孙子，重孙）
语法：选择器1 选择器2{}，例如：div p{}。选择器1与选择器2空格分开，选择器2可以是儿子也可以是孙子，只要是元素1的后代即可。
后代选择器示例
2’子代选择器（只用于父子关系）
语法：选择器1>选择器2{}，例如h1>span{}。选择器1与选择器2大于号分开，选择器2必须是选择器1最近一级的子元素（亲儿子）。
子代选择器示例
3’并集选择器（同时选中多组标签，设置相同样式）
语法：选择器1，选择器2{}，例如p,span{}。选择器1与选择器2之间用逗号隔开。
并集选择器示例
4’交集选择器（多个选择器写在一起可以找到同时满足所有条件的标签并设置样式）
语法：选择器1选择器2{}，例如span.number{}。选择器1与选择器2之间什么都不加。
注：交集选择器中如果有标签选择器，则标签选择器写在最前面。
交集选择器示例
5’伪类选择器（选中鼠标悬停在元素上的状态，并设置样式）
语法：选择器：hover{}，例如 a：hover{}。
链接伪类选择器：

a:link	选择所有未被访问的链接
a:visited	选择所有已经被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

:focus伪类选择器：选取获得焦点的表单元素，一般用于input类表单。