CSS|笔记CSS CSS是什么样式规则 CSS是如何工作的选择器那条规则生效初始值 CSS求值:一个元素的样式

CSS

充分利用MDN和W3C CSS规范

CSS是什么

Cascading Style Sheets
用来定义页面元素的样式

样式规则

h1 {
  color: orange;
  font-size: 24px;
}

h1:选择器 Selector

color:属性 Property

white:属性值 Value

font-size: 24px;:声明 Declaration

CSS是如何工作的

选择器

找出页面中的元素,以便给他们买设置样式

类选择器:class
通配选择器:*
id选择器:id id的值在页面中一般是唯一的
元素类型选择器(标签选择器):eg. p
伪类选择器: 元素自身的状态
- 状态伪类
  - :link 选择所有未被访问的超链接
  - :visited 选择所有已访问的超链接
  - :disabled 选择所有被禁用的表单元素
    - 当一个表单元素被设置为disabled属性时，它会变得不可交互，:disabled伪类选择器可以用来为这些元素设置样式，以表明它们的状态。
  - :hover 选择鼠标悬停在其上的元素
- 结构性伪类
  - :first-child 选择其父元素的第一个子元素
  - :nth-child( ) 根据它们在父元素中的位置选择特定的子元素
伪元素选择器:可以在元素的内容之前,之后添加新的元素元素内容
- ::first-line 选择元素的第一行文本
- ::first-letter 选择元素的第一个字母
- ::before 在选定元素的内容前面插入新的内容
后代选择器:eg. .parent .child
子代选择器:eg. .parent > .child
相邻兄弟选择器:eg. .child + .sibling
通用兄弟选择器:eg. .child ~ .sibling
属性选择器:eg. [disabled]
选择器组:选择器的集合

笔记:

后代选择器

由两个选择器组成，它们之间用空格分隔。这种选择器的作用是选择作为第一个选择器指定元素的后代的元素。

在这个例子中：

.parent 是一个类选择器，用于选择所有具有 parent 类的 HTML 元素。
.child 也是一个类选择器，用于选择所有具有 child 类的 HTML 元素。

当这两个选择器组合在一起时，.parent.child 会选择所有在具有 parent 类的元素内部的具有 child 类的元素，不论它们之间的层级有多深。

子代选择器

是CSS中的一种选择器，它用于选择作为特定父元素的直接子元素的元素。子代选择器使用大于号（>）来表示。

子代选择器只影响直接子元素，不会影响到更深层次的后代元素。这与后代选择器（使用空格分隔）不同，后代选择器会选择所有后代元素，不论它们在DOM树中的深度如何。

相邻兄弟选择器

是CSS中的一种选择器，用于选择紧随指定元素之后的相邻兄弟元素。这种选择器使用加号（+）来表示。

假设你有以下HTML结构：

<div class="parent">
    <div class="child">第一个子元素</div>
    <div class="sibling">第二个子元素</div>
    <div class="other-sibling">第三个子元素</div>
</div>

你可以使用相邻兄弟选择器来选择.child元素之后的立即相邻的兄弟元素：

.child + .sibling {
    color: red;
}

在这个例子中，.child + .sibling选择器会选择所有紧随.child类的元素之后的.sibling类的元素。因此，只有第二个<div>元素的文本颜色会被设置为红色。

注意事项:

相邻兄弟选择器只影响紧跟在指定元素之后的元素。
如果有多个.child元素，每个.child元素之后的立即相邻兄弟元素都会被选择。
相邻兄弟选择器不考虑元素之间的其他类型的兄弟元素，只考虑直接相邻的元素。

这种选择器在布局设计中非常有用，特别是当你需要根据元素在DOM树中的位置来应用特定的样式时。

通用兄弟选择器

是CSS中的一种选择器，用于选择指定元素之后的所有兄弟元素，而不仅仅是紧随其后的相邻兄弟。这种选择器使用波浪号（~）来表示。

假设你有以下HTML结构：

<div class="parent">
    <div class="child">第一个子元素</div>
    <div class="sibling">第二个子元素</div>
    <div class="sibling">第三个子元素</div>
    <div class="other-sibling">第四个子元素</div>
</div>

你可以使用通用兄弟选择器来选择.child元素之后的所有.sibling类的元素：

.child ~ .sibling {
    color: red;
}

在这个例子中，.child ~ .sibling选择器会选择所有.child类的元素之后的所有.sibling类的元素。因此，第二个和第三个<div>元素的文本颜色都会被设置为红色，而不管它们之间是否有其他类型的兄弟元素。

注意事项:

通用兄弟选择器影响指定元素之后的所有匹配的兄弟元素。
如果有多个.child元素，每个.child元素之后的所有匹配的兄弟元素都会被选择。
这种选择器不考虑元素之间的其他类型的兄弟元素，只考虑所有后续的匹配元素。

通用兄弟选择器在处理DOM结构中元素的样式时非常有用，特别是当你需要根据元素的相对位置来应用样式，而不仅限于紧随其后的相邻元素。

属性选择器

是CSS中的一种选择器，它允许你根据元素的属性及其值来选择元素。

基本语法：

[attribute] {
    /* 样式规则 */
}

这里，attribute是你想要匹配的属性的名称。这个选择器会选择所有具有指定属性的元素，不管属性的值是什么。

如果你想要匹配具有特定属性值的元素，你可以使用以下语法：

[attribute="value"] {
    /* 样式规则 */
}

这里，attribute是属性的名称，value是属性的值。这个选择器会选择所有属性名为attribute且属性值为value的元素。

属性选择器还支持以下几种匹配方式：

存在属性：选择具有指定属性的元素，不论其值是什么。
```
[target] {
    /* 样式规则 */
}
```
完全匹配属性值：选择属性值完全等于指定值的元素。
```
[target="_blank"] {
    /* 样式规则 */
}
```
部分匹配属性值：选择属性值包含指定文本的元素。
```
[title~="warning"] {
    /* 样式规则 */
}
```
开始匹配属性值：选择属性值以指定文本开始的元素。
```
[href^="https"] {
    /* 样式规则 */
}
```
结束匹配属性值：选择属性值以指定文本结束的元素。
```
[href$=".pdf"] {
    /* 样式规则 */
}
```
包含指定字符的属性值：选择属性值包含指定字符的元素。
```
[a|="b"] {
    /* 样式规则 */
}
```

这些选择器可以帮助你更精确地定位页面上的元素，并根据它们的属性应用样式。例如，你可以使用属性选择器来改变所有带有class="active"的元素的样式，或者选择所有href属性以.pdf结尾的链接。

颜色

-RGB

rgb(143, 172, 135) 0-255
#8fac87 把0-255转成十六进制的字符

-HSL

hsl(211, 71%, 61%)

调亮暗比较方便

-关键字

eg.white

alpha 透明度

字体 font-family

h1 {
    font-family: Optima, Georgia, serif;
}
body {
  font-family: Helvetica, sans-serif;
}

Optima, Georgia, serif:字体族从前到后依次进行浏览器适配

serif,sans-serif:通用字体族

通用字体族

一种风格,一种分类

中英文混合时:尽量把英文的字体族写在中文的前面

Web Fonts

想严格的按照设计的要求展现字体

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

对于中文的字体文件需要进行裁切因为文件过大

font-size

关键字
- small,medium,large
长度
- px,em
百分数
- 相对于父元素字体大小

font-style

.normal {
  font-style: normal;//正常
}
.italic {
  font-style: italic;//斜体
}

font-weight 字体粗细

font-weight:100;//可写100-900

400:normal

700:blold

字体粗细跟字体相关,有的字体本身不支持

line-height 行高

line-height: 1.6;//字体的1.6倍
line-height: 45px;//px

font

font: weight size/height family;

h1{
    font: bold 14px/1.7 Helvetica, sans-serif;
}

text-align

设置文本内容的水平对齐方式。

常见值：

left：文本向左对齐，这是默认值。
```
p {
    text-align: left;
}
```
right：文本向右对齐。
```
p {
    text-align: right;
}
```
center：文本居中对齐。
```
p {
    text-align: center;
}
```
justify：文本两端对齐，常用于报纸和杂志排版，使得每一行的左右两边都紧贴着容器的边缘。
```
p {
    text-align: justify;
}
```
start：文本对齐到容器的起始边缘。在LTR（左到右）语言中，这等同于 left，在RTL（右到左）语言中，这等同于 right。
```
p {
    text-align: start;
}
```
end：文本对齐到容器的结束边缘。在LTR语言中，这等同于 right，在RTL语言中，这等同于 left。
```
p {
    text-align: end;
}
```
match-parent：在CSS3中引入，文本对齐方式将与其父元素的对齐方式相匹配。这个值在大多数浏览器中尚未得到广泛支持。
```
p {
    text-align: match-parent;
}
```

spacing

letter-spacing：用于设置字符间距，即字符之间的水平距离。

css
```
p {
    letter-spacing: 2px; /* 字符间距为2px */
}
```
word-spacing：用于设置单词间距，即单词之间的水平距离。

css复制
```
p {
    word-spacing: 4px; /* 单词间距为4px */
}
```

text-indent

用于设置首行文本的缩进。

p {
    text-indent: 20px; /* 首行文本缩进20px */
}

text-decoration

用于设置文本的装饰效果

常见值：

none：没有任何装饰。
```
p {
    text-decoration: none;
}
```
underline：文本显示下划线，这是链接 <a> 标签的默认样式。
```
p {
    text-decoration: underline;
}
```
overline：文本显示上划线。
```
p {
    text-decoration: overline;
}
```
line-through：文本显示删除线，通常用于表示删除或不再有效。
```
p {
    text-decoration: line-through;
}
```
initial：设置为默认值。
```
p {
    text-decoration: initial;
}
```
inherit：从父元素继承 text-decoration 属性的值。
```
p {
    text-decoration: inherit;
}
```

text-decoration 属性也可以接受多个值，例如：

p {
    text-decoration: underline overline line-through;
}

这将使 <p> 元素的文本同时显示下划线、上划线和删除线。

此外，text-decoration 还有几个相关的属性，允许更精细的控制：

text-decoration-color：设置文本装饰的颜色。

p {
    text-decoration: underline;
    text-decoration-color: red;
}

text-decoration-line：设置文本的装饰类型，可以是 none、underline、overline、line-through 或它们的组合。
```
p {
    text-decoration-line: underline line-through;
}
```
text-decoration-style：设置文本装饰的样式，可以是 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。
```
p {
    text-decoration: underline;
    text-decoration-style: dashed;
}
```

white-space

用于控制元素内的空白字符如何处理以及如何处理换行。这个属性对于文本内容的显示和布局非常重要，尤其是在处理预格式化文本或需要控制文本换行行为时。

常见值：

normal：默认值。连续的空白符会被合并，文本会在遇到换行符、<br>元素或到达容器边界时换行。
```
p {
    white-space: normal;
}
```
nowrap：文本不会换行，即使在容器边界也会继续在同一行显示，直到遇到 <br> 元素或文本结束。
```
p {
    white-space: nowrap;
}
```
pre：保留空白符，文本仅在换行符、<br>元素或文本结束时换行。这类似于 <pre> 元素的行为。
```
p {
    white-space: pre;
}
```
pre-wrap：保留空白符，并且文本会在容器边界处换行，同时保留换行符和空白符的影响。
```
p {
    white-space: pre-wrap;
}
```
pre-line：合并空白符，但是保留换行符的影响。这会合并空格和制表符，但是保留换行符。
```
p {
    white-space: pre-line;
}
```
break-spaces：在CSS3中引入，允许在任何连续的空白字符处换行，包括空格。
```
p {
    white-space: break-spaces;
}
```

哪条规则生效

<article>
    <h1 class="title">国家公园</h1>
</article>

<style>
   .title {
        color: blue;
    }
    article h1{
        color: red;
    }
</style>

取决于选择器的特异度

id(#)>(伪)类(.)>标签(E)

实现复用

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

字体等属性会自动继承其父元素的计算值,跟盒模型相关的(例如宽高)则不会继承

显示继承

使用inherit来强制继承。

.parent {
    margin: 10px;
}
.child {
    margin: inherit; /* 子元素将继承父元素的外边距 */
}

初始值

CSS中,每个属性都有一个初始值
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color: initial;

CSS求值:一个元素的样式是怎么被计算出来的

布局(Layout)是什么

确定内容的大小和位置
依据元素,容器,兄弟节点和内容等信息来计算

相关技术

常规流
- 块级
  - Block Level Box
  - 不和其它盒子并列摆放
  - 适用所有的盒模型属性
  - 行级元素
    - 生成块级盒子
    - body,article,div,main,h1,ul等
    - display:block;
- 行级
  - Inline Level Box
  - 和其他行级盒子一起放在一行或拆开成多行
  - 盒模型中的width,height不适用取决于里面的内容大小
  - 行级元素
    - 生成行级盒子
    - 内容分散在多个行盒中
    - span,em,strong等
    - display:inline
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

常规流 Normal Flow

根元素,浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内(in-flow)

常规流中的盒子,在某中排版上下文中参与布局

行级排版上下文(IFC)

只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时,换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开float元素

      <div>
        This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
        <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
        And <em>Inline Block</em>
      </div>
      
      <style>
        div {
          width: 10em;
          overflow-wrap: break-word;
          background: #411;
        }
      
        em {
          display: inline-block;
          width: 3em;
          background: #33c;
        }
      </style>

块级排版上下文(BFC)
- 某些容器会创建一个BFC
- 例如:根元素,浮动,相对定位,inline-block,Flex子项,Grid子项,overflow值不是visible的块盒,display:flow-root
- BFC内的排版规则
  - 盒子从上到下摆放
  - 垂直margin合并
  - BFC内盒子的margin不会与外面的合并分属于不同的BFC
  - BFC不会和浮动元素重叠
- 既有行级元素又有块级元素:生成匿名盒子
```
<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>
```
Table排版上下文

Flex排版上下文

一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

Flexibility

可以设置子项的弹性:当容器有剩余空间时,会伸展;容器空间不够时,会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

      <div class="container">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
      </div>
      
      <style>
        .container {
          display: flex;
        }
      
        .a, .b, .c {
          width: 100px;
        }
      
        .a {
          flex-grow: 2;
        }
      
        .b {
          flex-grow: 1;
        }
      </style>

Grid排版上下文
- display:grid 使元素生成一个块级的Grid容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
- grid line网格线

浮动 float

实现字体环绕图片

<section>
    <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
    <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
    </p>
</section>
  
<style>
    img {
        float: left;
    }

    p {
        font-size: 20px;
        line-height: 1.8;
    }

position属性

static:默认值,非定位元素
relative:相对自身原本位置偏移,不脱离文档流
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right 设置偏移长度
- 流内其它元素当它没有偏移一样布局
absolute:绝对定位,相对非static 祖先元素定位
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
fixed:相对于窗口绝对定位

margin collapse

间距合并:取最大值而不是相加

<div class="a"></div>
<div class="b"></div>
<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

    .b {
      background: coral;
      height: 100px;
      margin-top: 100px;
  }
</style>

box-sizing:border-box

overflow

用于设置当元素的内容超出其指定大小（宽度或高度）时如何处理溢出的内容。

常见值：

visible：默认值。溢出的内容不会被裁剪，而是会显示在元素框外面。
```
div {
    overflow: visible;
}
```
hidden：溢出的内容会被裁剪，并且不会显示。
```
div {
    overflow: hidden;
}
```
scroll：无论内容是否溢出，元素都会提供滚动条以便查看溢出的内容。
```
div {
    overflow: scroll;
}
```
auto：如果内容溢出，浏览器会决定是否显示滚动条。在大多数现代浏览器中，这通常意味着只有在需要时才会显示滚动条。
```
div {
    overflow: auto;
}
```

overflow 属性可以有两个轴向的值：overflow-x 和 overflow-y，允许你分别控制水平和垂直方向上的溢出行为。例如：

div {
    overflow-x: hidden; /* 水平方向上的溢出内容被裁剪 */
    overflow-y: scroll; /* 垂直方向上的溢出内容提供滚动条 */
}

display属性

block:块级盒子
inline:行级盒子
inline-block:本身是行级,可以放在行盒中;作为一个整体不会被拆散成多行
none:排版时完全被忽略