带你快速掌握CSS基础
前言
- CSS称作为层叠样式表
- 主要是用于美化、装饰页面外观
- CSS样式可以分别为页面的各个层次设置样式
一、CSS基本样式
1.1样式规则与引入
- 样式规则
选择器{属性1:属性值1；属性2:属性值2；属性3:属性值3；}
注意： 花括号内部是一条或多条声明，每条声明由一个属性或者多个属性值组成，以键值对的形式出现
- 引入方式
- 1、行内式
<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标签名>
- 2、内嵌式
<style type="text/css">
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
- 3、外链式
<head>
<liink href="CSS文件的路径" type="text/css" rel="stylesheet">
1.2基础选择器
1、元素选择器
作用：通过元素选择器可以选则页面中的所有指定元素
语法：标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
p{
color: red;
}
h1{
color: red;
}
2、id选择器
主要是通过元素的id属性值选中唯一的一个元素
语法：#id属性值 {}
#p1{
font-size: 20px;
}
3、类选择器
主要是通过元素的class属性值选中一组元素
语法：.class属性值{}
.p2{
color: red;
}
.hello{
font-size: 50px;
}
4、并集选择器
主要是通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器n{}
#p1 , .p2 , h1{
background-color: yellow;
}
5、通配符选择器
他可以用来选中页面中的所有的元素
语法：*{}
*{
color: red;
}
6、复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器n{}
7、后代选择器
可以选择作为某元素后代的元素
祖父元素 后代元素{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
#d1 span{color: greenyellow;}
注意：
对于id选择器来说，不建议使用复合选择器
优先级的规则
* 内联样式 ， 优先级 1000
* id选择器，优先级 100
* 类和伪类， 优先级 10
* 元素选择器，优先级 1
* 通配* ， 优先级 0
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式
1.3字体样式
1、字体样式属性
- font-size：字体大小
| em | 相对于当前元素的字体大小来计算的 |
|---|---|
| px | 像素 |
| % | 根据其父元素的样式来计算该值 |
| cm | 厘米 |
| mm | 毫米 |
- font-family：字体
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
font-weight：字体粗细
| bold | 粗体 |
|---|---|
| Normal | 默认值 |
| bolder | 定义更粗的值 |
| lighter | 定义更细的值 |
font-style：字体风格
| normal | 默认值 |
|---|---|
| italic | 斜体 |
| oblique | 倾斜 |
1.4文本外观
- color：文本颜色
在CSS可以直接使用颜色的单词来表示不同的颜色
红色：red
蓝色：blue
绿色：green
也可以使用RGB值来表示不同的颜色
行间距：line-height
行间距 = 行高 - 字体大小
字间距：line-spacing
单词间距：word-spacing
text-transform：文本转换
| none | 不转换 |
|---|---|
| capitalize | 首字母大写 |
| uppercase | 全部字母转换为大写 |
| lowercase | 全部字母转换为小写 |
text-decoration：文本装饰
| none | 默认值 |
|---|---|
| underline | 为文本添加下划线 |
| overline | 为文本添加上划线 |
| line-through | 为文本添加删除线 |
text-indent：文本缩进
仅适用于块元素，不适合行内元素
white-space：空白符处理
| normal | 常规 |
|---|---|
| pre | 预格式化 |
| nowrap | 空格空行无效 |
text-shadow：阴影效果
选择器{text-shadow:h-shadow v-shadow blur color;}
text-overflow：文本溢出
| ellipsis | 用省略标签表示被修建文本 |
|---|---|
| clip | 修剪溢出文本 不显示省略标签“…” |
text-align：设置文本的对齐方式
| right | 文本靠右对齐 |
|---|---|
| left | 文本靠左对齐 |
| center | 文本居中对齐 |
| justify | 文本两端对齐 |
1.5CSS高级属性
伪类选择器
伪类专门用来表示元素的一种的特殊的状态 比如：访问过的超链接和获取焦点的文本框 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
:link：表示普通链接（没有访问过的那种）
a:link{color:white}
:visited：表示访问过的链接
a:visited{color:red}
:active：表示超链接点击的状态
a:active{color:yellow};
:hover：表示鼠标移入的状态
a:hover{color:black};
伪元素
表示元素中的一些特殊字符
first-letter：为元素的第一个字符设置一个样式
first-line：为元素的第一行设置一个样式
:before：表示元素最前面的部分
:after：表示元素最后面的部分
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取属性值以指定内容开头的元素
[属性名$=“属性值”] 选取属性值以指定内容结尾的元素
[属性名*=“属性值”] 选取属性值以包含指定内容的元素
子元素选择器
:first-child:可以选中第一个子元素
:last-child：可以选中最后一个子元素
:nth-child：可以选中任意位置的子元素
该选择器后面可以指定一个参数指定要选中第几个子元素
even：表示偶数的子元素
odd：表示奇数位置的子元素
兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
pan + p{background-color: yellow;}
选中后面所有的兄弟元素
语法：前一个~后边所有
span ~ p{background-color: yellow;}
否定的伪类
作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
二、盒子模型
2.1盒子模型的宽和高
witdth：设置盒子内容区的宽度
height：设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
.box1{
width:200px;
height:200px;
}
2.2为元素设置边框
为一个元素设置边框必须指定三个样式
border-width border-color border-style
border-width：边框的宽度
border-color：边框的颜色
.box1{border-width:10px;}
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left专门用来设置指定边的宽度
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
border-style：边框的样式
| none | 默认值 |
|---|---|
| solid | 实线 |
| dotted | 点状边框 |
| dashed | 虚线 |
| double | 双线 |
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
border：综合设置边框
边框的简写样式，通过它可以同时设置四个边框样式，宽度，颜色，而且没有顺序要求，border指定的就是四个边不能分别指定
border:red solid 10px;
border-top：上边框
border-bottom：下边框
border-left：左边框
border-right：右边框
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border-radius:圆角边框
可以将矩形边框设置四角圆角化
border-radius:50px 10px 20px 30px;
2.3内边距(padding)
内边距指的就是盒子的内容区和盒子边框之间的距离
padding-top：上内边距
padding-bottom：下内边距
padding-right：右内边距
padding-left：左内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
.box{
padding-top:100px;
padding-bottomm:100px;
padding-right:100px;
padding-left:100px;
}
padding:综合设置内边距
可以同时设置四个边框的样式，规则跟border一致
.box{padding:100px 100px 100px 100px}
2.4外边距(margin)
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置
margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置
.box{
margin-top:100px;
margin-left:100px;
margin-right:100px;
margin-bottom:100px;
}
外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
.box{margin-left:-100px;}
margin：综合设置外边距
可以同时设置四个方向的外边距，，规则跟padding
.box{margin:0 auto;}
2.5默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，，这些样式在我们正常写情况下是不需要使用的，，所以我们要在编写样式之前要把这些margin和padding全部去掉
清除浏览器的默认样式
*{
margin:0;
padding:0
}
2.6内联元素
内联元素指的就是display属性为inlin的元素，也称行内元素，在网页中总是随着文字流出现在“行内” 比如：a 、span、br等这些就是行内元素
内联元素不能设置width和height，但是可以设置内边距、边框、水平外边距，但是垂直内边距、垂直边框不会影响到页面的布局
2.7元素的转换(display)
作用：将一个内联元素变成块元素
inline:可以将一个元素作为内联元素来使用
block：可以将一个元素转换为行内元素
inline-block：将一个元素转换为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none：不显示元素，并且元素不会在页面中继续占用位置
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
.box{
width:100px;
height:100px;
background-color:blue;
display:none;
}
- visibility：可以用来设置元素的隐藏和显示的状态
visible：默认值，元素默认会在页面显示
hidden：元素会隐藏不显示，隐藏的元素虽然不会在页面中显示，，但是它的位置会依然保持
.box{visibility:hidden;}
2.8 box-shadow属性
作用：添加阴影效果
| h-shadow | 水平阴影 |
|---|---|
| v-shadow | 垂直阴影 |
| blur | 阴影模糊半径 |
| spread | 阴影扩展半径 |
| color | 阴影颜色 |
| outset/inset | 外阴影/内阴影 |
box-shadow:5px 5px 10px 2px #999 inset;
2.9 box-sizing属性
作用：用于定义盒子的宽度值和高度值是否包含内边距和边框
基本语法：box-sizing:content-box/border-box
content-box：当定义width和height时，它的参数值不包括border和padding
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内
三、浮动与定位
3.1文档流
文档流处在页面的最底部，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
3.2浮动(float)
1、当为一个元素设置浮动以后(非none)，元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
2、元素浮动之后，会尽量向页面的左上或者右上漂浮，，直到遇到父元素的边框或者其他的浮动元素
3、如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
4、浮动的元素不会超过它上面的兄弟元素，最多就是一边对齐
| none | 默认值 |
|---|---|
| right | 标签向左浮动 |
| left | 标签向右浮动 |
- 未浮动之前的代码以及效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=di, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮动之后的代码以及效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=di, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
- 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=di, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.p1{
font-size: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
这一路上走走停停，顺着少年漂流的痕迹迈出车站的前一刻，竟有些犹豫
不禁笑这近乡情怯，仍无可避免而长野的天，依旧那么暖
风吹起了从前，从前初识这世间，万般流连看着天边似在眼前，也甘愿赴汤蹈火去走它一遍
如今走过这世间，万般流连翻过岁月不同侧脸，措不及防闯入你的笑颜
我曾难自拔于世界之大，也沉溺于其中梦话不得真假 不做挣扎，不惧笑话
我曾将青春翻涌成她，也曾指尖弹出盛夏
心之所动，且就随缘去吧逆着光行走，任风吹雨打
短短的路走走停停，也有了几分的距离不知抚摸的是故事，还是段心情
也许期待的不过是，与时间为敌再次看到你，微凉晨光里，笑的很甜蜜
从前初识这世间，万般流连看着天边似在眼前，也甘愿赴汤蹈火去走它一遍
如今走过这世间，万般流连翻过岁月不同侧脸，措不及防闯入你的笑颜
我曾难自拔于世界之大，也沉溺于其中梦话不得真假，不做挣扎，不惧笑话
我曾将青春翻涌成她，也曾指尖弹出盛夏心之所动，且就随缘去吧
晚风吹起你鬓间的白发，抚平回忆留下的疤你的眼中，明暗交杂，一笑生花
暮色遮住你蹒跚的步伐，走进床头藏起的画画中的你，低着头说话
我仍感叹于世界之大，也沉醉于儿时情话不剩真假，不做挣扎，无谓笑话
我终将青春还给了她，连同指尖弹出的盛夏心之所动，就随风去了以爱之名，你还愿意吗
</p>
</body>
</html>
- 在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，宽度和高度都被内容撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: rgb(187, 170, 255);
float: left;
}
</style>
</head>
<body>
<div class="box">Hello</div>
</body>
</html>
当开启内联元素span的浮动，，内联元素脱离文档流以后会变成块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: rgb(187, 170, 255);
float: left;
}
.s1{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">Hello</div>
<span class="s1">Bye</span>
</body>
</html>
overflow属性
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区最小，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的内容显示，我们将这种超出的内容称为溢出的内容，我们可以通过overflow来设置父元素如何处理溢出内容
| visible | 内容不会被修剪，呈现在标签框之外 |
|---|---|
| hidden | 溢出的内容被修剪，并且修剪的内容不可见 |
| auto | 会根据需求自动添加滚动条 |
| scroll | 会为父元素添加滚动条，通过拖动滚动条来查看完整内容 |
clear清除浮动
| none | 默认值，，不清除浮动 |
|---|---|
| left | 清除左侧浮动元素对当前元素的影响 |
| right | 清除右侧浮动元素对当前元素的影响 |
| both | 清除左侧浮动元素对当前元素的影响 |
3.3定位(position)
- 定位指的就是将指定的元素摆放到页面的任意位置
- 通过定位可以任意的摆放元素
- 相对定位
基本语法
position:relative;
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
可以通过四个属性来设置元素偏移量
| left | 元素相对于其定位位置的左侧偏移量 |
|---|---|
| right | 元素相对于其定位位置的右侧偏移量 |
| top | 元素相对于其定位位置的上边的偏移量 |
| bottom | 元素相对于其定位位置下边的偏移量 |
- 绝对定位
基本语法
position:absolute;
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，内联元素变成块元素
- 固定定位
基本语法
position:fixed;
固定定位永远都是相对于浏览器窗口进行定位
IE6不支持固定定位
- 层次(z-index)
如果定位元素的层次是一样，则下边的元素会盖住上一边
- 如果定位元素的层级是一样，则下边的元素会盖住上边的
- 通过z-index属性可以用来设置元素的层级
- 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
- 层级越高，越优先显示
- 对于没有开启定位的元素不能使用z-index
z-index:1;
四、背景
4.1背景颜色（background-color）
body{
background-color:#000;
}
4.2背景图像
语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
4.3背景平铺（background-repeat）
作用：用于设置背景图片的重复方式
| repeat | 背景图片会双方向重复（平铺） |
|---|---|
| no-repeat | 背景图片不会重复，有多大就显示多大 |
| repeat-x | 背景图片沿水平方向重复 |
| repeat-y | 背景图片沿垂直方向重复 |
4.4背景位置（background-position）
作用：可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值该属性可以使用 top right left bottom center中的两个值
age:
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
4.5背景图像固定（background-attachment）
作用：用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
4.6背景图像大小（background-size）
background-size:属性值1 属性值2；
| 像素值 | 设置背景图像的高度和宽度 |
|---|---|
| 百分比 | 以父标签的百分比来设置背景图像的宽度和高度 |
| cover | 把背景图像扩展够大，使背景图像完全覆盖背景区域 |
| contain | 把背景图像扩展最大尺寸，使宽度高度完全适应内容区域 |
4.7设置背景图像的显示区域（background-origin）
background-origin:属性值；
三个属性值：
padding-box：背景图像相对于内边距区域来定位
border-box：背景图像相对于边框来定位
content-box：背景图像相对于内容框来定位
4.8设置背景图像的裁剪区域（background-clip）
background-clip:属性值；
border-box：从边框区域向外裁剪背景
padding-box：从内边距区域向外裁剪背景
content-box：从内容区域向外裁剪背景
4.9元素透明度（opacity）
| 0 | 表示完全透明 |
|---|---|
| 1 | 表示完全不透明 |
| 0.5 | 表示半透明 |
扫一扫
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
