css 回顾
样式表
样式表分类：外部、内部、行内（除了引用不一样，样式的本身是一样的）
外部：一个独立的文件，以.css为扩展名
内嵌：在当前文件里嵌套使用，写在中
行内：在当前标签这一行内使用
嵌入：
优先级：html由上往下执行，后执行的会将前面的覆盖掉！！（行内样式一定会最后执行而覆盖掉前面的，内部与外部看谁离标签近）
例子：
- < link>放在< style>之前，内部>外部
- < link>放在< style>之后，外部>内部
内嵌样式表：
<style type="text/css"> <!--type="text/css"：在当前样式里是文本或者CSS（也可以吧“text/”去掉）-->
p{ <!--对所有的段落标签进行设计-->
。。。。。。
}
</style>
外部样式表：
- < link>：用于定义文档与外部资源的关系，（写在中）
- rel：rel是relation的缩写，也就是关系，指明样式表的类型
- type：定义css样式文件的类型（可省略，因为大都默认为css）
- href：指明外部样式表的位置
行内样式： 不建议使用
<p style="background-color: red; font-size: 40px;">
这是行内样式
</p>
内嵌样式： 很少使用
<style type="text/css">
@import url("css/style.css");
</style>
长度单位
- em：当前字体大小；
- 例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。
- vh：浏览器高度的1/100；例：浏览器高度900px，1vh=9px
- vw：浏览器宽度的1/100；
- vmin：取浏览器宽度和高度的最小值；例：浏览器高度900px，宽度1200px，1vmin=9px
- vmin常适用于（需要一个总是在屏幕上可见的元素）这样不管是电脑、手机都能100%可见
- vmax：取浏览器宽度和高度的最大值；
- vmax常适用于（需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边)）
- ch：字符单位：依赖于font-family；例：给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符
-等等…
文本修饰
- direction与text-align：
- 针对非阿拉伯语时：两者效果一致；
*针对阿拉伯数语时，direction则是改变字母的书写方式，text-align则只是改变对齐方式。 - 注意：小数点 . 视为阿拉伯语。
- 针对非阿拉伯语时：两者效果一致；
- opacity：设置透明效果； opacity: 0.5;（半透明）。
- text-shadow：
- 需要设置四个值（分别是：行偏倚量 列偏倚量 模糊度 颜色）
.p1{
text-shadow: 3px 3px 2 red;
}
- box-shadow：
- 需要设置五个值（分别为： 水平位置，垂直位置，模糊距离（渐变），阴影尺寸，颜色）
字体
- font-style：italic与oblique，两者都是设置斜体
- italic：将字符设置为斜体（是一种字体），对大多数字符都有效，但有部分特殊字符不能设置斜体（是因为字库里边没有改字符的斜体）。
- oblique：所有字符都为倾斜显示。
font-family设置多个值：为了兼容不同机型，网页常常要 font-family设置多个值，来能满足页面需求。不同字体之间用逗号隔开，按优先级依次排开。
word-break：属性规定自动换行的处理方法。
white-space：属性设置如何处理元素内的空白。 
背景
background-size：设置背景图片大小
background-color: transparent;(设置背景为透明)
可以对元素设置多个背景图像；设置背景图片时，值写在url()内的
background-image: url("../picture/Primary.jpg");
background-image: url("image/1.jpg"),url("image/2.jpg");
渐变背景：
-
background: linear-gradient(direction, color1 stop1, color2 stop2);
- direction：方向值：常用的是to top，to bottom，to left，to right等等；角度值：常用的是0deg、180deg等等。
- stop：是这个颜色块终止位置，换句话说就是这块颜色占的区域（渐变从哪开始，到哪结束）（第一个大于第二个就没有渐变效果，直接两种颜色）。
background: linear-gradient(135deg,goldenrod 25%,blue 100%);
display：规定元素应该生成的框的类型。
-
none：此元素不会显示
-
block：此元素显示为块级元素
-
inline：默认。此元素会被显示未内联元素
-
inline-block：行内块元素
-
flex：弹性布局（flexble box）FlexBox
- Flexbox 弹性布局
- Flexbox 布局的最简单表单
- Flex 布局教程：语法篇
- Flex 布局教程：实例篇
- Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
-
grid：网格布局
兼容性似乎不是很好呀- Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
- repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
- repeat()重复某种模式也是可以的。
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);
- minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
table：此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 - 等等…
选择器
w3school
8163957229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RyeU15QmVzdFRvRG9f,size_16,color_FFFFFF,t_70)
- 标签指定式选择符：标签名选择器 （中间没有任何符号）
h1#content{ <!--选择id为content的h1标签-->
........
}
- id：每个标签的id不能相同，在使用id选择器时，以#开头
- *：选中所有内容
- 逗号选择器：将多个选择器连接在一起，视为一个选择器
- 空格选择器： 例：#div1 p{} ：选中div1中所有的p标签（包括div1中其他div中的p标签）
- >选择器： 例：#div1>p{} ：选中所有属于div1的p标签（不包括div1中其他div中的p标签）
- +选择器： 例：#div1+p{} ：选中所有与div1为同一级别的p标签（不选中div1本身）
- []选择器： 例：p[class=“p1”]：选中所有p标签class属性为"p1"的p标签
input[type="button"]{}
:nth-of-type() ：该选择器选取父元素的第 N 个指定类型的子元素。
p:first-child{ /*选中父元素（body）第一个子元素，(如果是p的话)，就将该子元素背景设为红色*/
background-color: red;
}
p:first-of-type{ /*选中父元素（body）第一个同类子元素，(第一个p)，将该子元素背景设为蓝色*/
background-color: blue;
}
td:nth-child(2){ /*选中父元素(tr)第二个子元素，(td），将该单元格背景设为红色*/
background-color: red;
}
. . . . . .
浮动
脱标流，即脱离文档流（并没有脱离文本流），也称之为是浮动，或者是position的实现效果。（让块级元素能实现从左到右显示）
- position：设置坐标位置（需要设置坐标位置才能实现div等块的移动等操作）
- absolute：绝对定位，该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。
- relative： 相对定位，该元素相对于自己原有位置，偏移一定距离。相对的是自己。
- 脱标流会浮动在文档流的上面（掩盖住文档流）
css动画
@keyframes规则
- @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
格式：@-浏览器支持-keyframes 动画名称{…} - 注意：@keyframes只是定义一个物体的动画规律规则，需要用指定对象的animation属性去调用此规则
@keyframes myfirst{
....
}
- 浏览器支持：
Safari 和 Chrome ：需要加上-webkit-
Firefox ：需要加上-moz-
Opera：需要加上-o-
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
动画animation
调用动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
- 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
- 格式： 浏览器支持-animation: 动画名称 动画时长
div{
width: 300px;
height: 300px;
background-color: red;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
w3school
例子：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
过渡transition
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
格式：-webkit-transition: css属性 时间
.d1{
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
.d1:hover{
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg);
}
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
transition：不同简写属性之间空格分隔，相同属性之间逗号分隔
-webkit-transition: width 2s ,height 2s ,-webkit-transform 2s linear;
2D转换transform
translate(x,y) ：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
- 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。（类似于left/top）
- translateX(n)/translateY(n)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
以上代码能够起到水平垂直居中的效果
rotate(deg)：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 angle：角度
- 值 rotate(30deg) 把元素顺时针旋转 30 度。
scale(x,y)：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
- 值 scale(2,4) 把宽度转换为原始尺寸 2 倍，把高度的转换为原始高度的 4 倍。
- scaleX(n)/scaleY(n)
skew(x-angle,y-angle)：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
- 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
- skewX(x-angle)/skewX(y-angle)
matrix()：matrix() 方法把所有 2D 转换方法组合在一起。
- matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
- transform-origin()：允许你改变被转换元素的位置。w3school
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
