Yutt's Blog

CSS要点

web
2018/04/19 Share

选择器

元素选择器

1
2
3
4
span {
  background-clor: DodgerBlue;
  color: #ffffff;
}

类选择器

1
2
3
.classy {
  background-color: DodgerBlue;
}

ID选择器

1
2
3
#identified {
  background-color: DodgerBlue;
}

通配符选择器

1
2
3
*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

属性选择器

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
div[lang] {
  font-weight: bold;
}

div[lang~="en-us"] {
  color: blue;
}

div[lang|="zh"] {
  color: red;
}

a[href^="#"] {
  background-color: gold;
}

a[href*="example"] {
  background-color: silver;
}


a[href*="insensitive" i] {
  color: cyan;
}

a[href$=".org"] {
  color: red;
}

相邻兄弟选择器
只能作用到相邻兄弟

1
2
3
4
5
6
7
li + li {
  color: red
}

img + span.caption {
  font-style: italic;
}

通用兄弟选择器

1
2
3
p ~ span {
  color: red
}

子选择器

1
2
3
div > span {
  background-color: DodgerBlue;
}

后代选择器

1
div span { background-color: DodgerBlue; }

伪类选择器
不在文档中生成新的元素，只在原有元素的基础上改变样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */
input[type="text"]:disabled { background: #ccc; }
input:enabled {
  color: #22AA22;
}
div:empty {
    background: lime;
}

span:first-child {
    background-color: lime;
} /*一组兄弟元素中的第一个元素*/

p:not(.classy) { color: red; }
body :not(p) { color: green; }

.second span:nth-child(2n+1),
...

伪元素选择器

1
2
3
4
5
6
7
8
9
q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}/* 配合q标签使用效果比较特殊*/
...

优先级和专用性

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ‘ ‘) 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

  • 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
  • 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type=”radio”]），伪类（pseudo-classes）（例如, :hover）
  • ID选择器（例如, #example）

!important 例外，此声明将覆盖任何其它声明，使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。

由于优先级的概念比较抽象，可以使用一个千位数将优先级具体化(专用性):

  • 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
  • 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
  • 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  • 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

通用选择器 (*), 复合选择器 (+, >, ~, ‘ ‘) 和否定伪类 (:not) 在专用性中无影响。

例子：

选择器 千位 百位 十位 个位 合计值
h1 0 0 0 1 0001
#important 0 1 0 0 0100
h1 + p::first-letter 0 0 0 3 0003
li > a[href*=”zh-CN”] > .inline-warning 0 0 2 2 0022
#important div > div > a:hover, 在一个元素的 style 属性里 1 1 1 3 1113

值和单位

像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下：

  • mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
  • pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）

也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸。

  • em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。
  • ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
  • rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.)
  • vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。

还可以使用百分比值指定可以通过特定数值指定的大部分内容。这使我们可以创建，例如，其宽度总是会移动到其父容器宽度的一定百分比的框中。这可以与那些将其宽度设置为某个单位值（如px或ems）的框进行比较，它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。

可以设置font-size的百分比为200%。它将和预计的工作方式有一点不同，但这是讲得通的，它的新大小是相对于父容器的字体大小的，就像em一样。在这种情况下，父容器的字体大小为16px——页面的默认值，所以计算的值为16px的200%，或32px。这和em的风格确实很类似—200%基本上和2em一样。

  • fr 剩余空间系数，对于一个容器的剩余空间按比例分配，通常用在布局属性中
  • ch 0字符的宽度

字体

font-family取值
family-name 字体族名；
generic-name 通用字体族名：
serif
带衬线字体，笔画结尾有特殊的装饰线或衬线。

sans-serif
无衬线字体，即笔画结尾是平滑的字体。

monospace
等宽字体，即字体中每个字宽度相同。

cursive
草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。

fantasy
Fantasy字体主要是那些具有特殊艺术效果的字体。

font-stretch
normal
指定默认字体
semi-condensed, condensed, extra-condensed, ultra-condensed
小于默认字体，其中ultra-condensed是缩的最小的字体
semi-expanded, expanded, extra-expanded, ultra-expanded
大于默认字体的值

font-size-adjust CSS属性定义字体大小应取决于小写字母，而不是大写字母。

渐变

简单线性渐变

1
2
3
4
5
6
7
8
9
10
11
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white);

/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-gradient(left, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, blue, white);

使用角度

1
background: linear-gradient(70deg, black, white);

三个色标

1
2
3
4
5
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器  */
background: -prefix-linear-gradient(top, blue, white 80%, orange);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white 80%, orange);

等间距色标

1
2
3
4
5
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, red, orange, yellow, green, blue);

透明和渐变

1
2
3
4
5
/*  旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */ 
background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */  
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

径向渐变

1
2
3
4
5
6
7
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

重复渐变

1
2
3
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

多背景重复渐变

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
background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 50px,
    rgba(255, 127, 0, 0.25) 50px,
    rgba(255, 127, 0, 0.25) 56px,
    transparent 56px,
    transparent 63px,
    rgba(255, 127, 0, 0.25) 63px,
    rgba(255, 127, 0, 0.25) 69px,
    transparent 69px,
    transparent 116px,
    rgba(255, 206, 0, 0.25) 116px,
    rgba(255, 206, 0, 0.25) 166px
  ),
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 50px,
    rgba(255, 127, 0, 0.25) 50px,
    rgba(255, 127, 0, 0.25) 56px,
    transparent 56px,
    transparent 63px,
    rgba(255, 127, 0, 0.25) 63px,
    rgba(255, 127, 0, 0.25) 69px,
    transparent 69px,
    transparent 116px,
    rgba(255, 206, 0, 0.25) 116px,
    rgba(255, 206, 0, 0.25) 166px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px
  ),
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px
  );

盒模型

外边距塌陷
块的顶部外边距和底部外边距有时被组合（折叠）为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（合并）

1
2
3
4
5
6
7
#wrapper > main{
  margin-bottom: 100px;
}

#wrapper > footer {
  margin-top: 99px;
}
1
2
3
4
5
<div id="wrapper">
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</div>

溢流
当使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

  • auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
  • hidden: 当内容过多，溢流的内容被隐藏。
  • visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）

多列布局

通常文字都是一整段显示的，而多列属性可以把文字分成多段。

1
2
3
4
5
6
.bg {
  column-count: 4;
  column-width: 30em;
  columns: 20em;
  column-gap: 2em;
}

flex布局

父容器使用的属性:
使用flex布局(兼容性)

1
2
3
4
5
6
.bg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

定义主轴方向，指定flex元素多行显示还是单行显示，以及简写。

1
2
3
flex: column; /* row | row-reverse | column | column-reverse */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
flex-flow: column wrap;

父容器分配主轴空间

1
2
3
/* space-between | space-around | space-evenly | stretch* /
/* center | start | end | flex-start | flex-end */
justify-content: space-between;

父容器分配侧轴空间，适用于多行的flex容器

1
align-content: space-around

align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。

1
align-items: center; /* center | start | end | self-start | self-end | flex-start | flex-end */

子容器使用的属性:
flex属性有三个参数: flex-grow，felx-shrink，felx-basis

1
2
/* 单个值，定义了拉伸因子 flex-grow为 1 */
flex: 1;

网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bg {
  display: grid;
  /* 定义列的轨道模式*/
  grid-template-columns:  repeat(3, 1fr);
  /* 网格间隙 */
  grid-gap: 10px;
  /* 定义行的轨道模式*/
  grid-auto-rows: minmax(100px, auto);
}
.one {
  /* 指定column start 和 column end*/
  grid-column: 1 / 3;
  /* 指定row start 和 row end*/
  grid-row: 1;
}

背景

属性值简写

background:

  • bg-color
  • bg-image
  • position/bg-size
  • bg-repeat
  • bg-origin
  • bg-clip
  • bg-attachment

transforms

语法

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
/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

制作一个立方体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
    <tbody>
      <tr>
        <td>
          <div class="container">
            <div class="cube pers250">
              <div class="face front">1</div>
              <div class="face back">2</div>
              <div class="face right">3</div>
              <div class="face left">4</div>
              <div class="face top">5</div>
              <div class="face bottom">6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

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
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
  background-color: #EEEEEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

过渡

简写

1
transition: <property> <duration> <timing-function> <delay>;

高亮菜单过渡效果

1
2
3
4
5
6
<div class="sidebar">
  <p><a href="home" class="menuButton">Home</a></p>
  <p><a href="about" class="menuButton">About</a></p>
  <p><a href="contact" class="menuButton">Contact</a></p>
  <p><a href="links" class="menuButton">Links</a></p>
</div>

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
.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

动画

animation的子属性有:

  • animation-delay
    设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
  • animation-direction
    设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
  • animation-duration
    设置动画一个周期的时长。
  • animation-iteration-count
    设置动画重复次数， 可以指定infinite无限次重复动画
  • animation-name
    指定由@keyframes描述的关键帧名称。
  • animation-play-state
    允许暂停和恢复动画。
  • animation-timing-function
    设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
  • animation-fill-mode
    指定动画执行前后如何为目标元素应用样式。

duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@keyframes move_eye {
  from {
    margin-left: -20%;
  }

  to {
    margin-left: 100%;
  }
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move_eye;
}

不常用

additive-symbols 描述符 定义符号，用于值可累积的可数的 system的项 。 additive-symbols定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。additive system被用于构造sign-value numbering （符号-值，指数字的值就是是符号加在一起的值）系统，比如 罗马数字。

1
2
3
additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "\2E\20";
additive-symbols: 3 "0", 2 url(symbol.png);

滤镜

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

CATALOG
  1. 1. 选择器
  2. 2. 优先级和专用性
  3. 3. 值和单位
  4. 4. 字体
  5. 5. 渐变
  6. 6. 盒模型
  7. 7. 多列布局
  8. 8. flex布局
  9. 9. 网格布局
  10. 10. 背景
  11. 11. 属性值简写
  12. 12. transforms
  13. 13. 过渡
  14. 14. 动画
  15. 15. 不常用
Archive Tag
Total : 25
2018
理论 English java android web javascript git js leetCode react-native react redux