理解 CSS | 青训营笔记

北冥_有鱼
89 阅读16分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

CSS是什么?

  • Cascading Style Sheets

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
h1 {
    color: white;
    font-size:14px;
}

在页面中使用CSS

< ! --外链―->
<link rel= " stylesheet" href= " / assets/ style.css" >
<!-—嵌入——>
< style>
    li {margin : 0 ;list- style : none;}
    p {margin : 1 em0 ;}
</ style>
<!——内联-―>
<p style= " margin: 1em 0 " >Example Content</ p>
​

CSS是如何工作的

img

选择器 Selector

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

  • 使用多种方式选择元素

    • 按照标签名、类名或id
    • 按照属性
    • 按照 DOM树中的位置

简单选择器

CSS 元素选择器

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

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

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

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

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

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

CSS 通用选择器

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

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

CSS 分组选择器

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

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

属性选择器

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

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

伪类选择器

伪类用于定义元素的特殊状态。

锚伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
​
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
​
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
​
/* 已选择的链接 */
a:active {
  color: #0000FF;
}
​

CSS - :first-child 伪类

p:first-child {
  color: blue;
}

所有css伪类

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 input 元素。
:disabledinput:disabled选择每个被禁用的 input 元素。
:emptyp:empty选择没有子元素的每个 p 元素。
:enabledinput:enabled选择每个已启用的 input 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 p 元素。
:first-of-typep:first-of-type选择作为其父的首个 p 元素的每个 p 元素。
:focusinput:focus选择获得焦点的 input 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 input 元素。
:invalidinput:invalid选择所有具有无效值的 input 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 p 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 p 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 p 元素的每个 p 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非 p 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 p 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个p元素，从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个p元素的每个p元素，从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 p 元素的每个 p 元素。
:only-of-typep:only-of-type选择作为其父的唯一 p 元素的每个 p 元素。
:only-childp:only-child选择作为其父的唯一子元素的 p 元素。
:optionalinput:optional选择不带 "required" 属性的 input 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 input 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 input 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 input 元素。
:requiredinput:required选择指定了 "required" 属性的 input 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 input 元素。
:visiteda:visited选择所有已访问的链接。

组合器选择器

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

div p {
  background-color: yellow;
}

子选择器

子选择器匹配属于指定元素子元素的所有元素。

div > p {
  background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

div + p {
  background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于

元素的同级元素的所有

元素：

div ~ p {
  background-color: yellow;
}

CSS RGB 颜色

RGB 值

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

RGBA 值

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

RGBA 颜色值指定为：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

CSS字体

通用字体族

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

font-size

  • 关键字

    • small . medium 、 large

  • 长度

    • px、em

  • 百分数

    • 相对于父元素字体大小

font-style

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

font-weight

font-weight 属性指定字体的粗细

line-height

line-height 属性用于指定行之间的间距

letter-spacing

letter-spacing 属性用于指定文本中字符之间的间距。

word-spacing

word-spacing 属性用于指定文本中单词之间的间距。

white-space

white-space 属性指定元素内部空白的处理方式。

文本对齐

text-align 属性用于设置文本的水平对齐方式。

h1 {
  text-align: center;
}
​
h2 {
  text-align: left;
}
​
h3 {
  text-align: right;
}

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

img.top {
  vertical-align: top;
}
​
img.middle {
  vertical-align: middle;
}
​
img.bottom {
  vertical-align: bottom;
}

CSS优先级

内联样式 > 内部样式 > 外部样式

选择器的优先级

选择器权重代码
标签选择器1div{}
类选择器10.text{}
伪类选择器10:hover{}
伪元素选择器10:first-line{}
属性选择器10[value]{}
id选择器100#text{}

!important

!important修饰的样式具有最高的优先级，不论是定义在内部、外部还是内联样式中，它的优先级都是最高的。

CSS继承

有继承性的属性

1、字体系列属性

font、font-size、font-family、font-style、font-variant、font-stretch、font-size-adjust

2、文本系列属性

text-algin、text-indent、line-height、word-spacing、letter-spacing、text-transform、color、direction

3、可见属性

visiblility

4、表格布局属性

caption-side、border-callapse、border-spacing、empty-cells、table-layout

5、列表属性

list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性

quotes

7、光标属性

cursor

8、页面样式属性

page、page-break-inside、windows、orphans

9、声音样式属性

speak、speak-punctuation、speak-numeral、speak-header、speech-rate、

volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

不可继承属性

1、显示隐藏属性

display

2、盒模型属性

宽 widht，高 height，内边距 padding，外边距margin

3、背景属性

背景颜色background-color，图片background-image，位置background-position，大小background-size，是否重复repeat

4、文本属性

vertical-align、text-decoration、white-space空白符处理

5、定位属性

float、chear、top、right、bottom、min-、max-

6、生成内容属性

content、content-reset、content-increment

7、页面样式属性

size、page-break-before、page-break-after

初始值

  • CSS中，每个属性都有一个初始值

    • background-color的初始值为transparent
    • margin-left的初始值为0

  • 可以使用initial关键字显式重置为初始值

    • background-color: initial

CSS 求值过程

img

Layout布局

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

盒模型

box-sizing: content-box

yyp6rxs2.bmp

width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其它属性确定
  • 百分数相对于容器的content box宽度

height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的content box高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色

  • 三种属性

    • border-width
    • border-style
    • border-color

  • 四个方向

    • border- top
    • boder-right
    • border-bottom
    • border-left

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

box-sizing: border-box

gjjkfeze.bmp

css的块级元素和行级元素

块级元素

  • 每个块级元素都是独自占一行。
  • 元素的高度、宽度、行高和边距都是可以设置的。　　
  • 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）

行级元素

  • 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
  • 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。

display属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散或多行
  • none 排版时完全被忽略

行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display: flow-root;

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

Flex Box是什么?

  • 一种新的排版上下文

  • 它可以控制子级盒子的:

    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和维直方同的对齐
    • 是否允许折行

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

  • flex-start：

    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：

    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：

    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：

    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：

    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

  • auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex

flex 属性用于指定弹性子元素如何分配空间。

  • auto: 计算值为 1 1 auto
  • initial: 计算值为 0 1 auto
  • none：计算值为 0 0 auto
  • inherit：从父元素继承
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。

Flexibility

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

display: grid

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

position属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非static祖先元素定位
  • fixed 相对于视口绝对定位

position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top 、left 、 bottom .right设置偏移长度
  • 流内其它元素当它没有偏移一样布局

position: absolute

  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
avatar
文章
阅读
粉丝