css基础知识

1.概念

CSS(英文全称：Cascading Style Sheets)，层叠样式表。它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS可以帮助调整排版布局的展现美化标签和内容提高版面的信息密度加强信息的冲击力和直观性

2.书写位置

css代码分为内部样式、外部样式、行内样式三种写法。

1.内部样式

写在HTML文档的style标签中，style通常放置于头部：

<head>
  <style>
    /*这里写css代码*/
  </style>
</head>
复制代码

style标签可以加上type="text/css"这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。

2.外部样式

单独创建.css后缀的文件，然后通过link标签引入，通常放置于头部：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" /*当前与链接的关系*/ >
</head>
复制代码

3.行内样式/内联样式

直接写在标签属性中：

<body>
  <p style="css代码">段落文字</p>
</body>
复制代码

4.三种方式比较

样式表	优点	缺点	使用情况	使用场景
行内样式表	书写方便，权重高	没有实现结构与样式分离，不便于维护，不可以重复利用	极少	某个标签需要单独的样式设置时使用
内部样式表	部分结构与样式分离，较便于维护	没有彻底实现结构与样式分离，不可以重复利用	一般	css代码量不多，且和当前页面联系紧密不需要复用时使用
外部样式表	完全实现结构与样式分离，可重复利用	如果代码量较少情况下，引入法更麻烦	最多，推荐	css代码量大时，或者需要重复利用时使用

3.基本选择器

1.选择器分类

id选择器#

#box，选中id名为box的标签。
class选择器.

.box1，选中所有class名为box1的标签。
标签选择器

p，选中所有p标签。
后代选择器

#box .box1，选中box标签中所有拥有box1类名的后代标签。
通配选择符

*，选中页面中所有元素

2.id与class命名

id命名唯一，单个标签不允许拥有多个id名，同页面中不存出现重复的id名（id重名会影响js代码获取标签）
class命名不唯一，单个标签可以拥有多个class名，不同标签允许使用相同class名

3.选择器权重

如果同一个标签被多个选择器赋予了相同的属性且值不一样时，会按照选择器的优先级来决定以哪个样式为准，比如：

<!--css代码-->
.info{color: green;}
p{color: red;}

<!--HTML代码-->
<p class="info">段落文字</p>
复制代码

此时.info和p都选中了这个p标签，并且两者规定了不同的字体颜色，那么最终显示出的颜色就要根据选择器的优先级来决定。

!important > 行内 > id > class|属性|伪类 > 标签 > 通配符|兄弟|相邻兄弟|子代 > 继承
先比较级别，级别一样比较各级别选择器出现的次数
当两个选择器权重一样时，以最后出现的为准

4.文本文字

1.文字样式

文字颜色

color: 颜色值;
文字大小

font-size: px / % / em / rem;

（em：相对长度单位，默认浏览器）

（rem；相对根目录即html）
文字粗细

font-weight: 值 ;

值作用

bold 定义粗的字体

bolder 定义更粗的字体

lighter 定义更细的字体

normal 定义正常的字体大小

100-900 整百数数值
字体类型

font-family: 字体名称 ;
字体斜体

font-style: 值 ;

值作用

normal 正常

italic 斜体，换成一种斜体字体

oblique 倾斜，强制倾斜文字，有些文字没有斜体字体时这个属性也可以让它倾斜
小型大写字母

font-variant: 值;

值作用

normal 正常

small-caps 小型大写字母
行高
line-height: 值 ;
复合写法

font: 斜体小型大写粗细字体大小/行高字体类型 ;

字体大小和行高必须用 / 合在一起，不能分开；

不一定每一项都必须写，即使省略某些项也不会影响后面。

值	作用
bold	定义粗的字体
bolder	定义更粗的字体
lighter	定义更细的字体
normal	定义正常的字体大小
100-900	整百数数值

值	作用
normal	正常
italic	斜体，换成一种斜体字体
oblique	倾斜，强制倾斜文字，有些文字没有斜体字体时这个属性也可以让它倾斜

值	作用
normal	正常
small-caps	小型大写字母

2.段落样式

水平对齐方式 text-align

值作用

left 居左对齐

center 居中对齐

right 局右对齐
首行缩进 text-indent

值	作用
left	居左对齐
center	居中对齐
right	局右对齐

（常用px em）

大小写 text-transform

值作用

none 默认值

uppercase 全部转化大写

lowercase 全部转化小写

capitalize 首字母转换为大写
文本线 text-decoration

值作用

none 没有文本线

underline 下划线

line-through 中划线

overline 上划线
字间距 letter-spacing
词间距 word-spacing
换行方式 white-space

nowrap 本不换行
长单词换行方式 word-break

值作用

normal 默认值，使用浏览器默认的换行方式

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行
溢出显示方式 text-overflow

clip 默认，裁剪文本

ellipsis 显示省略符号来代表被修剪的文本

值作用

clip 默认，裁剪文本

ellipsis 显示省略符号来代表被修剪的文本

值	作用
none	默认值
uppercase	全部转化大写
lowercase	全部转化小写
capitalize	首字母转换为大写

值	作用
none	没有文本线
underline	下划线
line-through	中划线
overline	上划线

值	作用
normal	默认值，使用浏览器默认的换行方式
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

值	作用
clip	默认，裁剪文本
ellipsis	显示省略符号来代表被修剪的文本

垂直对齐 vertical-align

vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。取值如下：

值	解释
baseline	默认。元素的基线与父元素的基线对齐
top	元素的顶端与一行中最高元素的顶边对齐
middle	元素的中垂点与父元素的基线加1/2父元素中小写字母x的高度对齐
bottom	把元素的底端与一行中最高元素的底边对齐
text-top	元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐

只针对inline、inline-block、图片或表格有效；

top、middle、bottom和line-height有关，baseline、text-top、text-bottom和font-size有关；

5.背景

背景与内容的层叠关系3D示意图

background属性用于设置盒子的背景颜色或者背景图片。

这是一个复合属性：

backgorund: color image repeat position/size attachment ;
复制代码

1.背景颜色

background-color

背景色默认是会延伸到border下方的：

<style>
  #box{
    width: 100px;
    height: 100px;
    background-color: #ff6600;
    border: 10px dashed #000;
  }
</style>
<div id="box"></div>
复制代码

2.背景图片

background-image

/* case 1 : 不插入背景图 默认 */
div{ background-image: none; }

/* case 2 : 插入背景图 */
div{ background-image: url("路径"); }
复制代码

同上，背景图片默认也是会延伸到border下方的。

3.背景图片平铺方式

background-repeat

背景图片平铺方式

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }

/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }

/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }

/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }
复制代码

4.背景图片位置

background-position: X Y ;

X和Y默认是：0 0

X允许的取值方式	Y允许的取值方式
left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
百分比	百分比
px	px

如果只给一个值，那么第二个值默认center（50%）;

X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。

5.背景图片尺寸

background-size

通常用于在不改变图片宽高比的情况下，铺满盒子。

值	作用
X Y	X和Y默认和原图宽高对应，同时X Y可以是自己设定的百分比或像素
cover	等比例缩放直到铺满X轴和Y轴；
contain	等比例缩放直到铺满X或Y轴其中一个（其中一个满了就不缩放）

6.背景附件

background-attachment

background-attachment：scroll; 默认值，背景随滚动而滚动；

background-attachment: fixed; 背景不随滚动而滚动

7.背景图片和img标签对比

背景图片不占用content内容部分，而img标签会占用。
背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。

如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。

如果是确却的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。

6.圆角、阴影、透明

1.圆角

border-radius 圆角，让矩形盒模型拥有圆弧边缘；

取值通常使用百分比值% 或 像素值px ；

值	作用
四个值	左上、右上、右下、左下
三个值	左上、右上左下、右下
两个值	左上右下、右上左下
一个值	四个角同一值

圆角可以分解为更细的分解属性，比如左上角：border-top-left-radius

2.阴影

box-shadow盒子阴影，让盒子四周产生阴影；

div{
    box-shadow:10px 5px 10px 5px red outset;
    /*
        第一个值：水平偏移（必需）
        第二个值：垂直偏移（必需）
        第三个值：模糊距离（可选，默认0）   从扩散边缘开始，向外逐渐模糊的距离
        第四个值：扩散距离（可选，默认0）   规则从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
        第五个值：隐藏颜色（可选，默认黑色）
        第六个值：阴影扩散方向（可选，默认ouset向外扩展，可以改为inset向内扩展）
    */
}
复制代码

3.透明

opacity属性规定元素的透明度，取值 0（完全透明） ~ 1（完全不透明）；

7.鼠标光标

cursor属性规定鼠标移入元素时的样式，取值如下：

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认值。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。

8.高级选择器

1.高级选择器

写法	名称	举例
选择器 , 选择器	组合选择器（多个选择器使用同一样式）	#nav p,#tab a{ font-size: 12px; }
父 > 子	子元素选择器（只会选取儿子）	div>a{ color:red; }
兄 + 弟	相邻兄弟选择器（紧挨着哥哥的弟弟）	p + a{ color:red; }
兄 ~ 弟	关联选择器（元素后续的元素）	p ~ a{ color:red; }
[attr]	属性选择器（拥有attr标签属性）	[title]{ color:red; }
[attr=val]	属性选择器（拥有标签属性attr并值为val）	[target=_blank]{ color:red; }
[attr*=val]	属性选择器（拥有标签属性attr并值包含val）	[src*=baidu]{border:5px solid pink;}
[attr$=val]	属性选择器（拥有标签属性attr并值以val结尾）	[src~=jpg]{ border:5px solid pink; }
[attr\|=val]	属性选择器（拥有标签属性attr并值以val开头）	[class\|=nav]{ background:pink; }
选择规则1选择规则2	复合选择器（多个规则来匹配元素）	div.nav.left{ width:100px; } 有nav和left类名的div标签

2.伪类选择器

当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

状态类

写法	介绍	举例
:hover	鼠标悬停	a:hover{color:pink;}
:link	未被访问的链接（特指a标签）	a:link{color:red};
:visited	被访问过的链接（特指a标签）	a:visited{color:blue;}
:active	被点击按下状态	a:active{color:green;}

:hover :active 不仅仅能用在a标签上。

可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;}

写法	介绍	举例
:focus	获得焦点状态	input:focus{border:1px solid blue;}
:checked	（单选/多选）表单被勾选状态	input:checked{background-color:#aaa;}

结构类

写法	介绍	举例
E:nth-child(n)	E元素父级的第n个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:nth-child(2){color:red;}
E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

上述选择器 n 所表示的可以是一个数字或者奇数odd 或者偶数even 或者一个表达式，举例：

#wrap p:nth-child(2){color:red;}

#wrap p:nth-child(odd){color:red;}

#wrap p:nth-child(even){color:red;}

#wrap p:nth-child(3n+1){color:red;}
复制代码

:nth-child(n) :nth-of-type(n)有对应的“倒着数”属性

:nth-last-child(n) :nth-last-of-type(n)。

3.伪元素选择器

伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。

写法	介绍	举例
E::before	相当于在E元素的最前面添加一个额外的子元素	#wrap::before{content:”Hello World!”}
E::after	相当于在E元素的最后面添加一个额外的子元素	#wrap::after{content:”Hello World!”}

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

::after常用来清除浮动。

content 除了写文字之外，还可以用url指定一张图片等其他写法。

其他不常用的伪元素：

写法	介绍	举例
E::first-line	首行样式	p::first-line{color:red;}
E::selection	用户复制选中部分	p::selection{background-color:pink;}

9.过渡与动画

1.过渡

我们需要指定动画的第一帧与最后一帧，然后由transition自动生成中间的动画帧。

也就是说需要元素的属性发生改变，配合transition即可得到动画。

transition: 过渡属性过渡时长速度曲线延迟时长;

transition-property

哪个属性需要过渡。默认值 all，表示全部属性都应用过渡。

transition-duration

过渡持续时间。通常用秒s 或者毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

transition-timing-function

定义过渡的速度曲线。默认值ease。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay

过渡延迟多久后开始执行。通常用秒s 或者毫秒ms作单位。默认值0。

2.动画

与transition不同的是，animation可以定义好关键帧然后主动的执行动画。

定义关键帧

 @keyframes xxx{ /*xxx为自定义的动画名，可以按照见名知意的原则进行命名*/
     0%{/*第一帧*/
         width: 100px;
     }
     
     30%{/*中间帧会自动生成，也可按照需要自行补帧*/
         width: 0px;
     }
     
     100%{/*最后一帧*/
         width: 500px;
     }
 }
复制代码

调用动画

 #wrap{
     width: 100px;
     height: 200px;
     background-color: red;
     
     animation: xxx 5s;/*在5s的时间内，完成xxx指定的动画*/
 }
复制代码

animation分解属性

animation: name 、duration 、timing-function 、delay 、iteration-count 、direction;

animation-name

调用哪一个动画（哪一个@keyframes）。默认值none，所以必须设置对应动画名。

animation-duration

动画持续时间。通常用秒s 或者毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

animation-timing-function

动画的速度曲线。同transition-timing-function的取值一样，不再赘述。

animation-delay

动画延迟多久后执行。通常用秒s 或者毫秒ms作单位。默认值0。

animation-iteration-count

规定动画的播放次数，默认值 1 。如果想要无限循环则设置值为 infinite 。

animation-direction

规定动画是否反向播放，默认值normal。如果需要反向播放则设置值为 alternate 。reverse 反向一直循环

当设置了反向播放时，动画的播放次数必须大于 1，才能生效。因为第一次播放是不会反向的，第二次播放才会反向，所以动画播放次数起码是2次，才能看到反向效果。

10.transform变形

rotate

transform: rotate(角度值) 设置元素绕着中心的旋转效果。角度值为正，元素顺时针旋转；角度值为负，元素逆时针旋转。
translate

transform：translate(偏移量1, 偏移量2); 设置元素以自身初始位置为原点的偏移效果。
偏移量1:定义元素水平方向的偏移量；可以单独用translateX()来设置。
偏移量2:定义元素垂直方向的偏移量；可以单独用translateY()来设置。
scale

transform: scale(倍数); 设置元素的缩放倍数。

倍数 0~1，元素缩小；

倍数 >1，元素放大；

倍数 <0，元素倒置（-1~0 倒置缩小，小于-1 倒置放大）。

倍数可以设置两个值，分别表示水平方向缩放倍数scaleX、垂直方向缩放倍数scaleY。
skew

transform: skew(角度); 设置元素的倾斜角度。

角度可以设置两个值，分别表示水平方向倾斜角度skewX、垂直方向倾斜角度skewY。

变化原点

每个元素都有一个 transform-origin（变化原点）样式，其默认位置正好位于元素的水平中心和垂直中心线的交叉点。默认值为transform-origin:50% 50%; /*变化原点：水平位置垂直位置*/。

可以根据需要自行设置变化的原点位置。例如：

设置左顶点为原点 transform-origin:0 0;
设置元素外的某个点为原点 transform-origin:-100% -100%;

变换顺序组合

transform 可以使用符合写法，比如：transform: scale(*) translate（*, *）skew(*) rotate(*);

变化样式内多个样式值顺序的不同会导致完全不一样的结果，比如：transform:translateX(200px) translateY(200px) rotate(45deg); 和 transform:rotate(45deg) translateX(300px) translateY(200px) ;效果是不一样的。

transform:translateX(200px) translateY(200px) rotate(45deg);
transform:rotate(45deg) translateX(300px) translateY(200px) ;