CSS总结

CSS

什么是CSS

中文名字：层叠样式表

CSS格式

选择器
{
属性：属性值；
}

选择器

1. 基础选择器

• 标签选择器

标签名
{
属性：属性值;
}

• 类名选择器

.类名（class的属性值）
{
属性：属性值;
}

• id选择器

 #id名(id的属性值)
 {
属性:属性值;
 }

• 通用选择器–>一般用于清除浏览器默认样式

 *{
属性:属性值;
 }

• 组合 div,p{}
• 后代 ul li{}
  *交叉 div .one{}

2. 伪类选择器
   • :hover
   • :focus，
3. 伪元素选择器
   • ::before
   • ::after
   • ::first-letter
   • ::first-line
4. 属性选择器
   • [attrname]—拥有属性 例：[data-name]{}
   • [attrname=value]—属性等于值 例：[data-name=uek]{ color: red;}
   • [attrname^=value]—开始等于值 例：[data-name^=uek]{color: blue;}–开头为uek字符的都变成蓝色
   • [attrname$=value]???结束等于值例：[data?name$=uek]{color: green;}–结尾为uek字符的都变成绿色
   • [attrname*=value]—包含值 例：[data-name*=uek]{ color:purple}–所有包含uek字符的都变成紫色
   • [attr1][attr2][attr3]… —交叉 例： p[data-name]{ color:pink;}

<p data-name="list-uek">gkfj</p>

5. 相邻选择器

• +~

"+"选择器----紧挨在h3之后的可以被选中

<style>h3+div{color:red;}</style>
<h3>标题</h3>
<div>111</div>

• "~"选择器----在之前的同级元素中有h3的p标签（在h3之后的同级p标签）

<style>h3~p{color:green;}</style>
<p>22222</p>
<h3>标题</h3>
<div>111</div>
<p>3333</p>
<p>4444</p>

6. 后代选择器

<style>
   ul li{
width: 100px;
height: 100px;
border: 1px solid #5e7387;
}
</style> 
<ul>
 <li></li>
 <li></li>
</ul>

7. 子代选择器

<style>
   ul>li{
 width: 100px;
 height: 100px;
 background: #ff6700;
 } 
</style> 
<ul>
 <li></li>
 <li></li>
</ul> 

8. 根据元素在父元素中的位置进行选择

1. :first-child： 是父元素的第一个子元素
2. :last-child： 是父元素的最后一个子元素
3. :nth-child(n)： 是父元素的第n个子元素

在nth-child中nth-child(even)表示偶数，nth-child(odd)表示奇数,nth-child(3n)，nth-child(5n)，nth-child(10n+1)

1. :nth-last-child： 是父元素中的倒数第n个元素
2. :only-child： 是父元素唯一的子元素
3. :first-of-type： 父元素中的子元素的第一个
4. :last-of-type： 父元素中的子元素的最后一个
5. :nth-of-type()： 父元素中的子元素的第n个
6. :only-of-type： 同类型（标签名相同)
7. :nth-last-of-type()： 父元素中的子元素的倒数第n个
8. :nth-last-child(n)~div：父元素中的子元素的倒数n个
9. :root： 根选择器
10. :before{ content:“”; display:block;}： 在某个元素的内容之前插入一个元素
11. :after{ content:“”; display:block;}：在某个元素的内容之后插入一个元素
12. :foucus： 获得焦点的状态

选择器的优先级

• id选择器>类名选择器>标签选择器>通用选择器*

引入CSS文件的方法

1. 引入外部CSS文件

在html文件中使用link标签引入外部css文件

  例如：<link rel="stylesheet" href="css文件路径">

2. 内嵌式css样式

   在html文件中通过style标签对写入css样式

  例如：<style>
选择器
{
属性：属性值;
}
</style>

3. 行内样式

在标签的开始标签内通过style属性写入ss样式

  例如：<div style="属性：属性值;"></div>

盒子模型

1.盒子模型概念：将页面中的内容想象成一个又一个盒子，布局的过程就可以理解为摆放盒子。
2.盒子模型的组成部分：
（1）内容content
（2）内填充padding（内边距)
书写方式：
{
1.四个方向分开去写
padding-left,padding-right,padding-top,padding-bottom
2.padding后跟不同的值
padding:(top,right,bottom,left);padding后面跟一个值表示四个方向都是这个数值。
padding:(top,bottom)(right,left);padding后面跟两个值分别表示上下，左右的内填充。
padding:(top)(right,left)(bottom);padding后面跟三个值分别表示上，左，右，下的内填充。
padding:(top)(right)(bottom)(left);padding后面跟四个值分别表示上，右，下，左的内填充。
}
（3）边框border
书写方式：
{
1.四个方向边框分开写
border-top、border-right、border-borrom、border-left
2.border:边框宽度 边框样式 边框颜色；–>这种表示方式只能用于四个方向边框相同的时候。
边框样式：实线solid
虚线dashed
点状线dotted
双线double
}
（4）外边距margin
{
1.上面的盒子的margin-bottom会和下面盒子的margin-top重叠，所以盒子的实际上下距离由两个之中最大的来决定
2.盒子在水平方向的实际距离是由左外边距之和决定
}
3.盒子的实际尺寸
宽度：width+左右的padding值+左右的border值；
高度：height+上下的padding值+上下的border值；
4.针对padding,border撑大盒子的问题
解决方法：
（1）盒子的宽高减少相应的尺寸
（2）给盒子添加属性：
box-sizing:border-box;

浮动(float)

1. 浮动的分类{左浮动，右浮动}
2. 浮动的作用：改变元素的默认排序方式，使元素脱离文档流。
3. 文档流：页面中的元素默认从上往下，从左往右排列的方式叫做文档流。
4. 浮动造成的问题：
   • 浮动后的元素脱离了文档流，将原来的位置空下，导致后面的元素改变其本来的排列位置，导致页面混乱。
5. 解决方法

1. 将浮动元素用一个父元素包起来，并且给父元素设置一个合适的高度。
2. 将浮动元素用一个父元素包起来，并且给父元素设置属性overflow:hidden;
3. 将浮动元素用一个父元素包起来，并且在这个父元素的最后再写一个子元素（必须是块标签），给这个子元素设置属性clear:left/both/right;
4. 将一个浮动元素用一个父元素包起来，给父元素添加伪元素after

例如：.box::after
{
  content:";
  display:block;
  clear:left/both/right;
}

6. 浮动的边界

浮动的边界是父元素的宽度，当浮动元素宽度超过父元素的宽度，浮动元素会另起一行

7. 卡顿问题：在浮动元素中尽量不要出现高度不同的情况
   当浮动元素另起一行的时候，会被前面较高的元素挡住，这种现象叫做卡顿。

属性

• 宽：width
• 高：height
• 背景：background
• 浮动：float
• 外边距：margin
• 内填充：padding
• 边框：border
• 圆角：border-radius:

1. 写具体值：最大为高度的一半
2. 写百分比：最大为50%

• 文字属性

{
字体:font-family
字体大小：font-size
字体颜色：color
水平对齐方式：text-align:left/center/right
行高：line-height-->用于文字垂直方向的居中对齐
字间距：letter-spacing
字重：font-weight
}

• 超出部分隐藏：overflow：hidden；
• 清除浮动：clear：left/both/right;
• 透明度

{
opacity：0~1；opacity是给盒子整体添加透明度，盒子中的所有内容透明度都会受影响
rgba()表示方式。只给盒子的背景添加透明度，不会影响盒子内其他内容。
 }

标签的转化

1. 转化为块标签

• 给元素添加属性：display：block；

2. 转化为行内标签

• 给元素添加属性：display：inline；

3. 转化我行内块标签

• 给元素添加属性：display：inline-block；

定位position

1.定位的应用：当页面出现层叠现象的时候，就要用到定位
2.层叠现象：类似于轮播图上会出现左右的点击按钮，轮播点，返回顶部等，这种现象就叫做层叠现象
3.定位的分类：

1. 相对定位：参照物是元素本身

给元素添加属性：
position：relative;
left：100px;
top：100px;
right：100px;
bottom：100px;

相对定位相对于元素原来的位置定位，定位后会保留元素原来的位置，会导致页面空间浪费，所以相对定位不直接使用，一般用于绝对定位的父元素。

2. 绝对定位：参照物是第一个有定位属性的父元素
   给元素添加属性：

给元素添加属性：
position：absolute;
 left：100px;
 top：100px;
 right：100px;
 bottom：100px;

绝对定位相对于第一个有定位属性的父元素定位，如果第一个父元素没有定位属性那么会一直往父级元素找，直到找到有定位属性的父级元素，如果父级元素都没有定位属性，那么元素相对于body定位。

3. 固定定位：参照物是浏览器的窗口

给元素添加属性：
 position：fixed;
 left：100px;
 top：100px;
 right：100px;
 bottom：100px;

固定定位相对于浏览器窗口定位，一般用于页面中的返回顶部按钮等。

在线icon图标的引入

1. 在阿里巴巴矢量图标库中搜索图标
2. 将图标加入购物车
3. 将购物车的图标添加至项目
4. 在项目中点击生成在线链接
5. 在html文件中通过link标签将在线链接引入

例：

6. 通过标签引入icon图标

例：

• 注意：引入的icon图标相当于文字，可以通过文字属性来设置icon的颜色，大小等属性。

圆角

• border-radius：30px;
  • 一个值表示四个角，
  • 两个值表示两条对角线，
  • 三个值表示左上、右上和左下、右下，
  • 四个值表示左上、右上、右下、左下，
  • 最多可以有八个值：border-radius：10px 20px 30px 40px/20px 30px 40px 50px;

阴影

1. box-shadow: 5px 5px 5px 10px #000 inset;

• 第一、二个值分别表示横向的偏移和纵向的偏移
• 第三个值表示阴影的模糊程度
• 第四个值表示阴影的大小变化（正值增大，负值减小），
  颜色，
  内发光

2. 可以设置多组

• 例： box-shadow: 0 0 0 1px #000,0 0 0 2px red,0 0 0 3px blue;

背景

• background-attachment: fixed;—图片固定在浏览器
• background-clip --背景的裁剪区域------那一部分会显示背景
  • background-clip: content-box; --内容部分显示
  • background-clip: border-box; --边框部分显示
  • background-clip: padding-box;–内边距部分显示 默认显示
  • background-origin: border-box;–设置背景图片的原点
  • background-size: 100px 100px ;–背景的大小
  • 100px 100px auto
  • 50% 50%
  • cover(优先铺满)
  • contain(优先展示图片)

其他

• outline: 1px solid blue;—轮廓线
• outline-offset: 10px;—轮廓线的边距

问题：不会随着圆角的改变而改变

• outline: none;–清除表单控件获得焦点后的轮廓线
• box-sizing:border-box;
• box-sizing:content-box; 默认显示
• calc()计算函数

transition 过渡

• transition-timing-function: linear;— 匀速过渡
• transition-property: a11;— 可以进行过渡的属性
• transition-duration: 1s; ---- 完成一次过渡效果所需要的时间
• transition-timing-function:cubic-bezier(1,0,0,1);— 速度变化趋势
  • ease-in 加速，
  • ease-out 减速，
  • ease-in-out 先加速后减速，
  • linear 匀速，
  • ease 与 ease-in-out 类似。
• transition-delay: 1s;— 过渡延迟

transform 转换

2D转换

1.位移
transform: translate(100px,100px);— 沿着x轴y轴位移
transform: translateX(100px);— 沿着x轴位移
transform: translateY(100px);— 沿着y轴位移
2.旋转
transform: rotate(45deg);— 旋转45度
3.缩放
transform: scale(1.5,1);— 缩放（大于1放大，小于1缩小）
4.斜切
transform: skew(30deg，30deg);— 斜切(横向纵向一起发生)
5.基准点
transform-origin: 0 0;
[transform:translate(100px,100px) scale(0.5,0.5) skew(30deg,30deg) rotate(360deg);]

3D效果

perspective:1000px;— 景深 默认观察点在屏幕正中心
transform:translateZ(800px);
transform: translate3d(100px, 100px, 300px);— x、y、z轴移动
transform: rotateY(360deg);— 沿着y轴旋转
transform: rotateX(360deg);— 沿着x轴旋转
transform: rotate3d(1,1,0,360deg);— 沿着对角线旋转
transform-style: preserve-3d;— 当前元素的子元素 呈现的方式
backface-visibility: hidden;— 设置元素背面是否可见
perspective-origin:center top;— 观察者的位置【正上方】

元素居中的问题

1.元素水平居中：margin：0 auto
2.定位元素水平居中：
position：absolute;
left：0;
right：0;
margin: 0 auto;
3.定位元素垂直居中：
position: absolute;
top:0;
bottom: 0;
margin: auto 0;
4.定位元素居中：
position: absolute;
left:0;
top:0;
right:0;
bottom: 0;
margin: auto;

animation动画

定义动画的名称
animation-name: demo;
定义动画的时间
animation-duration: 3s;
定义速度变化的时间函数
animation-timing-function: linear;
动画的延迟
animation-delay: 1s;
动画的播放次数
animation-iteration-count: 3;
animation-iteration-count: infinite;无数次
动画最终停留的状态
animation-fill-mode: forwards;—停留在结束状态
animation-fill-mode: backwards;—停留在开始状态
方向：正向、反向、交替
animation-direction: alternate;—方向交替
停止
animation-play-state: paused;/鼠标放上去就停止/

渐变 生成的是图片

线性渐变

background-image: linear-gradient(to right,red,blue);--从左往右 
 background-image: linear-gradient(to right top,red,blue);--从左下往右上 
 background-image: linear-gradient(30dep,red,blue);--角度 
 background-image: linear-gradient(30dep,red 0,red 50%,blue 50%);--一半一半 
 background-image: linear-gradient(to right bottom,#fff 0,#fff 30px,transparent 0),
 linear-gradient(to right top,#fff 0,#fff 30px,transparent 0),
 linear-gradient(to left bottom,#fff 0,#fff 30px,transparent 0),
 linear-gradient(to left top,#fff 0,#fff 30px,transparent 0); --做切角
 background-image: linear-gradient(45deg,red 0,red 20%,blue 0,blue 40%,green 0,green 60%,  yellow 0,yellow 80%,pink 0);
 background-size: 30px 30px;
 background-repeat: repeat;  ---图案重复

径向渐变

background-image: radial-gradient(circle closest-side at 100px 150px,red 0,red 50%,blue 0,blue 100%,transparent 0);--形状 距离 中心点，颜色

/* closest-side：最近的边  closest-corner：最近的角  farthest-side：最远的边 farthest-corner：最远的角 */

background-image: radial-gradient(red 0,red 50%,blue 0,blue 100%,transparent 0);--一半一半

background-image: repeating-radial-gradient(circle,red 0,red 10px,blue 0,blue 20px);--重复渐变

background-image: radial-gradient(circle at 15px 15px,red 0,red 10px,transparent 0);

background-size: 30px 30px;----做波点图

background-image: radial-gradient(circle at 0 0,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 300px 0,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 0 300px,#fff 0,#fff 50px,transparent 0),radial-gradient(circle at 300px 300px,#fff 0,#fff 50px,transparent 0);---实现切角效果