xqmmcqs's blog
0%

CSS入门

发表于 更新于 分类于 Disqus：

CSS学习笔记

参考资料：CSS指南 - MDN CSS教程 - W3school

CSS基础

派生选择器：

1
2
3
4
5
/* 列表中的strong */
li strong {
    font-style: italic;
    font-weight: normal;
}

id选择器

1
2
#red {color:red;}
#green {color:green;}
1
2
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类选择器

1
.center {text-align: center}
1
2
3
<h1 class="center">
This heading will be center-aligned
</h1>

类名的第一个字符不能使用数字！

属性选择器：

1
2
3
4
[title]
{
    color:red;
}
1
2
3
4
[title=W3School]
{
    border:5px solid blue;
}
1
[title~=hello] { color:red; }/* 包含给定值的title属性，属性值由空格分隔 */
1
[lang|=en] { color:red; }/* 开头为给定值的title属性，属性值由连字符分隔 */

CSS样式

背景

背景颜色：background-color不能继承，其默认值是transparent。

背景图像：background-image属性的默认值是none，表示背景上没有放置任何图像。background-image也不能继承。

背景重复/平铺：background-repeat，属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

背景大小：background-size，设置长宽大小/百分比，或者cover保持长宽比并且覆盖整个盒子，contain保持长宽比并在盒子内尽量大

背景定位：background-position，属性值：关键字center top bottom right left；百分数值，分别是水平和竖直；长度值，相对于左上角，水平和竖直。

背景关联：background-attachment，属性值：默认scroll随文档滚动，fixed不动

多个背景：用逗号分隔，属性也用逗号分隔。

文本

缩进：text-indent，属性值：给定长度（正值/负值），百分比；可以继承

水平对齐：text-align，属性值：left right center justify（两端对齐）

单词间隔：word-spacing，属性值：正/负长度值，默认normal

字母间隔：letter-spacing，属性值：正/负长度值，默认normal

字符转换：text-transform，属性值：none uppercase lowercase capitalize

文本装饰：text-decoration，属性值：none underline overline line-through blink，高优先级的值会替换低优先级的值

文字阴影：text-shadow，四个值：水平偏移、垂直偏移、模糊半径、颜色；用逗号分隔多个阴影

行高：line-height，可以用长度值，或者无单位值，表示font-size的倍数

处理空白符：white-space

值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向：direction影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。大多数情况下，默认值是ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。

字体

指定字体系列：font-family，指定一系列值时，按优先级排列，用逗号隔开

通用字体：

名称 定义
serif 有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）
sans-serif 没有衬线的字体。
monospace 每个字符具有相同宽度的字体，通常用于代码列表。
cursive 用于模拟笔迹的字体，具有流动的连接笔画。
fantasy 用来装饰的字体

字体风格：font-style，属性值：normal italic oblique

font-variant，属性值：normal small-caps小型大写字母

字体粗细：font-weight，属性值：normal bold bolder lighter，100~900，400对应normal，700对应bold

字体大小；font-size，属性值：px；1em为父元素的大小，根元素大小默认为为16px；百分比

font简写：font-style font-variant font-weight font-stretch font-size line-height font-family，font-size和line-height之间有一个/

Web字体：@font-face

  • font-family：字体名称
  • src：url和format
  • font-weight font-style等

链接

链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:focus - 链接被通过键盘TAB选中
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

a:hover必须位于a:link和a:visited之后；a:active必须位于a:hover之后

为外部链接插入按钮

1
2
3
4
5
a[href*="http"] {
  background: url('outer.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

列表

list-style-type列表标志类型；list-style-image列表标志图像；list-style-position列表标志位置，inside outside

合起来，list-style

使用background-image做项目标志

1
2
3
4
5
6
7
8
9
10
11
12
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

start属性使列表从特定的数字开始计数<ol start="4"><\ol>

reversed属性使列表倒计数<ol start="4" reversed><\ol>

value属性给列表项目指定特定的值<li value="2">

注意：纵然你使用非数字的 list-style-type，你仍需要使用与数值同等意义的值作为value的属性。

列表实现导航栏：

1
2
3
<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {     
  background: orange;
}

a:active {
  background: red;
  color: white;
}

表格

边框：border

折叠为单一边框：border-collapse，属性值collapse separate

高度、宽度：height width

文本对齐：text-align和vertical-align属性设置表格中文本的对齐方式。

内边距：padding

table-layout，auto表格和单元格的宽度取决于内容，fixed某一列的宽度仅由该列首行的单元格决定

通过:nth-child(an+b)伪类，选择特定的行/列，也有关键字odd even

caption-side属性把标题放到指定的位置，top bottom

轮廓

outline-color outline-style outline-width

outline

书写模式

writing-mode：设定块级元素的显示方向

  • horizontal-tb：块流向从上至下。对应的文本方向是横向的。
  • vertical-rl：块流向从右向左。对应的文本方向是纵向的。
  • vertical-lr：块流向从左向右。对应的文本方向是纵向的。

逻辑属性和逻辑值

内联纬度：沿每一行方向的维度

块级维度：垂直每一行方向的维度

inline-size：内联尺寸，即沿每一行方向的尺寸

block-size：块级尺寸，即垂直每一行方向的尺寸

其他-top -bottom -left -right属性，映射到-block-start -block-end -inline-start -inline-end

类似，top bottom left right映射到逻辑值block-start block-end inline-start inline-end

CSS盒模型

概述

块级盒子：

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width和height属性可以发挥作用
  • 内边距（padding）,外边距（margin）和边框（border） 会将其他元素从当前盒子周围“推开”

内联盒子：

  • 盒子不会产生换行。
  • width和height属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
CSS盒模型
CSS盒模型

由内向外：

  • content : 内容。
  • padding : 内边距。
  • border : 边框。
  • margin : 外边距。

weight和height是content部分的大小。

box-sizing: border-box;：替代盒模型，weight和height是content+padding+border的大小。

内边框

内边框宽度：padding

可以一个值设定一圈宽度，也可以四个值依次上、右、下、左

1
h1 {padding: 10px 0.25em 2ex 20%;}

单边的四个属性：

1
2
3
4
5
6
h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}

百分比值是相对于父元素宽度，上下内边框也是

边框

border边框绘制在“元素的背景之上”

border-style定义边框样式，可以一个值，也可以四个值依次上、右、下、左

分别定义：border-top-style border-right-style border-bottom-style border-left-style

border-width，可以指定长度值，或者thin medium thick

接受一个值或者四个值，与上面类似；也有单边的四个属性，与上面类似

border-style为none时，边框宽度设置无效

border-color，边框颜色，接受一个值或者四个值，与上面类似；也有单边的四个属性，与上面类似

border-color为transparent时，为一个给定宽度的透明边框

border-radius：添加圆角边框，两个属性值分别为水平半径和垂直半径

外边框

外边框宽度：margin

值复制：

  • 如果缺少左外边距的值，则使用右外边距的值。
  • 如果缺少下外边距的值，则使用上外边距的值。
  • 如果缺少右外边距的值，则使用上外边距的值。
值复制
值复制

单边的四个属性：

1
2
3
4
5
6
h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
}

外边框合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

inline-block

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

  • 设置width 和height 属性会生效。
  • padding, margin, 以及border 会推开其他元素。

但是不会换行。

CSS排版

由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

弹性盒子

给父元素设置display:flex

flex模型：

设置display的父元素即flex容器

flex-direction属性：主轴的方向，默认row，column row-reverse column-reverse

flex-wrap属性：超出容器的盒子换行

flex-flow属性：上述两个属性的缩写

盒子的flex属性：

  • 第一个是flex-grow属性，无单位的比例值，表示每个flex项沿主轴的可用空间比例。
  • 第二个是flex-shrink属性
  • 第三个是flex-basis属性，表示盒子沿主轴方向可用空间的最小值

align-items属性：控制盒子在交叉轴上的位置，默认stretch，拉伸到交叉轴长度，center保持原有宽度在交叉轴居中

盒子的align-self属性，覆盖align-items属性

justify-content属性：控制盒子在主轴上的位置，默认flex-start，主轴开始的位置，flex-end center space-around沿主轴均匀分布，两边留有空间 space-between沿主轴均匀分布，两边没有空间

盒子的order属性，排列顺序，默认为0，大的排在小的后面，相同的按照源顺序排列

网格

简单网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fluid grid</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            width: 90%;
            max-width: 980px;
            margin: 0 auto;
        }

        .wrapper {
            padding-right: 2.08333333%;
        }

        .row {
            clear: both;
        }

        .col {
            float: left;
            margin-left: 2.08333333%;
            width: 6.25%;
            background: rgb(255, 150, 150);
        }

        /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
        .col.span2 {
            width: 14.58333333%;
        }

        /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
        .col.span3 {
            width: 22.91666666%;
        }

        /* And so on... */
        .col.span4 {
            width: 31.24999999%;
        }

        .col.span5 {
            width: 39.58333332%;
        }

        .col.span6 {
            width: 47.91666665%;
        }

        .col.span7 {
            width: 56.24999998%;
        }

        .col.span8 {
            width: 64.58333331%;
        }

        .col.span9 {
            width: 72.91666664%;
        }

        .col.span10 {
            width: 81.24999997%;
        }

        .col.span11 {
            width: 89.5833333%;
        }

        .col.span12 {
            width: 97.91666663%;
        }

        .offset-by-one {
            margin-left: calc(6.25% + (2.08333333%*2));
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
            <div class="col">11</div>
            <div class="col">12</div>
        </div>
        <div class="row">
            <div class="col span1">13</div>
            <div class="col span5 offset-by-one">14</div>
            <div class="col span3">15</div>
            <div class="col span2">16</div>
        </div>
    </div>
</body>

</html>

CSS网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS grids example</title>
    <style>
        .wrapper {
            width: 90%;
            max-width: 960px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-gap: 20px;
        }

        .col {
            background: rgb(255, 150, 150);
        }

        .span2 {
            grid-column: auto / span 2;
        }

        .span3 {
            grid-column: auto / span 3;
        }

        .span4 {
            grid-column: auto / span 4;
        }

        .span5 {
            grid-column: auto / span 5;
        }

        .span6 {
            grid-column: auto / span 6;
        }

        .span7 {
            grid-column: auto / span 7;
        }

        .span8 {
            grid-column: auto / span 8;
        }

        .span9 {
            grid-column: auto / span 9;
        }

        .span10 {
            grid-column: auto / span 10;
        }

        .span11 {
            grid-column: auto / span 11;
        }

        .span12 {
            grid-column: auto / span 12;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col">11</div>
        <div class="col">12</div>
        <div class="col">13some<br>content</div>
        <div class="col span6">14this<br>is<br>more<br>content</div>
        <div class="col span3">15this<br>is<br>less</div>
        <div class="col span2">16</div>
    </div>
</body>

</html>

跨越第二列到第七列，第三行到第四行：

1
2
3
4
.content {
    grid-column: 2 / 8;
    grid-row: 3 / 5;
}

浮动

float：定义元素在哪个方向浮动，值为left right none

源代码中在前面的元素先浮动

clear：这个元素和源码中后面的元素将不浮动，值为left right both none

浮动元素在父元素中所占的面积的有效高度为0，在父容器的底部清除浮动来修复

非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，可以在非浮动元素上面创建一个清除浮动的空元素来修复

定位

position属性

  • static，默认值，元素框正常生成。
  • relative，元素框偏移某个距离，它原本所占的空间仍保留。
  • abosolute，元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
  • fixed，与absolute类似，但是包含块是视窗。
  • sticky，被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点为止，此后它就变得固定了。

相对定位和绝对定位的元素可能会覆盖其他框。

left right top bottom 定义偏移长度或者百分比

overflow：内容超出元素框后

  • visible，默认值，内容不会被修剪，溢出元素框
  • hidden，内容被修剪，溢出部分不可见
  • scoll，内容被修剪，显示滚动条
  • auto，如果溢出，则scoll

z-index：元素堆叠顺序，可以为负值，值更大的元素显示在值更小的元素之前

cilp：剪裁，值为rect (top, right, bottom, left)

多列

通过column-count或者column-width属性开启多列

column-gap列间距

column-rule是column-rule-color和column-rule-style的缩写，表示列间分割线的形式

分割线不占用列间的宽度

使用break-inside: void或page-break-inside: void防止在多列中盒子被拆开

媒体查询

1
2
3
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

媒体类型：all print screen speech

媒体特征规则：

  • width height min- max-
  • 朝向：orientation，portrait竖放 landscape横放
  • 悬浮：hover，hover能悬浮（在用鼠标指针）
  • pointer，none没有指点设备 fine鼠标指针 coarse触摸屏

与逻辑：and；或逻辑：逗号；非逻辑：not

CSS选择器

通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

1
p.important {color:red;}

选择器现在会匹配class属性包含important的所有p元素

类选择器

多类选择器：

1
2
3
<p class="important warning">
This paragraph is a very important warning.
</p>
1
2
3
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

ID选择器

在一个HTML文档中，ID选择器会使用一次，而且仅一次。ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

属性选择器

[abc^="def"]：选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"]：选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"]：选择 abc 属性值中包含子串 "def" 的所有元素

1
2
3
li[class^="a" i] {
    color: red;
}

使用i，表示匹配时大小写不敏感

后代选择器

后代选择器中两个元素之间的层次间隔可以是无限的。

例如，如果写作ul em，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。

子元素选择器

子元素选择器：不选择任意的后代元素，而只选择某个元素的子元素

1
h1 > strong {color:red;}

相邻兄弟选择器

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

1
h1 + p {margin-top:50px;}

选择紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素

通用兄弟关系选择器

选中某一个元素的兄弟元素，即使他们不相邻

1
h1 ~ p {font-weight: bold;}

伪类

1
p:first-child {font-weight: bold;}

将作为某元素第一个子元素的所有p元素设置为粗体。

注意：不是p元素的第一个子元素！

1
p > i:first-child

匹配所有<p>元素的第一个<i>子元素

1
p:first-child i

匹配所有作为某元素的第一个子元素的<p>元素，的所有<i>后代元素

伪元素

1
selector:：pseudo-element {property:value;}

first-line伪元素用于向文本的首行设置特殊样式

first-letter伪元素用于向文本的首字母设置特殊样式，只能用于块级元素

before伪元素可以在元素的内容前面插入新内容

after伪元素可以在元素的内容之后插入新内容

1
2
3
.box::before {
    content: "This should show before the other content."
}
1
<p class="box">Content in the box in my HTML page.</p>

层叠、继承、优先级

层叠：当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

控制继承：

inherit设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

CSS 的shorthand属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。

层叠优先级（由高到低）：

  1. 声明在 style 的属性（内联样式）。
  2. 选择器中包含ID选择器
  3. 选择器中包含类选择器、属性选择器或者伪类
  4. 选择器中包含元素、伪元素选择器

CSS的值与单位

长度

绝对长度单位

单位 名称 等价换算
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 十二点活字 1pc = 1/16th of 1in
pt 点 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in

相对长度单位

单位 相对于
em 在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%

当在CSS中使用数字作为值时，它不应该用引号括起来。

颜色

十六进制RGB：#02798b

RGB：rgb(2, 121, 139)

RGBA，第四个值表示颜色的不透明度：rgba(2, 121, 139, .3)

hsl() 函数接受色调、饱和度和亮度值作为参数

  • 色调： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。
  • 饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
  • 亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

图片

url(star.png)

位置

关键字top left bottom right center

两个值——距左上角的水平位置和垂直位置

函数

calc(20% + 100px)

CSS中调整大小

min-width max-width设置宽度的最小/最大值

object-fit属性，属性值cover保持长宽比并且填满盒子，contain保持长宽比并且在盒子内尽量大，fill无视长宽比充满盒子

重置表单

1
2
3
4
5
6
7
8
9
10
11
12
13
button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0; margin: 0; 
} 

textarea { 
  overflow: auto; 
}