CSS概述以及各个选择器知识点总结

最新推荐文章于 2024-10-08 16:24:58 发布

L'.

最新推荐文章于 2024-10-08 16:24:58 发布

阅读量103

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_74359055/article/details/131869162

版权

CSS概述

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化

CSS引入的规则

1.语法

由两个主要的部分构成：选择器（核心），和一条或多条的声明（规则）.

例：

<style>
        /* h1是选择器 */
        h1{
            /* color和font-size是声明，同时也是属性名，后面是属性值*/
            color: blue;
            font-size: 12px;
        }
    </style>

2.CSS的三种引入规则

三种方法：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style）

第一种：内联样式（Inline style）

语法规则：

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>

🚨行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

第二种：内部样式表（Internal style sheet）

内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:

<head>
    <style type="text/css">
        选择器{
            属性1:属性值1;
            属性2:属性值2;
            属性3:属性值3;
            ....
        }
     </style>
</head>

🚨 <style> 一般位于 <head> 中的 <title> 标记后。

把CSS代码放在head便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。同时最好设置type的属性值为“text/css“，

第三种：外部样式表（External style sheet）

外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式

语法规则：

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

🚨 <like/> 标记需要放在 <head> 中，并且必须指定 <like/> 标记的三个属性。如下：

href：定义链接的外部样式表文件的URL，可以是绝对路径或相对路径。
type：定义链接的文件类型，需要制定为“text/css”，表示链接的文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表。

样式引入优先级

(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式

🚨注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS注释

注释会被浏览器忽略，可以随意编辑

以/*开始 */ 结束

基本选择器

1.元素选择器

根据元素名称来选择HTML元素。

例：

p {
text-align: center;
color: red;
}

2.id选择器

根据元素的id属性来选择特定的HTML元素。

🚨注意：id选择器在页面中只有一个，所以id选择器用于选择一个唯一的元素！

例：注意id名称不能以数字开头

#striking {
text-align: center;
color: red;
}

3.类选择器

选择特定class属性的HTML元素。写一个句点(.)字符，后面跟类名。

例：

.center {
   text-align: center;
   color: red;
}

还可以指定只有特定的 HTML 元素会受类的影响。

p.center {
  text-align: center;
  color: red;
}

HTML 元素也可以引用多个类。

<p class="center large">这个段落引用两个类。</p>

4.通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
text-align: center;
color: blue;
}

5.分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

如下：

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

分组后可以写为：

h1, h2, p {
text-align: center;
color: red;
}

组合选择器

CSS中包含了四种组合方式：

后代选择器(以空格分隔)
子元素选择器(以大于号 > 分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

1.后代选择器

用于选取某元素的后代元素。

例：

div p {
background-color: yellow;
}

2.子元素选择器

子元素只能为某元素直接/一级子元素的元素。

例：

div > p {
background-color: red;
}

3.相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。

div + p {
background-color: green;
}

4.后续兄弟选择器

选取指定元素之后的所有相邻兄弟元素。

例：

div ~ p {
background-color: orange;
}

属性选择器

1.[attribute]选择器

用于选取带有指定属性的元素。

a [target] {
background-color: yellow;
}

2. [attribute=“value”] 选择器

用于选取带有指定属性和值的元素。

a [target="_blank"] {
background-color: red;
}

3.设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

input[name="nickname"] {
  width: 150px;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 48px;
  display: block;
}