目录
- 什么是CSS
- CSS的导入方式
- 选择器
- 美化网页元素
- 盒子模型
- 浮动
- 定位
什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现层（美化网页）
字体，颜色，边距，高宽，背景图片，网页定位，网页浮动。。。
CSS的导入方式
行内样式
内部样式
外部样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导入方式</title>
<!-- 外部样式,链接式 链接css文件--><link rel="stylesheet" href="css/style.css">
<!-- 外部样式 导入式，不推荐使用--><style>@import "css/style.css";</style>
<!-- 内部样式--><style>
/*style标签内只能是css代码，注释样式为“/* * /”*/h1{color: green;}</style>
</head>
<body>
<!--行内样式，在标签元素中，添加style属性，参数中直接写声明句-->
<h1 style="color: red">h1</h1>
</body>
</html>注：在多个样式同时对一个元素进行样式设置时，遵循“就近原则”
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器：
- 标签选择器：选择页面中所有该标签元素：标签名{}
- 类选择器：选择页面中所有该类元素：.类名{}
- id选择器：选择页面中id对应的元素：#id{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><style>/*标签选择器:会选择页面上该标签的所以元素*/h1 {color: green;}/*类选择器的格式：.class的名字{}*/.a{color: red;}/* id选择器：#ID名称{} 注意：全局id必须唯一*/#h{font-size: 100px;}</style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1>标题2</h1>
<p class="a">内容1</p>
<p id="h">内容2</p>
</body>
</html>注意：在这三个选择器之间，存在明确的优先级，不遵循所谓就近原则，优先级：id选择器＞类选择器＞标签选择器。
层次选择器：
- 后代选择器: 1 2{}会选择1内所有的2元素
- 子选择器: 1>2{}会选择1下所有2（只能一代）
- 相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）
- 通用兄弟选择器：1~2{}选择1后面所有兄弟关系的2元素
/*后代选择器: 1 2{}会选择1内所有的2元素*/body p{color: red;}/*子选择器: 1>2{}会选择1下所有2（只能一代）*/body>p{color: green;}/*相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）*/p + h1{color: gray;}/*通用兄弟选择器 1~2{}选择1后面所有兄弟关系的2元素*/p~p{color: blue;}注意：其中1、2可以使用包括标签、类、id选择器的格式，且在以上四种选择器之间，应该没有明显优先级，遵循就近原则和基本选择器的优先级。考虑基本选择器的优先级时，以2的优先级为准。
结构伪类选择器
/*第一个元孩子素*/nl li:first-child{color: red;}/*最后一个儿子元素*/nl li:last-child{color: green;}/*选择第i个 1:nth-child(i)选择1的父元素内的第i个子元素，且只有在父元素的第i个子元素是1时，才生效*/p:nth-child(1){color: gray;}/*1:nth-of-type(i) 选择1父元素内第i个类型为1的子元素*/p:nth-of-type(2){color: blue;}属性选择器
通过属性甚至属性的值来选择元素
/*1[2]{} 存在2属性的1类型的元素*/a[id]{}/*1[2=3]{} 存在2属性的值等于3的1类型的元素可以使用*=表包含3或者^=表示以3开头，$=表示以3结尾*/a[id="123"]{}美化网页元素
字体样式
文字的字体、文字大小、颜色等属性
body{/*字体 可以设置两种用逗号隔开，中英文分别应用两种*/font-family: 楷体;/*字体大小*/font-size: 50px;/*字体粗细*/font-weight: bold;}/*也可一行设置多个属性：*/p{font: oblique bold 16px 楷体;}文本样式
背景颜色、对其方式、首行缩进、行距和装饰等
/*文字与图片居中对齐*/a,b{vertical-align: middle}body{/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命或者使用rgb()rgba()函数，后者多一个透明度参数*/color: rgb(0, 0, 0);/*排版：居中等*/text-align: center;/*首行缩进 em为一个字母位置*/text-indent: 2em;/*行高和块高，如果一样可以有上下居中的效果*/height: 100px;line-height: 100px;/*上、下、中划线 设置划线颜色大多浏览器不支持同时只能有一个划线，应该遵循覆盖的就近原则*/text-decoration-color: #d60005;text-decoration: underline;text-decoration: overline;text-decoration: line-through;/*超链接去除下划线*/text-decoration: none;/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/text-shadow: black 5px 5px 1px}超链接伪类
让超链接在被选中或者点击等状态时，有不同的形态
/*正常显示*/a{}/*鼠标悬浮的状态*/a:hover{}/*鼠标悬浮未释放的状态*/a:active{}/*已访问的链接（点过链接紫色的样子）*/a:visited{}列表样式
可以更改列表中点的样式或者去掉点
复习之前内容
#nav{width: 300px;}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;}ul li{height: 30px;/*列表的点 none：去除 circle：空心圆 decimal：数字123. square正方形*/list-style: none;text-indent: 1em;}a{text-decoration: none;}a:hover{color: orange;text-decoration: underline;}背景
背景颜色、图片
渐变背景
div{width: 1000px;height: 700px;border: 1px solid red;/*设置背景：默认为平铺*/background: image("xxx/xxx.jpg");/*横向平铺和纵向平铺不平铺*/background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;}Grabient是一个在GitHub上开源的项目，可以获取各种渐变背景的CSS代码。
盒子模型
元素大小=margi+border+padding+内容
margin：外边距
padding：内边距
border：边框
border
在最上方选择body标签可以进行边距、字体等的初始化
/*设置默认边距为0 初始化*/body{margin: 0;padding: 0;text-decoration: none;}from{background: blue;}#box{/*border:粗细，样式，颜色*/width: 300px;border: 1px solid red;/*外边距*/padding: 0;}/*结构伪类选择器搭配子类选择器*//*border: solid实线，dashed虚线*/div:nth-of-type(1) input{border: 3px solid black;}div:nth-of-type(2) input{border: 3px dashed black;}div:nth-of-type(3) input{border: 3px dashed black;}margin&padding
可以用来居中
#box{/*可以是1、2、4个参数，1个参数代表上下左右边距一样2个参数则分别为上下、左右边距，4个分别为上、下、左、右auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/margin: 0 auto;}圆角边框
实现按钮等元素的圆角
绘制圆形扇形
div{width: 100px;height: 100px;border: 10px solid red;/*边框圆角大小：一个参数则四个角相等两个参数则左上右下一样，剩下两个一样四个参数则从左上开始顺时针*/border-radius: 50px 20px 10px 5px;/*可以用来画圆，当圆角大小大于（高宽的一半加上边框粗细）就是圆*/border-radius: 60px;/*扇形需要三个角为0，另一个圆角大小为（两倍边框粗细加上div的边长）*/}盒子阴影
div{width: 100px;height: 100px;border: 10px solid red;box-shadow: 10px 10px 100px yellow;}浮动
块级元素：独占一行 h1~h6 p div 列表…
行内元素：不独占行 span a img strong…
行内元素可以被包含在块级元素中，反之则不可以。
display和float
div{width: 100px;height: 100px;border: 1px red;/*display: xxx; inline:变为行内元素 block：变为块元素inline-block 块元素但是可以内联，在一行*/display: inline;/*浮动：float 左右浮动*/float: right;/*clear：不允许有浮动元素 both：两侧 right、lefe：左、右none 默认 允许*/clear: right;}父级边框塌陷问题
增加父级元素的高度：固定了父元素高度，就会被限制
在父级元素内最底部增加一个空的div块，清除两侧浮动：简单，但代码中应该尽量避免空div
在父类添加一个伪类：稍微复杂，没有副作用，推荐使用
#father{border: 1px #000 solid;height: 800;} .clear{padding: 0;margin: 0;clear: both;} #father:after{content: '';display: block;clear: both;}overflow
如果块内内容大小超过了块所规定的大小，可以使用overflow来控制隐藏超出部分或者添加块内滚动条。
其中overflow：hidden；放在父元素中，可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。
#content{width: 200px;height: 100px;/*overflow: ; hidden:超出部分隐藏 scroll：滚动条*/overflow: hidden;}定位
相对定位
相对定位：position: relative;
相对于自己原来的位置进行指定的偏移，但是，在标准文档流中，仍然处在原来的位置不变（比如说最后一个div进行向下的偏移，并不会使得父级元素的大小向下扩展）
div{/*相对于自己原来的位置移动*/position: relative;/*上下左右移动*/top: -20px;}绝对定位
定位：基于xxx定位，上下左右
若没有父级元素定位，基于浏览器定位
如果父级元素有绝对或者相对定位，则基于父元素定位
在标准文档流中，原来的位置会被改变
div{position: absolute;right: 100px;}固定定位
fixed：相对于窗口定位
div{/*固定定位fixed*/position: fixed;bottom: 300px;left: 50px;}z-index
图层堆叠
div{/*设置图层，默认是0，在最底层*/z-index: 10;/*设置透明度 此下两句等价*/opacity: 0.5;filter: alpha(opacity=50);}
![[剑指offer][JAVA]面试题第[17]题[打印从1到最大的n位整数][大整数][递归回溯]](https://img-blog.csdnimg.cn/20200610001240179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhZG9uZ3d1ZGk=,size_16,color_FFFFFF,t_70)
![[Leedcode][JAVA][第9题][回文数][数学法]](https://img-blog.csdnimg.cn/20200610155834245.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhZG9uZ3d1ZGk=,size_16,color_FFFFFF,t_70)
![[Leedcode][第十题][剑指offer]面试题第[19]题[正则表达式][动态规划][递归][JAVA]](https://img-blog.csdnimg.cn/20200620103737935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhZG9uZ3d1ZGk=,size_16,color_FFFFFF,t_70)
![[Leedcode][JAVA][第739题][每日温度][暴力][单调栈]](https://img-blog.csdnimg.cn/20200531140237130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhZG9uZ3d1ZGk=,size_16,color_FFFFFF,t_70)
