1.什么是CSS

如何学习CSS

1. CSS是什么
2. CSS怎么使用（快速入门）
3. **CSS选择器（重点+难点）**
4. 美化图片（文字，阴影，超链接，列表，渐变...）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画（特效）
复制代码

1.1、CSS是什么

Cascading Style Sheet 层叠级样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，背景图片，网页定位，网页浮动…

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS 结合分离的思想网页变得简单，有利于SEO（搜索引擎优化）

CSS2.1 浮动+定位

CSS3.0 圆角边框，阴影，动画…. 浏览器兼容性

1.3、CSS的优势

内容和表现分离
网页结构统一，可以实现复用
样式十分的简单
建议使用独立于html的css文件
利于SEO

1.4、css的三种导入方式

html文件

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<!-- 外部样式 -->

<link rel="stylesheet" href="https://juejin.cn/post/css/index.css">

<!-- 内部样式 -->

<style>

 .innerClass{

   position: absolute;

   top: 30%;

   left: 50%;

   transform: translate(-50%,-40%);

   width: 400px;

   height: 400px;

   border: 1px red solid;

   text-align: center;

 }

 h2{

  color: pink;

 }

 a{

  color: rgb(3, 16, 29);

 }
#innerId{
	color: pink;
}

</style>

<!-- 优先级：就近原则【行内样式最近】 -->

</head>

<body>

 <!-- 外部样式和内部样式都有设置字体颜色，但是根据就近原则内部样式生效【替换位置则反】 -->

<a href="">submit</a>

<div class="innerClass">
<!-- 行内样式 -->
<h1 style="color: red;">我是行内样式</h1>

<h2>我是内部样式</h2>
<h3 id="innerId">我是Id选择器</h3>
</div>

</body>

</html>
复制代码

CSS文件【css/index.css】

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: black;
}
a{
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 25px;
  background: linear-gradient(100deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  width: 400px;
  height: 100px; 
  line-height: 100px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  border-radius: 50px ;
  z-index: 1;
}
a::before{
  content: "";
  position: absolute;
  left: -5px;
  top:-5px;
  bottom: -5px;
  right: -5px;
  /* border: 1px red solid; */
  background: linear-gradient(100deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 50px ;
  filter: blur(20px);
  z-index: -1;
}
a:hover ::before{
  animation: sun 8s infinite;
}
a:hover{
  animation: sun 8s infinite;
}
@keyframes sun {
  100%{
    background-position:-400% 0;
  }
}
复制代码

拓展：外部样式两种写法

链接式

<link rel="stylesheet" href="https://juejin.cn/post/css/index.css">
复制代码

导入式【CSS2.1特有】
```
<style>
  @import url('css/index.css');
    
</style>
复制代码
```
link标签和import标签的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的。

2.选择器

**作用：**选择页面上的某一个或者某一类元素

2.1、基本选择器

标签选择器【选择一类标签用法：标签名{}】

h2{
  color: pink;
 }
<h2>我是内部样式</h2>
复制代码

类选择器(选择所有class属性一致的标签用法 .class名{})

 .innerClass{
	text-align: center;
 }
 <div class="innerClass"></div>
复制代码

id选择器(全局唯一用法#id名{})

#innerId{
	color: pink;
}
<h3 id="innerId">我是Id选择器</h3>
复制代码

优先级：id>类选择器>标签

2.2、层次选择器

1、后代选择器在某个元素后面加空格例如：祖爷爷爷爷爸爸你{}

2、子代选择器，一代：儿子

<!-- 只有一个相邻向下 -->body>p{}
复制代码

3、兄弟选择器同辈

<!-- 相邻兄弟选择器：只有一个，相邻向下 -->.active + p{ }
复制代码

4、通用选择器（同辈）

<!-- 通用兄弟选择器 当前选中元素向下的所有兄弟元素 -->.active~p{}
复制代码

2.3、结构伪类选择器

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    /* 伪类选择器 */      /* .testList li:first-child{        color: red;      }      .testList li:last-child{        background: pink;      } */       /* li:nth-child(2){        background: pink;      }  */      /* 选择p元素的父类的第一个元素，且改类型必须是p,否则不生效 */      p:nth-child(1){        color: pink;      }      /* 通用选择器 选择当前选中向下的所有（同级） */      /* .active~p{        color: pink;      } */      /* 兄弟选择器 选择相邻向下的一个 */      /* .active +p{        color: pink;      } */      /* body p{        color: pink;      } */      /* body>p{        color: pink;      } */        </style></head><body>  <h1>888</h1>    <p>888</p>    <p class="active">888</p >      <p>888</p >        <p>列表1</p>    <ul class="testList">      <li>555</li>      <li>66666</li>      <li><7878778/li>      <li>ooiii</li>      <li>jjjjjjj</li>    </ul>    <p>列表2</p>    <ul class="testList2">      <li>555</li>      <li>66666</li>      <li><7878778/li>      <li>ooiii</li>      <li>        <ul>          <li><p>66666</p></li>          <li><p>66666</p></li>        </ul>                   </li>    </ul>    <p>888</p>    <p>888</p>    <p>888</p></body></html>
复制代码

2.4、属性选择器

p[id="active"]{}//可支持正则表达式p[class*="active"]p[class^="active"]p[class$="active"]
复制代码

3、字体样式

font-family ：字体

font-size:字体大小

font-weight：字体粗细

color：字体颜色

<style>	body{		font-family:"Arial Black",楷体;		color:blue;	}	h3{	font-size:50px;	}	.p1{		font-weight:bolder:	}</style>
复制代码

文本样式

颜色【color,rgb,rgba】
文本对齐方式【text-align=center】
首航缩进【text-height:30px】
装饰【text-decoration:none】
行高【line-height:90px】
文本图片对齐方式：vertical-align:middle;

列表

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    div[id="title"] {      /* 可以通过第三发工具获取渐变颜色 */      background-color: #FBDA61;      background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);      width: 300px;    }    #detailTitle {      font-size: large;      color: #ffffff;      font-family: Arial, 楷体;      text-indent: 1em;      vertical-align: middle;      line-height: 50px;      /* 颜色 图片 图片位置 平铺方式 */      background:transparent url("image/望远镜.svg") 217px 2px no-repeat;      /* background-repeat: repeat; */      background-size: 50px;      /* background-repeat: no-repeat; */    }    ul{      background-color: #FAACA8;      background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);      background-color: bisque;      /* width: 300px; */      list-style: none;    }    ul li{      line-height: 30px;      background: transparent url(image/购物.svg) 228px 7px no-repeat;      background-size: 20px;    }    a{      text-decoration: none;      text-indent: 1em;    }    /* 必须靠在一起 */    a:hover{           color: rebeccapurple;      font-size: large;    }    a:active{      color: pink;    }  </style></head><body>  <div id="title">    <h1 id="detailTitle">魔剑save</h1>      <ul class="LI">      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>      <li> <a href="">零神你这头像也太顶了⑧</a></li>          </ul>  </div>  <div>   </div>  <!-- 通过第三方软件改变图片尺寸例如画图工具 -->  <!-- <img src="https://juejin.cn/post/image/boss&leader.jpeg" alt="图片"> -->  <!-- <img src="https://juejin.cn/post/image/boss&leader1.jpg" alt="图片"> --></body></html>
复制代码

效果图

4、盒子模型

Margin(外边距) – 清除边框外的区域，外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域，内边距是透明的。
Content(内容) – 盒子的内容，显示文本和图像。

5、定位

static 定位-HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位-元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    body{height: 1000px;}    div:nth-of-type(1){      position: absolute;      width: 100px;      height: 100px;      background-color: pink;      bottom: 0px;      right: 0px;    }    div:nth-of-type(2){      position: fixed;      width: 50px;      height: 50px;      background-color: red;      bottom: 0px;      right: 0px;      z-index: 1;    }    div:nth-of-type(3){      position: fixed;      width: 30px;      height: 30px;      background-color: black;      bottom: 0px;      right: 0px;      z-index: 1;      opacity: 0.5;    }  </style></head><body>  <div></div>  <div></div>  <div></div></body></html>
复制代码

relative 定位-相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    #box{      border: 2px solid rebeccapurple;      width: 300px;      height: 300px;      margin: 10px;      padding: 10px;    }    a{      display: block;      text-decoration: none;      width: 100px;      height: 100px;      background-color: pink;      text-align: center;      line-height: 100px;    }    .a2,.a4{      position: relative;      left: 200px;      top:-100px    }    .a5{      position: relative;      left: 100px;      top:-300px    }    a:hover{      color: powderblue;      background-color: purple;    }  </style></head><body>  <div id="box">   <a href="" class="a1">链接1</a>   <a href="" class="a2">链接2</a>   <a href="" class="a3">链接3</a>   <a href="" class="a4">链接4</a>   <a href="" class="a5">链接5</a>  </div></body></html>
复制代码

absolute 定位– 绝对定位的元素位置相对于已定位的父元素，如果元素没有已定位的父元素，那么它的位置相当于

6、浮动

块级元素，独占一行

h1~h6 p div li...
复制代码

行内元素，不独占一行

span a img strong...
复制代码

行内元素可以被包含在块级元素中，反过来不行

父类边框坍塌问题

浮动后面添加一个空的div （clear:both）,但是代码中尽量避免空的div
```
<div id="clear"><div>#clear{	clear:both;	margin:0;	padding:0;	}
复制代码
```
设置父元素的高度（元素如果没有了固定高度就会被限制）

增加一个伪类：after ,并设置clear：both

#father:after{ content:''; display:block; clear:both;}
复制代码

设置overflow属性

在父级元素中添加一个 overflow:hidden
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

说了那么多，到底什么是「神经搜索」？

React状态管理实践漫谈（篇一）

React 源码深度解析（六）

Squid ‘strHdrAcptLangGetItem()’函数远程拒绝服务漏洞

一看就懂详解redis的bitmap（面试加分项）

面试官: 你会手写实现PromiseA+么? 小白的我: 这……, 要不我试试(系列三

学习css

1.什么是CSS

1.1、CSS是什么

1.2、发展史

1.3、CSS的优势

1.4、css的三种导入方式

2.选择器

2.1、基本选择器

2.2、层次选择器

2.3、结构伪类选择器

2.4、属性选择器

3、字体样式

文本样式

列表

4、盒子模型

5、定位

relative 定位-相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

6、浮动

父类边框坍塌问题

说了那么多，到底什么是「神经搜索」？

React状态管理实践漫谈（篇一）

React 源码深度解析（六）

Squid ‘strHdrAcptLangGetItem()’函数远程拒绝服务漏洞

一看就懂 详解redis的bitmap（面试加分项）

面试官: 你会手写实现PromiseA+么? 小白的我: 这……, 要不我试试(系列三

学习css

1.什么是CSS

1.1、CSS是什么

1.2、发展史

1.3、CSS的优势

1.4、css的三种导入方式

2.选择器

2.1、基本选择器

2.2、层次选择器

2.3、结构伪类选择器

2.4、 属性选择器

3、字体样式

文本样式

列表

4、盒子模型

5、定位

relative 定位-相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

6、浮动

父类边框坍塌问题

一看就懂详解redis的bitmap（面试加分项）

2.4、属性选择器