CSS——CSS基础(一篇就够用)
一.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;">
- 1
只对当前元素生效,代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用,项目基本不用
②内部样式
在head标签中,编写style标签,在style标签内部,编写属性
选择器{样式声明;样式声明…}
选择器:定义页面中使用这个样式的元素条件
p{
color:purple;
background-color: pink;
}
- 1
- 2
- 3
- 4
只能在当前页面中使用,项目中使用较少,
学习和测试使用较多
③外部样式
创建一个.css文件,在html中的head标签里,使用link引入
<link rel="stylesheet" href="my.css"/>
- 1
必须有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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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轴出现滚动条
- 1
- 2
- 3
- 4
- 5
- 6
4.边框
①边框的简写方式
同时设置4个方向的边框
border: width style color;
width- - - - 边框的粗细
style - - - -边框样式 solid 实线
dotted 小圆点虚线
dashed 短线虚线
doubel 双实线
color - - - -合法颜色,transparent
取消边框 border:none / 0 ;
最简方式 border: style; border:solid;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
②单边的设置
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;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
③单属性设置
border-width: 100px;
border-style: solid;
border-color: #CCFF00;
- 1
- 2
- 3
④单边单属性
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:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
5.边框的倒角(圆角)
把直角倒成圆角
border-radius:圆角的半径
取值:1.px为单位的数字
2.% 50%就是圆
单角的定义,圆角之间会相互影响
border-top-right-radius: 值;
border-bottom-right-radius: 值;
border-top-left-radius: 值;
border-bottom-left-radius: 值;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
6.元素阴影
box-shadow: h-shadow v-shadow blur spread color;
h-shadow x轴偏移量
v-shadow y轴偏移量
blur 阴影模糊程度
spread 阴影大小
color 阴影颜色
inset 内部阴影
- 1
- 2
- 3
- 4
- 5
- 6
- 7
7.轮廓
多用于修饰文本框和按钮
绘制于边框外部一圈线条,不占页面空间
一般我们会把轮廓清除掉
outline:width style color;
outline:0;
- 1
- 2
五.盒子模型
默认盒子模型计算公式:
元素占地宽度:
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度:
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
1.外边距 margin
①语法:
margin:v1; 同时设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
- 1
- 2
- 3
- 4
- 5
取值:
- px为单位的数字
- % 上右下左都是父元素宽的百分比
- auto 上下外边距无效 让块级元素本身在当前父元素内水平居中
②简写方式:
margin:v1; 同时设置4个方向
margin:v1 v2; v1为上下 v2为左右
margin:v1 v2 v3; v1上 v2左右 v3下
margin:v1 v2 v3 v4; 上 右 下 左 123
- 1
- 2
- 3
- 4
③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;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
取值:
- 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轴平铺
- 1
- 2
- 3
- 4
- 5
- 6
2.背景图片的定位
background-position:
- 1
取值:
- x y 分别设置x轴和y轴
以px为单位的数字
关键字 x:left/center/right y:top/center/bottom - 一个值 只设置x轴,y轴默认居中
background-size:
- 1
取值:
- 两个值设置宽高 px为单位的数字
- 一个值同时设置宽高
- contain 图片根据元素尺寸自动等比缩放,正好全部显示图片
- cover 图片根据元素尺寸自动等比缩放,正好把元素铺满
3.简写方式
background:color img repeat position;
- 1
简写方式没有size。size需要单写
4.最简方式
background:color / img;
- 1
七.渐变
1.线性渐变
background-image: linear-gradient(方向,色标1,色标2……);
- 1
取值:方向
- 写终点
to top
to right
to bottom
to left
- 1
- 2
- 3
- 4
- 写角度
0deg
色标
颜色+位置
- %
- px
- 不写位置只写颜色
2.径向渐变
background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2…….);
- 1
取值
圆心
- px为单位的数字
- %
- 关键字 X:left/center/right Y:top/center/bottom
色标
位置为%,是半径长度的%
3.重复渐变
background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);
- 1
4.线性渐变的浏览器兼容问题
-webkit- | chrome safari |
---|---|
-o- | 欧朋浏览器 |
-moz- | 火狐浏览器 |
-ms- | IE浏览器 |
八.文本格式化
1.字体属性
字体大小
font-size: px 、rem 、 pt
- 1
字体系列
font-family:系列1,系列2,……
- 1
字体加粗
font-weight: lighter 300 normal 400 bold 600 bolder 700
- 1
字体样式
font-style:normal 没样式
italic 斜体
- 1
- 2
小型大写字母
font-variant: small-caps;
- 1
字体的简写方式
font: style variant weight size fmily; 一定按照顺序写
font: italic small-caps bold 36px "mv boli";
- 1
- 2
最简方式
font:size family;
- 1
2.文本属性
文本颜色 color:
文本的堆砌方式
text-align:left; 左对齐
right 右对齐
center 居中
justify 两端对齐
- 1
- 2
- 3
- 4
text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承,但不会让块级元素居中
margin:0 auto;
让当前块级元素水平居中
line-height
垂直对齐方式——行高
一般会把行高设置为容器高度,让文本在容器中垂直居中
取值:
line-height:
- px为单位的数字
- 无单位的数字,代表字号的倍数
一般只对一行文本设置行高,设置多行文本使用内边距算!!!
文本线条修饰
text-decoration:underline; 下划线
overline 上划线
none 删除所有线条
line-through 删除线
- 1
- 2
- 3
- 4
首行缩进
text-indent: px为单位的数字
- 1
文本阴影
text-shadow:h-shadow v-shadow blur color;
- 1
九.表格的样式
1.表格的常用样式
①table
尺寸、边框、背景、文本、内外边距都有效
②td/th
高度正常使用,宽度靠内容撑
边框、背景、文本、内边距都有效 外边距无效
2.表格的专属样式
①td/th属性
vertical-align:top/middle/bottom
设置td/th中文本的垂直对齐方式
②table的属性
- 边框合并
border-collapse:separate; 默认值,边框分离状态
collapse 边框合并
- 1
- 2
- 边框之间的距离,前提边框处于分离状态
border-spacing:20px;
- 1
- 边框标题
caption-side:top; 标题在表格上面
bottom 标题在表格下面
- 1
- 2
4.设置表格显示规则
表格自动布局(默认布局) | 表格的固定布局 |
---|---|
table-layout:auto | table-layout: fixed; |
单元格尺寸会自动适应内容 | 单元格大小取决设置的尺寸 |
比较灵活 | 表格不够灵活 |
表格越大,加载速度越慢 | 任何情况,加载速度都快 |
适用于不确定每列大小并且不复杂的表格 | 适用于确定每列大小的表格 |
十.浮动定位
float:none; 默认值,不浮动
left 左浮动
right 右浮动
- 1
- 2
- 3
右浮动必须使用margin-right
进行位移
没有定义宽度的元素,脱离文档流之后,宽度靠内容撑开
元素一旦脱离文档流,会变成块级元素
清除浮动带来的影响
clear:left; 清除左浮带来的影响
right 清除右浮带来的影响
both 同时清除左右浮动的影响
- 1
- 2
- 3
解决高度坍塌
- 给父元素设置高度(适合元素较少的情况下)
- 给父元素也设置浮动(会影响父元素的兄弟元素以及父元素的父元素,完全不能用)
- overflow:hidden/auto;(不能溢出显示了)
- 给父元素添加一个空的块级元素当做小儿子,并给小儿子设置
clear:both;
十一.其他重要样式属性
1.显示方式
display:block; 让元素按照块级元素去显示
display:inline; 让元素按照行内元素去显示
display:inline-block; 让元素按照行内块方式显示
display:table; 让元素按照表格的方式显示
display:none; 隐藏,脱离文档流的隐藏
- 1
- 2
- 3
- 4
- 5
2.显示效果
visibility:visible; 默认值,显示
visibility:hidden; 隐藏,不脱离文档流的隐藏
- 1
- 2
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; 十字
- 1
- 2
- 3
- 4
- 5
- 6
6.列表的样式
list-style-type:disc; 实心圆
square; 实心小方块
circle;空心圆
none; 去除列表标识项
list-style-image:
list-style-position:outside; 默认值,在li外侧显示列表标示
inside; 在li中显示列表标识
- 1
- 2
- 3
- 4
- 5
- 6
- 7
简写方式
list-style:type URL position;
list-style:none; 最简方式,清除列表标识项
- 1
- 2
十二.定位
相对定位、绝对定位、固定定位
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
- 只有已定位的元素才能设置堆叠
- 堆叠顺序对父子级元素无效,儿子永远压着父亲