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="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效，代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用，项目基本不用

②内部样式

在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件

p{color:purple;background-color: pink;
}

只能在当前页面中使用，项目中使用较少，
学习和测试使用较多

③外部样式

创建一个.css文件，在html中的head标签里，使用link引入

<link rel="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
只有已定位的元素才能设置堆叠
堆叠顺序对父子级元素无效，儿子永远压着父亲

CSS——CSS基础（一篇就够用）相关推荐

HTML+CSS的基础复习篇~
---恢复内容开始--- 语义化,让你的网页更好的被搜索引擎理解在这一章节我们要开始把网页中常用到的标签一一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
CSS浏览器兼容总结篇
CSS浏览器兼容总结篇前言:本篇文章的大部分知识点来自于清华大学出版社的<DIV+CSS网页样式与布局实战详解>,我在书本内容的基础上添加了自己所了解的一些知识,有兴趣的伙伴可以去买正版 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
bootstrapV4.6.0内间距、外间距（官方hack类css代码）-解读篇
代码 · 介绍如下: 外间距margin的class类名: m-0 mt-1 mb-2 内间距padding的class类名: p-1 pt-2 pb-3 代码解释: 以mb-1为例,表示" ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...