CSS——CSS基础（一篇就够用）
CSS——CSS基础（一篇就够用）
-
- 一.CSS概述
-
- 1.什么是css
- 2.作用
- 3.css和html属性的使用原则
- 二.CSS语法规范
-
- 1.css的使用方式
-
- ①行内样式，内联样式
- ②内部样式
- ③外部样式
- 2.css的样式特性
-
- ①继承性
- ②堆叠性
- ③优先级
- ④调整优先级
- 三.基础选择器
-
- 1.通用选择器
- 2.元素选择器
- 3.ID选择器
- 4.类选择器
-
- 类选择器的其它用法
-
- ①.多类选择器
- ②.分类选择器
- ③.类名的定义规范
- 5.群组选择器
- 6.后代选择器
- 7.子代选择器
- 8.伪类选择器
- 9. 选择器权值
- 四.尺寸和边框
-
- 1.尺寸
- 2.页面中允许设置尺寸的元素有哪些
- 3.溢出处理
- 4.边框
-
- ①边框的简写方式
- ②单边的设置
- ③单属性设置
- ④单边单属性
- 5.边框的倒角（圆角）
- 6.元素阴影
- 7.轮廓
- 五.盒子模型
-
- 1.外边距 margin
-
- ①语法：
- ②简写方式：
- ③margin自我冲突
- 2.外边距的特殊情况
-
- ①外边距的合并
- ②完整的块级元素、行内元素、行内块的总结
- ③默认自带外边距的元素
- ④外边距溢出
- 3.内边距 padding
-
- ①语法
- 4.设置盒子模型的计算方式
- 六.背景
-
- 1.背景颜色
- 2.背景图片的定位
- 3.简写方式
- 4.最简方式
- 七.渐变
-
- 1.线性渐变
- 2.径向渐变
- 3.重复渐变
- 4.线性渐变的浏览器兼容问题
- 八.文本格式化
-
- 1.字体属性
- 2.文本属性
- 九.表格的样式
-
- 1.表格的常用样式
- 2.表格的专属样式
- 4.设置表格显示规则
- 十.浮动定位
- 十一.其他重要样式属性
-
- 1.显示方式
- 2.显示效果
- 3.透明度
- 4.垂直对齐方式
- 5.光标的管理
- 6.列表的样式
- 十二.定位
-
- 1.相对定位
- 2.绝对定位
- 3.固定定位
- 4.堆叠顺序
一.CSS概述
1.什么是css
css:cascading style sheets
层叠 样式 表
2.作用
html：搭建网页的结构，承载页面的数据
css:美化页面，修饰标签 (亚洲4大邪术)
3.css和html属性的使用原则
html的属性只对当前标签有效，没有可重用性，导致没有可维护性
css 具备一定的代码重用性，提高了可维护性
但是css没有把重用性做到极致。使用scss可以做到极致
W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可以了
二.CSS语法规范
1.css的使用方式
每个样式属性之间用分号连接，例：
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size: 50px; 字号大小
①行内样式，内联样式
在元素中，写style属性，在style属性中编写样式
<元素 style="样式声明;样式声明.....">
"color:red;background-color:yellow;font-size: 50px;">
只对当前元素生效，代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用，项目基本不用
②内部样式
在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件
p{
color:purple;
background-color: pink;
}
只能在当前页面中使用，项目中使用较少，
学习和测试使用较多
③外部样式
创建一个.css文件，在html中的head标签里，使用link引入
"stylesheet" href="my.css"/>
必须有rel=“stylesheet”，代表当前文件和引入文件的关系
项目中大量使用
2.css的样式特性
①继承性
文本样式和字体样式的继承
绝大多数文本字体样式，可以被继承
a标签不会继承字体颜色
②堆叠性
为一个标签定义多个样式规则
如果样式属性不冲突，都会作用到这个标签上
③优先级
默认优先级
高 内联样式
中 内部样式，外部样式-------就近原则
低 浏览器默认样式
f12关于优先级的显示
默认情况下，f12中样式是按照默认优先级顺序从上往下显示
④调整优先级
设置最高优先级 !important，比内联都高
写在某一个值与分号之间，!important与值之间有空格
color: red !important ;
注意，内联样式不允许设置!important，语义要求
三.基础选择器
选择器，规范了页面中哪些元素能够使用当前设置的样式
就是一个条件，符合这个条件的元素都可以使用这个样式
1.通用选择器
{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}
2.元素选择器
标签关键字{样式声明;}
div{} p{}
3.ID选择器
<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复，所有id选择器只被一个元素应用
4.类选择器
使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>
.类名{样式声明}
类选择器的其它用法
①.多类选择器
<元素 class="类名1 类名2 类名3.......">
②.分类选择器
元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}
③.类名的定义规范
①必须有.
②不能以数字开头
③只能包含- 或者_
v④尽量见名知意
5.群组选择器
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}
6.后代选择器
通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}
7.子代选择器
通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}
8.伪类选择器
匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态（input button）
9. 选择器权值
选择器权值，代表选择器的重要程度
重要程度高，优先显示
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
权值的特点
- 当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
- 有多个选择器的权值一样大，按照就近原则
- 添加了!important当前css样式直接获取最高优先级
- 群组选择器，不相加，个算个的
- 选择器权值的计算，不会超过本选择器权值的最大数量级
四.尺寸和边框
1.尺寸
width:
height:
取值：1.px为单位的数字，rem
2.% 但是如果设置高度，当前元素的父元素是body，%失效
min-width
max-width
min-height
max-height
2.页面中允许设置尺寸的元素有哪些
具备属性，width和height的元素，都能设置宽高（img，table,td）
| 块级元素 | 行内元素 | 行内块(input/button) |
|---|---|---|
| 设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
| 默认宽，父元素100% 默认高靠内容撑开 |
宽高靠内容撑开 | 浏览器默认设置一个宽高 不同浏览器给的宽高不同。 一般要写兼容，css reset |
3.溢出处理
overflow:visible; 溢出部分显示，默认值
overflow:hidden;溢出部分隐藏
overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条
overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条
overflow-x:scroll; 单独让x轴出现滚动条
overflow-y:scroll; 单独让y轴出现滚动条
4.边框
①边框的简写方式
同时设置4个方向的边框
border: width style color;
width- - - - 边框的粗细
style - - - -边框样式 solid 实线
dotted 小圆点虚线
dashed 短线虚线
doubel 双实线
color - - - -合法颜色，transparent
取消边框 border:none / 0 ;
最简方式 border: style; border:solid;
②单边的设置
border-top: 20px solid #f00;
border-right: 20px dotted #00f;
border-bottom: 20px dashed #0ff;
border-left: 20px double #f0f;
取消某个边框
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left:0;
③单属性设置
border-width: 100px;
border-style: solid;
border-color: #CCFF00;
④单边单属性
border-top-width: 上边框宽度
border-top-style: 上边框样式
border-top-color: 上边框颜色
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
5.边框的倒角（圆角）
把直角倒成圆角
border-radius:圆角的半径
取值：1.px为单位的数字
2.% 50%就是圆
单角的定义，圆角之间会相互影响
border-top-right-radius: 值;
border-bottom-right-radius: 值;
border-top-left-radius: 值;
border-bottom-left-radius: 值;
6.元素阴影
box-shadow: h-shadow v-shadow blur spread color;
h-shadow x轴偏移量
v-shadow y轴偏移量
blur 阴影模糊程度
spread 阴影大小
color 阴影颜色
inset 内部阴影
7.轮廓
多用于修饰文本框和按钮
绘制于边框外部一圈线条，不占页面空间
一般我们会把轮廓清除掉
outline:width style color;
outline:0;
五.盒子模型
默认盒子模型计算公式：
元素占地宽度：
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度：
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
1.外边距 margin
①语法：
margin：v1； 同时设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：
- px为单位的数字
- % 上右下左都是父元素宽的百分比
- auto 上下外边距无效 让块级元素本身在当前父元素内水平居中
②简写方式：
margin:v1; 同时设置4个方向
margin:v1 v2; v1为上下 v2为左右
margin：v1 v2 v3； v1上 v2左右 v3下
margin：v1 v2 v3 v4； 上 右 下 左 123
③margin自我冲突
左右冲突，以左为准
默认布局的元素：不要用右外边距设置元素的水平位移，用左外边距设置位移
右外边距值负责控制当前元素与后面元素的距离
2.外边距的特殊情况
①外边距的合并
两个垂直边距相遇时，会合并成一个，值以大的为准
解决方案：
- 只写一个元素的上边距，或者另一个元素的下外边距
- 页面设计的时候规避
②完整的块级元素、行内元素、行内块的总结
| 块级元素 | 行内元素 | 行内块 |
|---|---|---|
| 设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
| 默认宽：父元素%100 默认高：靠内容撑开 |
宽高靠内容撑开 | 浏览器默认设置一个宽高 |
| 4个方向外边距都有效 | 上下外边距无效 | 4个方向外边距都有效 改变行内块上外边距 行内块会带着同一行的其他行内元素/行内块一起位移 |
③默认自带外边距的元素
p , h1~h6 , ul , ol
body 4个方向8px
ul 上下外边距16px 左内边距40px
④外边距溢出
在特殊情况下，子元素的上外边距会作用到父元素上
特殊情况：
- 父元素没有上边框
- 子元素内容区域的上沿与父元素内容区域的上沿重合
解决方案 - 给父元素上上边框，增加了父元素的实际占地高度
- 给父元素添加上内边距，增加了父元素的实际占地高度
- 给父元素设置overflow:hidden/auto, 如果想溢出显示，就不行了
- 给父元素添加一个大儿子，一个空
3.内边距 padding
①语法
padding:v1;
padding:v1 v2;
padding:v1 v2 v3;
padding:v1 v2 v3 v4;
padding-top;
padding-right;
padding-bottom;
padding-left;
取值：
- px为单位的数字
- % 父元素宽度的百分比
- 内边距不能设置auto
4.设置盒子模型的计算方式
box-sizing:
content-box默认值，设置的width为内容区域宽度
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
border-box 设置的width包含(左边框+左内边距+内容区域+右内边距+右边框)
左外边距+width+右外边距
width设置百分比的时候，一般使用border-box比较好控制
六.背景
1.背景颜色
background-color : 合法颜色值; 背景颜色
background-image : url(img/02.png); 背景图片
background-repeat: repeat; 背景图片的平铺
no-repeat 不平铺
repeat-x 设置x轴平铺
repeat-y 设置y轴平铺
2.背景图片的定位
background-position:
取值：
- x y 分别设置x轴和y轴
以px为单位的数字
关键字 x：left/center/right y：top/center/bottom - 一个值 只设置x轴，y轴默认居中
background-size:
取值：
- 两个值设置宽高 px为单位的数字
- 一个值同时设置宽高
- contain 图片根据元素尺寸自动等比缩放，正好全部显示图片
- cover 图片根据元素尺寸自动等比缩放，正好把元素铺满
3.简写方式
background：color img repeat position；
简写方式没有size。size需要单写
4.最简方式
background：color / img；
七.渐变
1.线性渐变
background-image: linear-gradient(方向，色标1，色标2……);
取值：方向
- 写终点
to top
to right
to bottom
to left
- 写角度
0deg
色标
颜色+位置
- %
- px
- 不写位置只写颜色
2.径向渐变
background-image: radial-gradient(半径 at 圆心x 圆心y，色标1，色标2…….);
取值
圆心
- px为单位的数字
- %
- 关键字 X：left/center/right Y：top/center/bottom
色标
位置为%，是半径长度的%
3.重复渐变
background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);
4.线性渐变的浏览器兼容问题
| -webkit- | chrome safari |
|---|---|
| -o- | 欧朋浏览器 |
| -moz- | 火狐浏览器 |
| -ms- | IE浏览器 |
八.文本格式化
1.字体属性
字体大小
font-size: px 、rem 、 pt
字体系列
font-family:系列1，系列2，……
字体加粗
font-weight: lighter 300 normal 400 bold 600 bolder 700
字体样式
font-style:normal 没样式
italic 斜体
小型大写字母
font-variant: small-caps;
字体的简写方式
font: style variant weight size fmily; 一定按照顺序写
font: italic small-caps bold 36px "mv boli";
最简方式
font：size family;
2.文本属性
文本颜色 color:
文本的堆砌方式
text-align:left; 左对齐
right 右对齐
center 居中
justify 两端对齐
text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承，但不会让块级元素居中
margin：0 auto； 让当前块级元素水平居中
line-height垂直对齐方式——行高
一般会把行高设置为容器高度，让文本在容器中垂直居中
取值：
line-height：
- px为单位的数字
- 无单位的数字，代表字号的倍数
一般只对一行文本设置行高，设置多行文本使用内边距算！！！
文本线条修饰
text-decoration:underline; 下划线
overline 上划线
none 删除所有线条
line-through 删除线
首行缩进
text-indent: px为单位的数字
文本阴影
text-shadow:h-shadow v-shadow blur color;
九.表格的样式
1.表格的常用样式
①table
尺寸、边框、背景、文本、内外边距都有效
②td/th
高度正常使用，宽度靠内容撑
边框、背景、文本、内边距都有效 外边距无效
2.表格的专属样式
①td/th属性
vertical-align:top/middle/bottom
设置td/th中文本的垂直对齐方式
②table的属性
- 边框合并
border-collapse:separate; 默认值，边框分离状态
collapse 边框合并
- 边框之间的距离，前提边框处于分离状态
border-spacing:20px;
- 边框标题
caption-side:top; 标题在表格上面
bottom 标题在表格下面
4.设置表格显示规则
| 表格自动布局(默认布局) | 表格的固定布局 |
|---|---|
| table-layout:auto | table-layout: fixed; |
| 单元格尺寸会自动适应内容 | 单元格大小取决设置的尺寸 |
| 比较灵活 | 表格不够灵活 |
| 表格越大，加载速度越慢 | 任何情况，加载速度都快 |
| 适用于不确定每列大小并且不复杂的表格 | 适用于确定每列大小的表格 |
十.浮动定位
float:none; 默认值，不浮动
left 左浮动
right 右浮动
右浮动必须使用margin-right进行位移
没有定义宽度的元素，脱离文档流之后，宽度靠内容撑开
元素一旦脱离文档流，会变成块级元素
清除浮动带来的影响
clear：left； 清除左浮带来的影响
right 清除右浮带来的影响
both 同时清除左右浮动的影响
解决高度坍塌
- 给父元素设置高度（适合元素较少的情况下）
- 给父元素也设置浮动（会影响父元素的兄弟元素以及父元素的父元素，完全不能用）
- overflow：hidden/auto；（不能溢出显示了）
- 给父元素添加一个空的块级元素当做小儿子，并给小儿子设置
clear:both;
十一.其他重要样式属性
1.显示方式
display:block; 让元素按照块级元素去显示
display:inline; 让元素按照行内元素去显示
display:inline-block; 让元素按照行内块方式显示
display:table; 让元素按照表格的方式显示
display:none; 隐藏，脱离文档流的隐藏
2.显示效果
visibility:visible; 默认值，显示
visibility:hidden; 隐藏，不脱离文档流的隐藏
visibility:hidden;和display:none;的区别
visibility:hidden是不脱离文档流的隐藏
display:none是脱离文档流的隐藏
3.透明度
opacity:0.5; 取值0~1 0全透明，1不透明
opacity和rgba的区别
rgba只改变当前颜色的透明度
opacity元素以及元素后代所有与颜色相关的都会变透明
4.垂直对齐方式
vertical-align:
使用场合
①表格th/td
控制内部内容垂直对齐方式 top/middle/bottom
②行内块
控制行内块前后行内元素、行内块元素、文本的垂直对齐方式
top/middle/bottom 默认值middle
③img
控制img和前后行内元素、行内块元素、文本的垂直对齐方式
top/middle/bottom/baseline 默认值 baseline基线
5.光标的管理
设置属性之后，会直接调用操作系统的默认光标
cursor:default; 默认值 小箭头
cursor:pointer; 小手
cursor:text; 提示文本输入 的 I
cursor:wait; 等待加载
cursor:help; 帮助
cursor:crosshair; 十字
6.列表的样式
list-style-type:disc; 实心圆
square; 实心小方块
circle;空心圆
none; 去除列表标识项
list-style-image:
list-style-position:outside; 默认值，在li外侧显示列表标示
inside； 在li中显示列表标识
简写方式
list-style:type URL position;
list-style:none; 最简方式，清除列表标识项
十二.定位
相对定位、绝对定位、固定定位
position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意：元素一旦设置了position，并且取值为relative/absolute/fixde其中一种时
- 这个元素被称为已定位元素
- 解锁四个方向的定位属性：top / right / bottom / left
左右冲突以left为准 - 会解锁堆叠属性z-imdex
1.相对定位
position:relative; 配合偏移属性
不脱离文档流，不影响周围元素
如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面没有任何影响
如何偏移：相对自己原先位置偏移
使用场合：
①做元素位置的微调
②作为绝对定位的祖先级已定位元素
2.绝对定位
position:absolute;配合偏移属性
绝对定位，脱离文档流
如何偏移：
①如果元素没有已定位的祖先元素，绝对定位元素相对body左上角进行偏移
②以“最近的”“已定位的”“祖先级”元素左上角做偏移，子绝父相
使用场合：页面布局中使用，可以让页面移动到页面的任何位置
3.固定定位
position:fixed; 配合偏移属性
如何偏移：相对于body左上角
使用场合：把元素永远固定在页面可视区域的一个位置
4.堆叠顺序
z-index:
注意事项
- HTML代码中后写的元素堆叠顺序高
- z-index：默认值大于0小于1
- 浮动在第几层 小于0 大于-1
- 只有已定位的元素才能设置堆叠
- 堆叠顺序对父子级元素无效，儿子永远压着父亲