前端系列——CSS

CSS

层叠样式表

功能

1. 美化页面
2. 样式布局

CSS的组成

选择器{
    属性:值;
}

如何在html中写css

1.使用link标签进行样式和内容分离（最推荐，最常用，最规范）

css的名称和html的名称一致，只是后缀名不同，通过在头部标签中使用标签进行引入使用

2.直接写在html内部的标签内，使用

基础知识

什么是px

px是指像素的意思，1px就是一个像素点，是我们常用的长度单位

长度单位

1. px像素（浏览器端）
2. rpx自适应像素（手机）
3. vh，vw浏览器的宽高
4. em按照字体大小设置宽度和高度（自己的或父元素的）
5. rem和em相似，但是根据根元素设置的宽高
6. %百分比，通过父级进行设置宽高

css选择器

1. 标签选择器
2. class选择器/类选择器
3. id选择器
4. 属性选择器（不介绍）
5. 伪元素选择器
6. 通配符选择器

通配符（等级最低，其他选择器可以直接覆盖）

作用

定义全局的公用样式

语法

*{
    声明
}

例子（最常用的）

*{
  /* 内边距 */
  padding: 0;
  /*外边距*/
  margin: 0;
  /* 字体大小 */
  font-size: 16px;
}

标签选择器（所有相同名字的标签，样式全部相同）

有哪些标签就可以写哪些选择器

语法

<div></div>
div{
  
}

例子

<div>i am div</div>
  <span>i am span </span>
  <span>i am span2</span>
  <span>
    i am span3
  </span>
//
div{
  font-size: 60px;
}

span{
  font-size: 40px;
}

class选择器/类选择器（class可以覆盖标签选择器）

class：班级，类
class选择器是可以被复用的

语法

.class选择器名称{
    声明
}

例子

<div class="cl1">i am div</div>
  <span>i am span </span>
  <span>i am span2</span>
  <span class="cl1">
    i am span3
  </span>

.cl1{
  font-size: 20px;
}

id选择器

不可以被复用，每个都独一无二（id只存在一个）

语法

#id名{
    声明
}

例子

//不能复用
<span id="sp1 sp2">i am span </span>

#sp2{
  font-size: 10px;
}

<span id="sp1">i am span </span>

#sp1{
  color: red;
}

伪元素选择器

语法+例子

任意选择器：/::{
    声明
}

.cl1:hover{
  color: brown;
}

.cl1::before{
  display: block;
  content: "i am" ;
  height: 50px;
  width: 360px;
  background-color: aqua;
}
.cl1:active{

}

.cl1:nth-child(){

}

.cl1::content{
  
}

CSS属性整理

字体

  /* 字体大小 */
  font-size: 100px;
  /* 字体样式 */
  font-style: italic;
  /* 字体粗细，100~500=细，600~900=粗 */
  font-weight:700;
  /* 将小写转大写 */
  /* font-variant:small-caps; */
  /* 设置行高，常用于将字体盒子撑开或者设置盒子大小 */
  line-height: 100px;
  /* 设置字体 */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  /* 字体居中 */
  text-align: center;
  /* 字体颜色，以后一律使用16进制 */
  color: #9bd11c;
  /* 设置透明度（0~1） */
  opacity: 0.8;

文本

字体转换

/* 定义元素的文本如何转换大小写。 */
  text-transform:capitalize;

文本空格

 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行
 white-space: pre;

文本间距

指定字符之间的额外间隙。 
letter-spacing: 10px;

设置首行缩进

text-indent: 20px;

纵向对齐

定义行内元素在行框内的垂直对齐方式。 
vertical-align:baseline;

文本装饰

text-decoration-line:underline;
text-decoration-color: rgb(114, 236, 236);
text-decoration-style:double;

文字阴影

text-shadow: 10px 10px 10px #1c7ad1 ;

文本方向

 /*设置文本的方向*/
  direction: rtl;
只对块或行内块生效

文字方向

/*设置文本的方向*/
  direction: rtl;
  行标签“不起效”
  unicode-bidi:bidi-override;
  添加如上样式可以使得行标签直接生效

宽度

设置元素的宽度
  min-width: 200px;
  width: 150px;
  max-width: 400px;
若设置了最大宽度和最小宽度则元素的宽度只能在这个区间中生效
超过最大显示最大，低于最小显示最小

高度

设置元素的高度
  min-height: 200px;
  height: 150px;
  max-height: 400px;
若设置了最大高度和最小高度则元素的高度只能在这个区间中生效
超过最大显示最大，低于最小显示最小

内边距和外边距

padding: 10px 20px 30px 40px;
margin: 20px;
可以分别设置：
padding-left/top/bottom/right
设置两个值：
padding: 10px 20px;(上下10px的内边距，左右20px的内边距)
设置四个值：（上，右，下，左）

设置背景色

background-color: #a52a2a;
建议使用16进制6位表示

background-image: url('D:/Pictures/QQ截图20220603113924.png');
//设置是否复制
background-repeat: repeat;
//设置背景图片大小
background-size: 65%;
//设置图片出现的位置
background-position:bottom;
//背景裁剪
 background-clip:content-box;

设置渐变背景

  //线性渐变
  background-image:linear-gradient(60deg,#705d5d,#45b373,#ddd,#dff000);
  //径向渐变
  radial-gradient()
  //锥形渐变
  conic-gradient()

边框

 border: 10px inset #000;

边框类型

盒子阴影

//外阴影
box-shadow: 5px 5px 5px 5px #808080;
//内阴影
box-shadow: inset 5px 5px 10px 10px #808080;

圆角边框

border-radius: 25px;
border-radius: 25px 0 10px 0;
原理：
固定值：使用半径为x的圆对边框进行内切割
百分比：外切
border-image-width: 20%;
border-image-source: url('D:/Pictures/QQ截图20220601090113.png');
border-image-slice:1;
border-image-outset: 20px;

border-image-repeat

postion定位

position: absolute;
 top: 50%;
 left: 20%;
 right
 bottom

权重（盒子层级）

 定义一个元素在文档中的层叠顺序
 z-index: 2;

销毁标签

display:none

将行标签转化为块标签

display: block;

将块标签转化为行标签

display: inline;

将任意标签转化为行内块标签

display: inline-block; 

流布局

display: flex;
//控制行内显示位置
justify-content:baseline;（图1）
justify-content:space-around;（2）
justify-content:space-evenly;（3）
justify-content:space-between;（4）
justify-content:center;（顶部中间靠一起）
//控制纵向显示位置
align-items: center;（5）
align-items:flex-end;（6）
//该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
 flex-wrap: wrap;(换行显示，7)
 flex-wrap: wrap-reverse;（倒转换行，8）

浮动布局

float:left;
多设置为向左或向右浮动
//清除浮动，让浮动元素换行
clear: both;（left，right）

设置是否可视化

 visibility: hidden;

设置容器内内容溢出显示

overflow: hidden;

设置有序列表增长值

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>content-increment_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test ol{margin:16px 0;padding:0;list-style:none;}
.test li li:before{color:#f00;font-family:georgia,serif,sans-serif;}
.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname)".";}
.counter2 li{counter-increment:testname2 2;}
.counter2 li:before{content:counter(testname2)".";}
.counter3 li{counter-increment:testname3 -1;}
.counter3 li:before{content:counter(testname3)".";}
</style>
</head>
<body>
<ul class="test">
  <li class="counter1">
    <strong>默认时的计数器：</strong>
    <ol>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
  </li>
  <li class="counter2">
    <strong>修改计数器每次增加的值为2：</strong>
    <ol>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
  </li>
  <li class="counter3">
    <strong>修改计数器每次增加的值为-1：</strong>
    <ol>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
  </li>
</ul>
</body>
</html>

设置列表样式

list-style:upper-alpha outside none;

控制盒子变换

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

动效

多个属性结合
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./day6.css">
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
</body>
</html>

#outer{
  position: relative;
  height: 50vh;
  width: 100vw;
  background-color: antiquewhite;
}

#inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 1s linear;
  height: 200px;
  width: 200px;
  background-color: #d0dd0d;
}

#inner:hover{
  background-color: blue;
  backface-visibility:hidden;
  transform: translate(50px,200px) rotateY(360deg);
}

动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./day6.css">
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
</body>
</html>


#outer{
  position: relative;
  height: 50vh;
  width: 100vw;
  background-color: antiquewhite;
}

#inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 1s linear;
  height: 200px;
  width: 200px;
  background-color: #d0dd0d;
  animation:go 2s linear infinite alternate;
}

@keyframes go{
  50%{
    background-color: blue;
    backface-visibility:hidden;
    transform: translate(50px,200px) rotateY(360deg);
  }
  70%{
    background-color: red;
  }
}

/* #inner:hover{
  
} */

问题

1.为什么内容不会直接顶在最左上方，而是有一定的边距

因为我们所有的组件以盒模型的方式存在，盒模型从里到外分别是：内容，内边距，边框，外边距

解决

使用通配符设置内外边距为0

*{
  /* 内边距 */
  padding: 0;
  /*外边距*/
  margin: 0;
}