CSS基础——基础中的基础

just小千

于 2021-05-20 17:00:44 发布

阅读量155

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/weixin_43207208/article/details/117083111

版权

css基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概念：CSS(Cascading Style Sheet)层叠样式表，是一门样式表语言，目的是为网页添加样式，它由选择器，声明（属性和属性的值）几部分构成

p { // 选择器
  color:red; // 声明（color是属性，red是属性的值）
}

1.选择器

CSS选择器是CSS规则的一部分，它是元素和其他部分组合起来告诉浏览器是哪个HTML元素被选为应用规则中的CSS属性值，被选择的元素，叫做选择器的对象。

选择器列表

多个使用相同样式的CSS选择器，可以合并成为一个选择器列表，选择器之间用逗号隔开

h1 {
  color:red;
}

h2 {
  color:red;
}

// h1和h2的颜色都为红色，它们的声明是一样的，所以可以将它们合并起来
h1,h2 {
  color:red;
}

使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略

h1, ..special {
  color:red;
}
// 类选择器的正确写法是(.special，多了一个'.'之后，相当于这整个选择器列表发生了错误，所以连带h1的规则也不会生效)

选择器种类

类型，类和ID选择器

// 类型选择器是在文档中选择一个HTML标签/元素进行样式化
p { // <p>元素下的字体颜色都会变成红色
  color:red;
}
// 全局选择器(*),选中文档中的所有内容（当紧随在其他元素以及邻代运算符之后时选中的是父元素中的所有内容）（它是性能最低的一个CSS选择器）


// 类选择器(.)以(.)开头，选择文档中应用了这个类的所有元素
<div class="warning"></div> // 在元素上添加class声明类
.warning { // css文件中使用对应的类选择器
  color:red;
}

// ID选择器(#)以(#)开头，和类选择器基本用法一致，匹配的是声明了id的元素,一个id只会使用一次
<div id="warning"></div>
#warning { // css文件中使用对应的ID选择器
  color:red;
}

标签属性选择器

存否和值选择器

选择器	示例	描述
`[attr]`	`a[title]`	匹配带有一个名为attr的属性的元素——方括号里的值。
`[attr=value]`	`a[href="https://example.com"]`	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
`[attr~=value]`	`p[class~="special"]`	匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
`[attr\|=value]`	`div[lang\|="zh"]`	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

子字符串匹配选择器

选择器	示例	描述
`[attr^=value]`	`li[class^="box-"]`	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
`[attr$=value]`	`li[class$="-box"]`	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
`[attr=value*]`	`li[class*="box"]`	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

伪类与伪元素

伪类是选择器的一种，它用于选择处于特定状态的元素，表现像是文档的某个部分应用了一个类一样，可帮助在标记文本中减少多余的类，使代码更灵活、更易于维护，伪类的开头为单冒号:

选择器	描述
`:active`	在用户激活（例如点击）元素的时候匹配。
`:any-link`	匹配一个链接的`:link`和`:visited`状态。
`:blank`	匹配空输入值的``元素。
`:checked`	匹配处于选中状态的单选或者复选框。
`:current` (en-US)	匹配正在展示的元素，或者其上级元素。
`:default`	匹配一组相似的元素中默认的一个或者更多的UI元素。
`:dir`	基于其方向性（HTML`dir`属性或者CSS`direction`属性的值）匹配一个元素。
`:disabled`	匹配处于关闭状态的用户界面元素
`:empty`	匹配除了可能存在的空格外，没有子元素的元素。
`:enabled`	匹配处于开启状态的用户界面元素。
`:first`	匹配分页媒体的第一页。
`:first-child`	匹配兄弟元素中的第一个元素。
`:first-of-type`	匹配兄弟元素中第一个某种类型的元素。
`:focus`	当一个元素有焦点的时候匹配。
`:focus-visible`	当元素有焦点，且焦点对用户可见的时候匹配。
`:focus-within`	匹配有焦点的元素，以及子代元素有焦点的元素。
`:future` (en-US)	匹配当前元素之后的元素。
`:hover`	当用户悬浮到一个元素之上的时候匹配。
`:indeterminate`	匹配未定态值的UI元素，通常为复选框。
`:in-range`	用一个区间匹配元素，当值处于区间之内时匹配。
`:invalid`	匹配诸如`<input>`的位于不可用状态的元素。
`:lang`	基于语言（HTMLlang属性的值）匹配元素。
`:last-child`	匹配兄弟元素中最末的那个元素。
`:last-of-type`	匹配兄弟元素中最后一个某种类型的元素。
`:left`	在分页媒体 (en-US)中，匹配左手边的页。
`:link`	匹配未曾访问的链接。
`:local-link` (en-US)	匹配指向和当前文档同一网站页面的链接。
`:is()`	匹配传入的选择器列表中的任何选择器。
`:not`	匹配作为值传入自身的选择器未匹配的物件。
`:nth-child`	匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
`:nth-of-type`	匹配某种类型的一列兄弟元素（比如，`<p>`元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
`:nth-last-child`	匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
`:nth-last-of-type`	匹配某种类型的一列兄弟元素（比如，`<p>`元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
`:only-child`	匹配没有兄弟元素的元素。
`:only-of-type`	匹配兄弟元素中某类型仅有的元素。
`:optional`	匹配不是必填的form元素。
`:out-of-range`	按区间匹配元素，当值不在区间内的的时候匹配。
`:past` (en-US)	匹配当前元素之前的元素。
`:placeholder-shown`	匹配显示占位文字的input元素。
`:playing` (en-US)	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
`:paused` (en-US)	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
`:read-only`	匹配用户不可更改的元素。
`:read-write`	匹配用户可更改的元素。
`:required`	匹配必填的form元素。
`:right`	在分页媒体 (en-US)中，匹配右手边的页。
`:root`	匹配文档的根元素。
`:scope`	匹配任何为参考点元素的的元素。
`:valid`	匹配诸如`<input>`元素的处于可用状态的元素。
`:target`	匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。
`:visited`	匹配已访问链接。

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::

选择器	描述
`::after`	匹配出现在原有元素的实际内容之后的一个可样式化元素。
`::before`	匹配出现在原有元素的实际内容之前的一个可样式化元素。
`::first-letter`	匹配元素的第一个字母。
`::first-line`	匹配包含此伪元素的元素的第一行。
`::grammar-error`	匹配文档中包含了浏览器标记的语法错误的那部分。
`::selection`	匹配文档中被选择的那部分。
`::spelling-error`	匹配文档中包含了浏览器标记的拼写错误的那部分。

关系选择器
1. 后代选择器
  
  用单个空格（）字符——组合两个选择器
2. 子代关系选择器
  
  子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配
3. 邻接兄弟
  
  邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的元素
4. 通用兄弟
  
  如果想选中一个元素不直接相邻的兄弟元素，可以使用通用兄弟关系选择器（~）

2.在HTML应用CSS

外部样式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内部样式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内联样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

2.层叠与继承

1.层叠与优先级

层叠是CSS的核心，定义了如何合并来自多个源的属性值的算法，只有css声明会参与层叠计算，包含CSS声明以外实体的@规则不参与层叠计算，但包含在大多数@规则的CSS声明是参与层叠计算的，但是包含于@keyframes的声明不参与计算，正如@font-face，它是作为一个整体参与层叠算法的筛选， @import和@charset遵循特定的算法，并且不受层叠算法影响

层叠算法首先需要过滤不同来源的全部规则，来源分为三个部分，浏览器默认样式，网页作者规定的样式，以及用户自定义样式，层叠级别从低到高（如果样式带!important那层叠级别会反过来）

优先级

在同一个来源中，又会存在不同的样式优先级，优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型数值决定。当同一个元素有多个声明的时候，优先级才会有意义。