乐趣区

关于css:CSS-笔记

jiezi

CSS

CSS，或 Cascading Style Sheets（层叠样式表或级联样式表），用来给浏览器增加款式。

引入 CSS 的形式 Import

内联 Inline Style

应用 style 属性来引入 CSS

<h1 style="color:blue;"></h1>

嵌入 Embedded Style

在 <head> 标签里应用 <style> 标签

<head>
  <style>
      h1 {color: blue;}
    </style>
</head>

外联 External Style Sheets

把 HTML 代码和 CSS 代码别离存储到两个文件中，在 <head> 标签中通过 <link> 标签引入 CSS

<link rel="类型" href="地位" type="text/css">

CSS 规定的组成

selector {property: value;  /* declaration */}

其中 selector 为选择器，declaration 为申明，property 为申明中的属性，value 为申明的属性值。

选择器 Selector

每个元素的款式规定都应该有开始和完结大括号（{ 和 }）。还须要确保元素的款式定义在开始和完结款式标签之间，并且每条款式规定都以分号 ; 完结。

通用选择器 Universal Selector

应用 * 来抉择所有元素，称为通用选择器或通配符。

* {color: blue;}

元素 / 类型选择器 Element/Type Selector

元素选择器或者类型选择器 () 抉择 HTML 元素。

h2 {color: green;}

类选择器 Class Selector

.blue-text {color: blue;}
<h2 class="blue-text">

CSS 的 class 具备可重用性，可利用于各种 HTML 元素。

留神:

  • 在 CSS style 元素里，class 名以一个句点结尾。在 HTML 元素的 class 属性中，class 名的结尾没有 .。
  • 不能用数字结尾命名类或者 ID。
  • 即便某个 HTML 元素有多个类，CSS 选择器只是其中一个，依然会匹配该元素。

记得在一个元素上能够同时利用多个 class，应用空格来分隔不同 class 即可，例如：

<img class="class1 class2">

ID 选择器 ID Selector

#red {color: red;}

每一个 HTML 元素都有一个 id 属性。

应用 id 的益处：通过 id 选择器来扭转单个元素的款式。

依据标准，id 属性应是惟一的。只管浏览器并非必须执行这条标准，但这是宽泛认可的最佳实际。

<h2 id="red"></h2>

留神在 style 标签里，申明 class 的时候必须在名字前插入 . 符号。同样，在申明 id 的时候，也必须在名字前插入 # 符号。

如果浏览器遇到多个 id，css 规定仍然会失效。然而，任何具备 id 属性的元素应该具备惟一的值。

属性选择器 Attribute Selector

应用 [attr=value] 属性选择器来批改款式。这个选择器应用特定的属性值来匹配和设置元素款式。

属性修改器能够和正则表达式配合。

例如，上面的代码会扭转所有 type 为 radio 的元素的外边距。

[type='radio'] {margin: 20px 0px 20px 0px;}

也能够匹配一个属性，不针对属性值。

[type] {margin: 20px 0px 20px 0px;}

加上 s 来辨别大小写，i 疏忽大小写：

[data-type='primary' s] {color: red;}

分组选择器 Grouping Selector

能够用逗号宰割多个选择器：

strong,em,.my-class,[lang] {color: red;}

伪类选择器 Pseudo Class

伪类

伪类是能够增加到选择器上的关键字，用来抉择特定状态的元素。

伪类应用单个冒号：:

a:hover {color: blue;}
/* 这条规定的作用是：当光标放在超链接上时，超链接显示蓝色 */

a:visited {color: pink;}
/* 这条规定的作用是：当拜访超连贯后，超链接显示粉色 */

p:nth-child(even) {color: red;}
/* 这条规定的作用是：抉择所有的偶数段落，把文本色彩设置为红色 */

伪元素

伪元素应用两个冒号：::。

::before 创立一个伪元素，它是所选元素的第一个子元素；::after 创立一个伪元素，它是所选元素的最初一个子元素。

::before 和 ::after 必须配合 content 来应用。这个属性通常用来给元素增加内容诸如图片或者文字。只管有时 ::before 和 ::after 是用来实现形态而非文字，但 content 属性依然是必须的，此时它的值能够是空字符串。

例：

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

在下面的例子里，class 为 heart元素的 ::before 伪类增加了一个黄色的长方形，长方形的高和宽别离为 50px 和 70px。这个矩形有圆角，因为它的 border-radius为 25%，它的地位是相对地位，位于离元素右边和顶部别离是 5px、50px 的地位。

不过，伪元素不限于插入内容。您还能够应用它们来定位元素的特定局部。例如，假如您有一个列表，则能够应用 ::marker 为列表中的每个我的项目符号点（或数字）设置款式

/* Your list will now either have red dots, or red numbers */
li::marker {color: red;}

您还能够应用 ::selection 为用户突出显示的内容设置款式。

::selection {
  background: black;
  color: white;
}

简单选择器

简单选择器实现更精准的定位。

只能向下级联，抉择子元素，而不能向上抉择父元素。

连结符 Combinator

连结符位于两个选择器之间。

后辈连结符 Descendant combinator

这种连结符用于定位子元素，应用空格 。

后辈连结符是递归的。

p strong {color: blue;}

/* 这段代码只匹配 p 元素的 strong 子元素 */
下一同级 / 兄弟连结符 Next sibling combinator

应用 + 抉择在同一个父元素下，紧跟在另一元素之后的元素。

p + strong {color: blue;}
后继兄弟连结符 Subsequent-sibling combinator

应用 ~ 抉择在同一父元素下的，某个元素后的元素。

能够配合应用 :checked 伪类发明一个纯 CSS switch 元素。

:checked ~ .toggle__decor {background: rebeccapureple;}
孩子选择器 Child combinator

孩子选择器或间接后辈选择器应用 > 限度连结符仅仅利用于间接后辈上。

组合选择器 Compound selector

能够把选择器组合：

a.my-class {color: red;}

/* 抉择具备 my-class 类的超链接 */

级联 Cascade

级联是一种解决当多个 CSS 规定利用于一个 HTML 元素产生抵触时的算法。

级联由 4 局部组成：

  • 地位和秩序：CSS 规定呈现的秩序
  • 优先级（Specificity）：决定哪个 CSS 选择器有最强的匹配
  • 起源（Origin）：确定 CSS 的起源，例如：浏览器格调，浏览器扩大或者本人编写的 CSS
  • 重要性：有些 CSS 规定比其余要更加优先，例如：!important。

地位和秩序

  • 对于多个雷同模式的选择器规定，最初一个申明的失效。因为浏览器是从上往下读取的。
  • 在 HTML 中多个 link 标签链接 CSS 文件，最初一个 link 标签失效。style 标签同理。
  • 如果 style 标签申明在 link 标签之前，那么 link 标签失效。
  • 内联 style 属性会笼罩除了 !important 之外所有的规定。
  • 同一选择器下的多条同种规定，最初一条规定失效。

优先级

使用权重或者评分机制计算哪个选择器具备最高的优先性。

  • 同一元素的类选择器比单纯的类型选择器更优先，即便类型选择器在类选择器上面申明。
  • id 选择器的优先级更高，会笼罩其余间接利用的规定。所以个别不应用 id 选择器。

优先级计算是累积的，每种选择器都有特定的分数，把分数叠加就是优先级的分数。

CSS 选择器应该尽可能简略。

优先级评分：

  • 通用选择器 *：0 分
  • 元素或者伪元素选择器：1 分

  • 类，伪类，属性选择器：10 分

    • :not() 伪类自身不加分，然而传入的参数加分，例如：:not(.my-class) 为 10 分

  • ID 选择器：100 分

    • 留神是 ID 选择器而不是带有 id 的属性选择器
  • 内联 style 属性：1000 分
  • !important：10000 分，这是单个条目能失去的最大分

分数雷同的状况下，会利用最上面的 CSS 规定。

起源

页面的 CSS 并不仅仅来源于程序员编写的 CSS 代码。

起源的优先级如下(从最低到最高优先级)：

  • 用户代理为根底的款式：浏览器默认利用到 HTML 的款式
  • 本地用户款式：操作系统层级，例如，根底字体大小，或者削弱动态效果等；也有可能是浏览器扩大增加的款式
  • 编写的 CSS：本人编写的 CSS
  • 应用了 !important
  • 本地用户款式应用 !important
  • 用户代理应用 !important

重要性

重要性的优先级(从最低到最高优先级)：

  • 惯例规定，例如字体大小，背景，文本色彩
  • animation 规定
  • !important 规定
  • transition 规定

动画和转换的优先级很高，因为它们的预期成果就是扭转视觉。

款式继承 Inheritance

根元素 html 不会继承任何款式，因为它是第一个元素。

每一个 HTML 页面都含有 body 元素，能够在 body 元素上应用 CSS 款式。

设置 body 元素款式的办法跟设置其余 HTML 元素款式的形式一样，并且其余元素也会继承 body 中所设置的款式。

继承是自上而下的。

并不是所有的 CSS 属性都是能够继承的。

每一个 HTML 元素的每个 CSS 属性都有初始值。初始值并不会继承而是作为级联失败时的默认属性。

应用 inherit 关键字使任何属性继承父元素的值。

.my-component strong {font-weight: inherit;}

应用 initial 关键字复原属性值为默认值。

aside strong {font-weight: initial;}

当某属性是可继承时，unset 关键字和 inherit 等同；反之和 initial 等同。因为记住哪些 CSS 属性是可继承的很难，所以 unset 能够发挥作用。

如果又给 p 退出了一些属性，为了防止手动调整特定的 unset，能够增加 all 属性，保障所有值都是不继承的。

/* p 的全局款式 */
p { 
  margin: 2em;
  color: goldenrod;
}

/* 重设 aside 中 p 的款式 */
aside p {
  margin: unset;
  color: unset;
}

/* 重设 aside 中 p 的所有款式 */
aside p {
  margin: unset;
  color: unset;
  all: unset;
}

款式的优先级 Prioritize

! important > 内联 > id 选择器 > 多个 class 中申明在最初的款式(CSS) > class 选择器 > 继承（body）

注：

  • HTML 元素里利用的 class 的先后顺序无关紧要。
  • 然而，在 <style> 标签外面申明的 class 程序非常重要，之后的申明会笼罩之前的申明。第二个申明的优先级始终高于第一个申明。因为：浏览器是由上到下读取 CSS 的。这就意味着，如果发生冲突，浏览器将会利用最初申明的款式。它会查看 CSS 申明程序，而不是 HTML 应用程序！
  • id 选择器无论在 style 标签的任何地位申明，都会笼罩 class 申明的款式。

  • 应用 CSS 库，CSS 库中的款式兴许会意外笼罩原有 CSS 款式。能够应用 !important 保障 CSS 款式不受影响

    color: red !important;

单位 Unit

px 值，即像素。像素是一个长度单位，它通知浏览器应该如何调整元素的大小和地位。

单位长度的类型能够分成 2 种：绝对和相对。

有些单位长度选项是绝对视窗大小来扭转值的，这种设定合乎响应式网页设计的准则。

相对单位 Absolute Unit

相对单位与长度的物理单位相干。例如，in 和 mm 别离代表着英寸和毫米。相对长度单位会靠近屏幕上的理论测量值，不过不同屏幕的分辨率会存在差别，这就可能会造成误差。

绝对单位 Relative Unit

绝对单位长度，比方 em 和 rem，它们的理论值会依赖其余长度的值而决定。比方 em 的大小基于元素字体的大小。如果应用它来设置 font-size 值，它的值会追随父元素的 font-size 值来扭转。

色彩 Color

示意

预指定色彩

预指定色彩（predefined color）

color: blue;

black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua

16 进制编码 Hex

十六进制编码，简称 hex。

Hexadecimals（或 hex）基于 16 位数字，它包含 16 种不同字符。0-9 的符号代表 0 到 9 的值。A、B、C、D、E、F 代表 10 至 15 的值。在 CSS 外面，应用 6 个十六进制的数字来代表色彩，每两个数字控制一种色彩，别离是红（R）、绿（G）、蓝（B）。例如，#000000 代表彩色，同时也是最小的值。

红色的 #FF0000 十六进制编码能够缩写成 #F00。在这种缩写模式里，三个数字别离代表着红（R）、绿（G）、蓝（B）三原色。

不能混用缩写和全称。

color: #000000;
color: #F00 /* 缩写 */
color: #F000 /* error */

RGB

RGB 值只须要指定每种色彩的亮度大小，数值范畴从 0 到 255；或者用百分制示意。

彩色是(0,0,0)，红色是(255,255,255)。

RGB 后退出 \ 示意透明度。

RGB 与 HEX 示意是等价的。

color: rgb(0,0,0)

color: rgb(0%,0%,0%)

color: rgb(0 0 0 / 0.5)

RGBA

rgba 代表：
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度

RGB 值能够取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其中 0 代表齐全通明，1 代表齐全不通明；也能够取十六进制的值。

rgba() 在须要设置色彩透明度时非常有用，能够做出一些很漂亮的半透明成果。

background-color: rgba(4,4,4,0.1)

background-color: #000000BF

留神：rgb() 和 hsl() 函数的逗号被勾销了，因为新的色彩函数，例如 lab() 和 lch() 都是应用空格作为分隔符。然而为了向下兼容，能够持续应用逗号。

HSL

色相、饱和度、亮度 Hue、Saturation、Lightness

色彩具备多种个性，包含色相、饱和度和亮度。CSS3 引入了 hsl()做为色彩的形容形式。

色相 是色调的根本属性，就是平时所说的色彩名称，如红色、黄色等。以色彩光谱为例，光谱右边从红色开始，挪动到两头的绿色，始终到左边的蓝色，色相值就是沿着这条线的取值。在 hsl() 外面，色相用色环来代替光谱，色相值就是色环外面的色彩对应的从 0 到 360 度的角度值。

饱和度 是指色调的纯度，也就是色彩里灰色的占比。饱和度越高则灰色占比越少，色调也就越纯；反之则齐全是灰色。饱和度的取值范畴是示意灰色所占百分比的 0 至 100。

亮度 决定色彩的明暗水平，也就是色彩里红色或者彩色的占比。其中，100% 的亮度示意纯白色，0% 的亮度则示意纯彩色；而 50% 的亮度就示意在色相中选取的色彩。

上面是一些应用 hsl() 形容色彩的例子，色彩都为满饱和度，中等亮度:

色彩 HSL
红 hsl(0, 100%, 50%)
黄 hsl(60, 100%, 50%)
绿 hsl(120, 100%, 50%)
蓝绿 hsl(180, 100%, 50%)
蓝 hsl(240, 100%, 50%)
品红 hsl(300, 100%, 50%) 
color: hsl(0,100%,50%);
color: hsl(.5turn 40% 60%);
color: hsl(2rad 50% 50%);
color: hsl(0 0% 0% / 20%)

HSLA

HSLA 之于 HSL 相似于 RGBA 和 RGB。

互补色 Complementary Color

色环是一个近色相邻、异色相离的圆环。当两个色彩恰好在色环的两端时，这两个色彩就互为补色。两个互为补色的色彩会在混合后变成灰色。然而，补色搭配能造成强烈的视觉比照成果。

例子：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

二次色 & 三次色 Secondary color & Tertiary color

电脑显示器和各类屏幕都是基于色彩叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就能够产生各种色调光。这在古代色调实践中叫作三原色光模式（RGB Color Model）。

红色（R）、绿色（G）和蓝色（B）叫作三原色。如果把两种原色相加，就能够产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。这些二次色恰好是在合成它们时未应用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的色彩，例如，在 RGB 色彩模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。将这六种色彩中相邻的色彩相加，便产生了十二色色环。

文本色彩 Text Color

color: 色彩

背景色彩 Background Color

background-color: 色彩

色彩关键字

CSS 共有 148 种颜色关键字，用纯英语示意。

所有的关键字是大小写敏感的，然而很多零碎色彩是首字母大写的，这是为了辨别两者。

也有几种非凡关键字：

  • transparent 是全透明的色彩，是背景色彩的默认值
  • currentColor 是 color 属性上下文的动静计算值。例如：文本色彩为红色，把边框色彩设置为 currentColor，那么边框色彩也是红色。

字体 Font

字体大小 Font Size

font-size: 30px;

字体族名 Font Family

font-family: sans-serif;

引入 Google 字体

除了应用零碎提供的默认字体以外，也能够应用自定义字体。Google 字体库是一个收费的 Web 字体库，只须要在 CSS 里设置字体的 URL 即可应用。

要引入 Google Font，须要从 Google Fonts 上复制字体的 URL，并粘贴到 HTML 外面。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

font-family: FAMILY_NAME, GENERIC_NAME;

字体名辨别大小写，并且如果字体名含有空格，则在申明时须要用引号包起来。例如，应用 "Open Sans" 字体须要增加引号，而 Lobster 则不须要。

字体降级 Degrade

所有浏览器都有几种默认字体，包含 monospace、serif 和 sans-serif。

在字体不可用的时候，能够通知浏览器通过“降级”去应用其余字体。

如果想把一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级应用 sans-serif 字体，那么能够这样写：

p {font-family: Helvetica, sans-serif;}

通用字体名不辨别大小写。同时，也不须要应用引号，因为它们是 CSS 中的关键字。

元素宽度 Width

width: 20px;

width 属性来指定元素的宽度。属性值能够是绝对单位（比方 em），相对单位（比方 px），或者蕴含块（父元素）宽度的百分比。

元素高度 Height

height: 20px;

height 属性来指定元素的高度。属性值能够是绝对单位（比方 em），相对单位（比方 px），或者蕴含块（父元素）宽度的百分比。

每个 HTML 元素所占有的矩形空间由这三个重要的属性来管制：内边距 padding、外边距 margin、边框 border。

方框模型 / 盒子模型

CSS 显示的所有对象都是方框。

内容和大小

默认状况下，内容会影响方框的大小。

能够通过内部尺寸（extrinsic sizing）来管制方框的大小；或者，应用外部尺寸（intrinsic sizing），让浏览器依据内容大小做决定。

如果给 HTML 元素规定了宽度，就是应用了内部尺寸，它会管制子内容的大小，能够增加的内容也有限度。如果超过了这个限度，内容就会溢出方框边界。

避免溢出的一种办法是勾销设置 width，或者能够把宽度设置为 min-content，也就是应用外部宽度。外部宽度会把方框宽度调整为内容的最小宽度。

当产生溢出时，通过 overflow 治理元素解决溢出的形式。

方框模型的区域

  • content-box 内容框：内容所在区域，能够管制父级元素的大小，通常是最容易发生变化的区域
  • padding-box 填充框：位于内容框的四周，方框的外部，是 padding 属性创立的空间。方框的背景在填充框内可见。如果应用 overflow: auto 或者 overflow: scroll，那么滚动条也会占用该空间。
  • border-box 边框：位于填充框四周，是 border 创立的范畴。边框是方框的边界，也是能够直观看到的界线。
  • margin-box 边距框：位于边框的四周，是 margin 创立的范畴。outline 和 shadow-box 也会占据该空间。边距框不会影响边框的大小。

文档流：行内元素和块级元素

HTML 元素的地位被称为“文档流（document flow）”。

通过 display 的值为 block 或 inline , 判断行内元素和块级元素。

块级元素有着其父元素的全副程度宽度，以及其内容的理论高度。块级元素会占据新的一行空间。

行内元素有边距块，然而其余元素熟视无睹，应用行内 - 块级元素能够使解决该问题，同时仍然体现为行内元素。

默认状况下，块级元素会填充可用的行内空间，而行内元素和行内 - 块级元素（inline-block）的宽度和高度只会和内容一样大。

box-sizing 属性决定了如何计算方框的大小，默认为 box-sizing: content-box。为其值时，设置宽度和高度会利用到内容框中。如果随后设置 padding 和 border，则会将这些值减少到内容框的大小。

例如：

.mybox {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

默认的盒子大小是内容框，所以框的宽度是 200 + 2 10 + 2 20px = 260px。

也能够批改为：box-sizing: border-box，此时把总宽度利用到边框，内容框为 200px。

边框 Border

CSS 边框具备 style、color、width、radius 属性，别离代表边框的品种、色彩、宽度、圆角半径。

除像素外，也能够应用百分比来指定 border-radius 的值。

border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
border-radius: 50%;

内边距 Padding

内边距 padding 用来管制元素内容与 border 之间的空隙大小。

/* 四个方向(单个属性值) padding */
padding: 50px;
/* 四个方向(多个属性值) padding */
/* 方向顺次是 上 右 下 左 */
padding: 50px 20px 20px 50px 
/* 各个方向 padding */
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;

外边距 Margin

外边距 margin 用来管制元素的 border 与其余元素之间的 border 间隔。把元素的 margin 设置为负值，元素会变得占用更多空间。

/* 四个方向(单个属性值) margin */
margin: 50px;
/* 四个方向(多个属性值) margin */
/* 方向顺次是 上 右 下 左 */
margin: 50px 20px 20px 50px 
/* 各个方向 margin */
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
/* 负值 */
margin: -16px;

CSS 变量 CSS Variable

CSS 变量能够实现仅须要更新一个值，就能够将更改利用到多个 CSS 款式属性上。

为创立一个 CSS 变量，在变量名前增加两个连字符号，并为其赋值即可，例子如下：

--penguin-skin: gray;

为应用 CSS 变量，在属性后增加 var 关键字，而后把变量值用括号括起来。例子如下：

background: var(--penguin-skin);

能够设置一个备用值来避免因为某些起因导致变量不失效的状况。

background: var(--penguin-skin, black);

当创立一个变量时，变量会在创立变量的选择器里可用。同时，在这个选择器的后辈选择器里也是可用的。这是因为 CSS 变量是可继承的，和一般的属性一样。

CSS 变量常常会定义在 :root 元素内，这样就可被所有选择器继承。:root 是一个伪类选择器，它是一个可能匹配文档根元素的选择器，通常指的是 html 元素。在 :root 里创立变量在全局都可用，即在任何选择器里都失效。

当在 :root 里创立变量时，这些变量的作用域是整个页面。如果在元素里创立雷同的变量，会重写作用于整个页面的变量的值。

CSS 变量能够简化媒体查问的定义形式。

例如，当屏幕小于或大于媒体查问所设置的值，只有更新变量的值，那么应用了此变量的元素款式就都会更改。

如果想提供浏览器降级计划，在申明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级应用这个计划，新的浏览器会在前面的申明里笼罩降级计划。

退出移动版