CSS笔记

一、选择器

1.标签选择器

标签名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
...
}

2.id和class选择器

#first{
    color:pink;
}

.box {
   width: 150px;
   height: 100px;
   font-size: 30px;
}

3.通配符选择器

 * {
    color: red;
 }

4.后代选择器

可以选择父元素里面子元素

ol li a {
     color: red;
}

5.子选择器

只能选择作为某元素的最近一级子元素

 .nav>a {
     color: red;
  }

6.并集选择器

div,
p {
	color: pink;
}

7.交集选择器

既能被选择器1选中，又能被选择器2选中
选择器之间是紧挨着的
如果有标签选择器，标签选择器必须写在最前面

p.red {
	color: red;
}

8.伪类选择器

一般与a标签搭配使用，也可用于元素的过渡

/*未访问的链接*/
a:link {
    color: #333;
    text-decoration: none;
}

/*访问过的链接*/
a:visited {
    color: orange;
}

/*鼠标活跃的链接*/
a:hover {
    color: skyblue;
}

/*鼠标正在按下还没有弹起的那个链接 */
a:active {
    color: green;
}

9.focus伪类选择器

:focus 伪类选择器，用于选取获得焦点的表单元素

input:focus {
    background-color: pink;
    color: red;
}

10.结构伪类选择器

根据元素在HTML中的结构关系查找元素
减少对与HTML中类的依赖
常用与查找父级元素中的子元素

选择器	说明
E:first-child{}	匹配父元素的第一个子元素
E:last-child{}	匹配父元素的最后一个子元素
E:nth-child(n){}	匹配父元素的第n个子元素
E:nth-last-child(n){}	匹配父元素的倒数第n个子元素

n的常见公式：
偶数：2n | even
奇数：2n+1 | odd

11.伪元素

必须设置content属性才能生效
伪元素默认是行内元素

伪元素	说明
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

.father::before {
    /* 必加的属性 */
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-color: orange;
}

12.属性选择器

/* 找到页面中的input，并且需要有type属性 */
input[type]:focus{
    background-color: pink;  
}
/* 找到页面中的input，并且需要type属性值为text */
input[type="text"] {
    background-color: red;
}

二、字体样式

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

1.font-family

font-family: '微软雅黑';

2. font-size

font-size:15px;

3.color

color:blue;

4.font-weight

font-weight:normal | bold | 400 | 500 | 600;

5.font-style

font-style:normal | italic | oblique

6.复合写法

font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei'; 

font: italic 700 16px 'Microsoft yahei';

三、文本样式

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-variant	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
text-shadow	文本阴影
line-height	行高

1.text-decoration

text-decoration:none | underline(下划线) | line-through(删除线) | overline(顶格线)

2.text-transform

转换文本的大小写，只是针对英文而言
text-transform:none | uppercase(大写) | lowercase(小写) | capitalize(首字母大写)

3.font-variant

把文本设置成小型大写字母，只是针对英文而言
font-variant:normal | samll-caps(小型大写字母)

4.text-indent

文本首行的缩进
text-indent:16px

5.text-align

文本对对齐方式
只能针对文本文字和 标签，对其他标签无效
text-align:left | center | right

5.text-shadows

文本阴影
text-shadow: h-shadow v-shadow blur color;

6.line-height

行高
line-height:1.6

四、边框样式

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色
border-radius	边框圆角

1.border-weight

边框的宽度
border-weight:5px;

2.border-style

边框的外观
border-style:none | solid(实线) | dashed(虚线)

3.border-color

border-color:#000

4.border-radius

border-radius:50%

4.边框复合写法

/*所有边框*/
border:5px solid blud

五、背景样式

属性	说明
background-color	背景颜色
background-image	背景图像的路径
background-repeat	图像显示方式
background-position	背景图像定位
background-attachment	是否随内容滚动

1. background-color

backgroud-color:pink

2.background-image

设置背景图像
background-image:url("src/img01.jpg")

3.background-repeat

定义背景图像的显示方式，例如不平铺、横向平铺和两个方向都平铺
background-repeat:no-repeat | repeat(默认平铺) | repeat-x | repeat-y

4.backgroud-position

定义了背景图像在该元素的位置
background-postion:center top
background-postion:10px top

5.background-attachment

设置背景图像是随对象滚动还是固定不动
fixed 背景相对于视口固定
local 相对于元素的内容固定
scroll相对于元素本身固定
background-attachment:fixed | local | scroll

6.背景的复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;

六、图片样式

属性	说明
width	宽
height	高
border	边框
text-align	水平对齐
vertical-align	垂直对齐(top middle baseline bottom)

七、列表样式

属性	说明
list-style-type	列表项符号
list-style-image	自定义列表项符号

1.list-style-type

none 去除列表符号
有序列表
decimal 默认123
lower-romen 小写罗马数字i、ii、iii
upper-roman 大写罗马数字I、II、III
lower-alpha 小写英文字母a、b、c
upper-alpha 大写英文字母A、B、C
无序列表
disc 默认值，实心圆 ●
circle 空心圆 ○
aquare 实心正方形 ■

2.list-style-image

list-style-image:url(img.png)

八、表格样式

属性	说明
border	边框
border-collapse	边框是否合并(separate | collapse 合并
border-spacing	表格边框间距
weight height	宽度与高度
caption-side	表格标题位置

1.border

表格边框
border:1px solid #000

2.border-collapse

边框是否被折叠成一个单一的边框或隔开
border-collapse:separate(默认值) | collapse(边框合并)

3.border-spacing

定义表格边框间距
border-spacing:5px 10px

4.caption-side

表格标题的位置
caption-side:top(默认) | botton

九、盒子模型

• 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• margin border padding content

1.border

属性	作用
border-width	定义边框粗细
border-style	边框的样式
border-color	边框颜色

border : border-width || border-style || border-color
none：默认值
solid：单实线
dashed：虚线
dotted：点线

2.padding

设置内边距，即边框与内容之间的距离
padding-top``padding-right``padding-bottom``paddign-left

值的个数	表达意思
padding:5px;	设置全部内边距
padding:5p 10px;	上下为5px，左右为10px
padding:5px 10px 20px;	上5px，左右10px，下20px
padding:5px 10px 20px 30px;	上右下左

3.maggin

设置外边距，即控制盒子和盒子之间的距离
margin:0 auto盒子水平居中

4.box-sizing

box-sizing:border-box

5.box-shadow

box-shadow:h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。

十、浮动布局

• 浮动元素会生成一个块级框，而不论它本身是何种元素

folat:left | right

十一、定位布局

• position 定位 = 定位模式 + 边偏移(top bottom left right)

• static 静态定位

• relative 相对定位

• absolute 绝对定位

• fixed 固定定位

• sticky 粘性定位

1.static 静态定位

静态定位是元素的默认定位方式，无定位的意思
在布局时很少用到

2.relative 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
相对定位并没有脱标。它最典型的应用是给绝对定位当父元素的
postiton:relative

3.absolute 绝对定位

元素在移动位置的时候，是相对于它祖先元素来说的
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置(脱标)
position:absolute

4.fixed 固定定位

固定定位是元素固定于浏览器可视区的位置
以浏览器的可视窗口为参照点移动元素
固定定位不再占有原先的位置(脱标)
position:fixed

5.sticky 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照点移动元素（固定定位特点
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
position:sticky; top:10px;

6.z-index 叠放次序

使用 z-index 来控制盒子的前后次序 (z轴)
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

十二、用户界面样式

• 界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

• 更改用户的鼠标样式

• 表单轮廓

• 防止表单域拖拽

1.cursor 鼠标样式

cursor:default | pointer | move | text | not-allowed
pointer 鼠标小手
move 鼠标移动
text 鼠标文本
not-allowed 鼠标禁止

2.outline 轮廓线

活跃状态下的样式
outline:0 | none 去掉默认的边框样式

input {
    outline: none; 
}

3.resize 防止拖拽文本域

textarea{
	resize:none;
}

十三、overflow、display、visibility

1.overflow

控制内容溢出元素框时显示的方式
overflow:visible | hidden | scroll | aoto | inherit

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

2.display与 visibility

display属性设置一个元素应如何显示
visibility属性指定一个元素应可见还是隐藏
visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

十三、transition 过渡

• **作用：**让元素的样式慢慢变化，常配合hover使用

div {
    width: 200px;
    height: 200px;
    background-color: red;
    /* 过渡: 属性名 时长*/
    transition: all 1s;
}
div:hover {
    width: 800px;
    background-color: yellow;
}

十四、transform 转换

• Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

• 经常和transition搭配使用

• translate(x,y) 2d转换

• scale(x，y) 2d缩放

• rotate(angle) 2d旋转 (deg）

十五、animation 动画

• 动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果

• 相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果

@keyframes	规定动画
animation	简写属性，除了animation-play-state
animation-name	使用的动画
animation-duration	动画时间
animation-timing-function	速度曲线，默认是"ease"”。
animation-delay	何时开始，默认是0.
animation-iteration-count	播放的次数，默认是1,还有 infinite
animation-direction	是否在下一周期逆向播放，默认是" normal" alternate逆播放
animation-play-state	是否正在运行或暂停。默认是" running" 还有’ paused 暂停
animation-fill-mode	规定动画结束后状态：forwards (保持)、backwards(回到起始)

1.@keyframes 定义动画

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数

• 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%

@keyframes animation{
	0%{
	...
	}
	100%{
	...
	}
}

@keyframes move {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(1400px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  /* 调用动画 */
  animation-name: move;
  /* 持续时间 */
  animation-duration: 3s;
}

2.animation-direction 动画是否逆向播放

animation-direction:norma | reverse | alternate | alternate=reverse

normal 默认的
reverse (终点=>起点)
alternate 到达终点是否原路返回 (起点=>终点=>起点)
alternate-reverse (终点=>起点=>终点)

3.animation-fill-mode 动画结束后状态

animation-fill-mode:forwards | backwords

forwards 保持当前位置
backwards 回到初始位置

4.animation-timing-function 动画速度曲线

@keyframes move {
    0% {}
    100% {
        width: 200px;
}
    
div {
  width: 0;
  height: 30px;
  background-color: teal;
  /* animation: move 4s linear forwards(保持现状); */
  animation: move 4s steps(10) forwards;
}

值	描述
linear	匀速
ease	默认。低速-加快-变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束。
steps	时间函数中的间隔数量

5.animation 简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

/*animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;*/
animation:move 1s ease 2s 3 alertnate fowwards

@keyframes move {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(1000px, 0);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  /* 动画名称 */
  /* animation-name: move; */
  /* 持续时间 */
  /* animation-duration: 2s; */
  /* 速度曲线 */
  /* animation-timing-function: ease-in; */
  /* 何时开始:延迟一秒 */
  /* animation-delay: 1s; */
  /* 重复次数 */
  /* animation-iteration-count: 2; */
  /* 是否逆向播放 */
  /* animation-direction: alternate-reverse; */
  /* 结束后状态 */
  /* animation-fill-mode: forwards; */

  animation: move 2s linear 0s infinite alternate forwards;
}
/* 鼠标经过暂停动画 */
div:hover{
  animation-play-state: paused;
}