系统学习——CSS

笔记目录

- 前缀
- 选择器
- - 后代选择器和子元素选择器
  - 弟弟选择器
  - 属性选择器
  - 选择器分组
- 伪选择器
- - a标签
  - 伪元素
- 属性
- - font-family
  - font-size
  - font-weight
  - font-variant
  - vertical-align
  - text-decoration
  - text-indent
  - text-transform
  - letter-spacing
  - word-spacing
  - white-space
  - border-style
  - background-attachment
  - list-style
  - table标签的CSS属性
  - cursor
  - display
  - position
  - z-index
  - box-shadow
  - 线性渐变
  - 径向渐变
  - background-size
  - background-clip
  - 层叠背景图
  - transition(过渡)
  - transform(转变)
- 动画
- - 3D转换

写在前面的：始于2019-11-20，终于2019-12-19，系统的学习CSS，以w3cschool提供的微课和文档为基准，记录自己之前不知道的知识点。历时一个月，断断续续地学了一遍，今后就是项目中的应用和深入的学习了，笔记不断。各位仅供参考。

前缀

Safari、Chrome ： -webkit- ;
Firefox ： -moz- ;
Opera ： -o- ；
IE ： -ms- 。

选择器

后代选择器和子元素选择器

后代选择器：选择器的名字之间用 空格 隔开，不限制级数，级数最高的最准。
子元素选择器：父子名字之间以 > 链接，要求父子元素直连，两者之间不存在其他任何元素否则失效。

弟弟选择器

选择器之间以 + 号直连，要求两者必须同级，且两者之间不存在其他任何元素，后者在前者之下。

属性选择器

普通用法：在 [] 中书写选择器该有的属性，个数不限，与的关系同时满足。选择器名为 * 则表示全选。
```
/***设置页面上所有同时含有class和id属性的div元素***/
a[class][id]{
    color:red;
}
           
```

含有某属性且某属性为定值的

a[href="http://www.skk007.tech/html/" target="_blank" rel="external nofollow" ]{
    color:red;
}

含有class属性并且属性值的词列表的某个词等于定值
```
div[class~="w3cschool"]{
    color:red;
}
           
```

含有class属性并且属性值中以w3cschool开头

div[class^="w3cschool"]{
    color:red;
}

含有class属性并且属性值中以w3cschool结尾

div[class$="w3cschool"]{
    color:red;
}

含有class属性并且属性值中包含w3cschool

div[class*="w3cschool"]{
    color:red;
}

含有class属性并且属性值等于w3cschool或者以w3cschool开头
```
div[class|="w3cschool"]{
    color:red;
}
           
```

选择器分组

多个选择器使用一套样式，使用选择器分组，将选择器名字写到一起以 , 分割。没有前后关系。

伪选择器

a标签

a:link ：正常的未访问的链接。
a:visited ：访问过的链接。
a:hover ：鼠标悬浮在链接上。
a:active ：点击链接时。
设置属性时，必须按照以上顺序。

伪元素

::first-line ：选择器中文本的第一行。
::first-letter ：选择器中文本的第一个字母。
::selection ：选择器中用户选中的部分，如文本元素中用户选中的文本。
::before ：在元素之前插入一些内容。
::after ：在元素之后插入一些内容。

属性

font-family

字体系列：特定的字体系列（如Times New Roman或Arial）
通用族：一组具有相似外观的字体族（如Serif或Monospace）
备选：属性值应多写几个字体以作备选，防止浏览器不支持某字体。多个字体名以 , 隔开，当名字不只一个单词时需要用 "" 引住以表明这是一个字体。

font-size

关键字属性值：xx-small,small,medium,large,larger,etc等。
绝对值和相对值：px，em。1em默认为16px

font-weight

关键字：normal，lighter，bold，bolder。
数值：100-900。400=normal，700=bold。

font-variant

将字体转换为所有小型大写字母。normal，small-caps，inherit。

vertical-align

垂直对齐。对于不同的元素实现效果不同。
属性值：top，middle，bottom，baseline，sub，super，%，px。

对于div元素垂直居中的实现。

<div class="main">
   <div class="paragraph">
   w3cschool
   </div>
</div>

.main {
    height: 150px; width: 400px;
    background-color: LightSkyBlue;
    /* 关键属性 */
    display: inline-table;
}
.paragraph {
	/* 关键属性 */
    display: table-cell;
    vertical-align: middle;
}

text-decoration

如何装饰文本，值：none，inherit，overline，underline，line-through。

text-indent

首航文本缩进距离。属性值：数值（px，em，cm），%，inherit

text-transform

对文本的大小写进行转换。属性值：none，capitalize，lowercase，uppercase。

letter-spacing

用于设置文本中字符之间的间距。用px，pt，cm，mm等测量单位。

word-spacing

用于设置文本中单词之间的间距。用px，pt，cm，mm等测量单位。
单个汉字按字符算，如果汉字之间有空格按单词算。

white-space

设置元素内的空格和换行符。
nowrap ：屏蔽该元素中的所有空格和换行符。
pre ：支持所有空格和换行符。
pre-line ：支持换行符，忽略其他空格。
pre-wrap ：文本将在必要的时候或者行的结尾进行换行。比 pre 换行可能性更大，增加了额外的换行符，以防止文本突破元素框。

border-style

属性值：none，solid，dotted，dashed，double，groove，ridge，inset，outset，hidden
样式效果图：

系统学习——CSS

background-attachment

设置背景图像是固定还是跟随页面滚动。
属性值：scroll（默认），fixed，inherit。
fixed ：设置为该属性值后，即使元素具有滚动机制，背景图像也会固定在某个位置不随页面元素滚动。

list-style

设置不同的类表项标记。为三个属性的简约写法。
list-style-type ：设置标志样式。none，disc（默认），circle，square，decimal，lower-roman，upper-roman，lower-alpha，upper-alpha等。
list-style-image ：用图片代替默认的标志、序号。
list-style-position ：标志符的位置。inside，outside。

table标签的CSS属性

border-collapse ：指定表格边框是否折叠为单个边框。默认分开。
border-spacing ：若表格边框是分开的，则调整边框间距。一个值则是水平和垂直的间距，两个值则前者为水平间距后者为垂直间距。允许继承，不允许为负值。
caption-side ：设定表格标题标签所在位置。 top ， bottom 。
empty-cells ：指定是否在表格中的空单元个格上显示边框和背景。 hide ， show 。
table-layout ：指定如何计算表格列的宽度。 auto ， fixed 。

cursor

设置鼠标在该元素区域时光标的样式。
属性值：pointer，help等

系统学习——CSS

display

属性值：none，block，inline，list-item，table，table-cell，table-column，grid等。
设置元素的display属性只是改变元素的显示方式，而不会改变元素的类型。所以，带有display:block的内联元素不允许在其中包含其他块元素。

position

属性值：static（默认值），relative，absolute，fixed，inherit。
绝对定位：相对于具有 非静态 位置的第一个父级元素进行定位，如果找不到则相对于 <html> 。

z-index

该属性起效必须有 position 属性且其值为：relative、absolute、fixed其中之一不能是 static 。

box-shadow

可是使用 , 分割，对同一对象使用多个阴影，第一个在最高层，最后一个在最下层，若有重叠以排序靠前的为准。

线性渐变

linear-gradient ：线性渐变，可直接规定渐变起始方向， left 、 top(默认值) 、 right 、 bottom ，方向值可组合使用，如 left top 。也可设定角度，0deg为从左到右，90deg为从下到上。
repeating-linear-gradient ：重复线性渐变 background:-webkit-repeating-linear-gradient(blue, green 20px)。

径向渐变

shape： ellipse ，默认值，椭圆； circle ，圆形。该值也可写作两个值 a b ，前者为横向直径，后者为纵向直径，两者相同则为圆形。
size： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角； closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边； farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边； closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角。
position： center （默认），top、left等。
background: radial-gradient(shape size at position, start-color, ..., last-color);

background-size

contain：图像按比例缩放，不超过容器尺寸。
cover：图像缩放以适应尺寸，比例不同会被剪裁。

background-clip

border-box：背景被绘制到边框的外边缘。默认值。
padding-box：背景绘制到填充的外边缘。
content-box：背景被绘制在内容框中。

text：背景色仅被绘制与文字。需要搭配对应的浏览器前缀，可实现文字渐变色。

background: linear-gradient(to bottom, rgba(223, 191, 144, 1) 0%, rgba(173, 136, 85, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text; /* 对应浏览器的前缀 */
  color: transparent; /* 将文字本身的颜色设为透明 */

层叠背景图

background-image 的属性值使用 , 分割写多个背景图，靠前的在上层。 background-position 的属性值可以确定各个背景图的位置，使用方位词 left top 等，使用 , 分割。注意使用 background-repeat 来保证小的背景图不重复。

transition(过渡)

transition-property：指定要转换的属性。
transition-duration：转换发生的持续时间。
transition-timing-function：指定转换的速度在其指定的时间内如何变化。 ease 先慢后快（默认值）， ease-in 先慢后快在猛停， ease-out 先快后慢， ease-in-out 类似于ease，加减速稍微不同， linear 线性匀速。 cubic-bezier(x1,y1,x2,y2) 赛贝尔曲线，确定运动轨迹，值都在0,1之间。
transition-delay：指定过渡效果的延迟时间，秒为单位。

transform(转变)

rotate():根据给定的 deg 进行旋转，正是为顺，负值为逆。
transform-origin：指定旋转的中心，用百分数表示，左上为原点，默认： 50% 50% 。与rotate()/transofrm-rotate一起使用。
translate()：平移元素位置，向左向下，负值则相反。
skew()：通过给元素设置X轴和Y轴的倾斜角度进行倾斜。默认为0。
scale()：根据设定的宽高设定缩放倍数，1为原本大小，不设置第二个值，则都用第一个值。
多重转变：同时写多个函数，用空格隔开。

动画

关键帧（

@keyframes

)：声明动画名称和定义内容。可以写多个形式，处于动画进程的不同帧，可用百分数表示也可用

from

和

to

，前者为0%后者为100%。

@keyframes my-animation {
    0%  {background-color: red;}
    50%  {background-color: yellow;}
    70%  {background-color: blue;}
    100% {background-color: green;}
}

animation-name ：用于元素的动画。

animation-duration

：动画持续的时间。默认为

0s

。单位s和ms。

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: my-animation;
   animation-duration: 1s;
}

animation-timing-function ：动画速度曲线。ease、ease-in、ease-out、ease-in-out、linear、cubic-bezier(x1,y1,x2,y2)。
animation-delay ：动画开始前的延时。默认为 0s 。单位s和ms。
animation-iteration-count ：动画执行次数。无限次用 infinite 。
animation-direction ：动画的执行方式。 normal ，默认值从0%到100%； reverse ，从100%到0%； alternate ，奇数次播放动画时，先到0到100，偶数次时100到0； alternate-reverse ，奇数次播放时100到0，偶数次时0到100。

简写形式，顺序不可错乱。

div {
   animation-name: colorchange;
   animation-duration: 4s;
   animation-timing-function: ease-in;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: reverse;
}
div { 
   animation: colorchange 4s ease-in 2s infinite reverse;
}

3D转换

ratate()扩展为rotateX()、rotateY()、rotateZ()或者rotate3D()包含前三者。
translate()扩展为translateX()、translateY()、translateZ()（正值移入负值移出）或者translate3D()包含前三者。
perspective：定义了如何渲染3D场景的深度。将视角看作从观众到物体的距离。值越大，距离越远，视觉效果越不强烈， 子元素 所呈现的边缘越小。