一、css介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
二、css语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
h1{color:red;font-size:14px;}
h1——>选择器
color:red；——>声明
color——>属性
red——>值
font-size:14px;——>声明
font-size——>属性
14px——>值
/* 这是注释 */
三、css引入方式
行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
内部样式
嵌入式是将CSS样式集中写在网页的head标签对的style标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。
# 现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
文件内容是 ：
p {color:blue;}
/*注释*/
注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx
/*个人中心设置*/
四、css选择器
css选择器——>如何找到对应的标签
基本选择器
元素选择器:
div{
color: red;
}
id选择器：id值不能重复
#bob{
color:green;
}
<div id="bob">
鲍勃
</div>
**类选择器: ** 类值可以重复
/* 所有标签里面含有class值为c1的标签 */
.c1{
color: green;
}
/* div标签里面含有class值为c1的标签 */
div.c1{
color: green;
}
<div id="bob" class="c1">
鲍勃
</div>
<div id="xy" class="c1">
小杨
</div>
通用选择器：找到所有的标签
*{
color: green;
}
组合选择器
后代选择器：找到div标签后代里面的所有a标签
div a{
color:red;
}
儿子选择器：找到div的儿子标签这一代的a标签
div>a{
color:red;
}
毗邻选择器：找到是紧挨着div标签的下一个a标签(是兄弟标签)
div+a{
color: red;
}
弟弟选择器：找到的是同级的后面的所有兄弟 a 标签
div~a{
color: red;
}
属性选择器
通过属性名来查找：找到所有含有title属性的标签
[title]{
color: red;
}
/* 含有title属性的div标签 */
div[title]{
color: red;
}
通过属性名对应的值来查找：当属性值的值为数字的时候,数字要加上引号
[title=‘666‘]{
color: red;
}
/* 含有type属性,并且type属性的值为text的input标签 */
input[type=text]{
background-color: red;
}
分组选择器
多个选择器选择的标签设置相同css样式的时候,就可以用分组
div 选择器和 p 选择器共同设置相同的样式,可以逗号分隔
div,p{
color:red;
}
伪类选择器
a 标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接颜色 */
a:link {
color: #FF0000
}
/* 已访问的链接颜色 */
a:visited {
color: #00FF00
}
/* 选定的链接，就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色*/
a:active {
color: #0000FF
}
input 输入框获取焦点时样式
input 默认的有个样式，鼠标点进去的时候，input 框会变浅蓝色的那个感觉
input:focus {
background-color: red; /* 框里面的背景色 */
}
hover的用法
用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色
a:hover{
background-color:yellow;
}
用法2：使用 a 控制其他块的样式：
使用 a 控制 a 的子元素 b：
.a:hover .b {
background-color:blue;
}
使用 a 控制 a 的兄弟元素 c (同级元素)
.a:hover + .c {
color:red;
}
使用 a 控制 a 的就近元素 d ：
.a:hover ~ .d {
color:pink;
}
伪元素选择器
通过css来造标签，不推荐使用
first-letter：常用的给首字母设置特殊样式
/* 将p标签中的文本的第一个字变颜色变大小 */
p:first-letter {
font-size: 48px;
color: red;
}
before：
/* 在每个<p>元素之前插入内容 */
p:before {
content:"*"; ——>插入的内容
color:red;
}
after：
/* 在每个<p>元素之后插入内容 */
p:after {
content:"[?]"; ——>插入的内容
color:blue;
}
before和after多用于清除浮动。
选择器的优先级
优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式
important > 内敛样式 > id选择器 > 类选择器 > 元素选择器 > 继承选择器
/* id选择器优先级为100 */
#d1{
color:deepskyblue;
}
/*--------------------------------------------------------------*/
/* 继承的优先级为0 */
body{
color:red;
}
/*--------------------------------------------------------------*/
/* 类选择器的优先级是10 */
.c1{
color: blue;
}
/*--------------------------------------------------------------*/
/* 元素选择器优先级是1 */
div{
color: green;
}
/*--------------------------------------------------------------*/
/* 内敛样式优先级为1000 */
<p class="cc3" style="color: red;">我是cc3的p标签</p>
/*--------------------------------------------------------------*/
/* important优先级最高,最牛逼 */
.cc1 .cc3 {
color: purple!important;
}
五、css属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; ——>宽度
height: 100px; ——>高度
background-color: pink; ——>背景颜色
}
字体属性
字体
.c1{
font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;
}
字体大小
.c1{
font-size:14px; /* 默认字体大小为16px */
}
字体颜色
.c1{
color: red;
}
子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
颜色表示方式
p{
color: red;
color: #78FFC9;
color: rgb(123,199,255);
color: rgba(123,199,255,0.3); /* 多了一个透明度的数字:0-1的一个数字 */
}
文字属性
文字对齐：text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
文字装饰：text-decoration
div a{
text-decoration: none; /* 给a标签去除下划线 */
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
首行缩进
/* 首行缩进两个字符，因为一个字的默认大小为16px */
p {
text-indent: 32px;
}
背景属性
div{
height: 600px;
width: 600px;
background-image: url("1.jpg"); /* 图片背景 */
background-color: red; /* 颜色背景 */
}
/* 背景重复 */
div{
height: 600px;
width: 600px;
background-image: url("1.jpg"); /* 图片背景 */
background-repeat: no-repeat; /* 背景图片不平铺 */
}
repeat(默认): 背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
repeat-x： 背景图片只在水平方向上平铺
repeat-y： 背景图片只在垂直方向上平铺
no-repeat： 背景图片不平铺
/* 图片背景位置 */
div{
height: 600px;
width: 600px;
background-image: url("1.jpg"); /* 图片背景 */
background-repeat: no-repeat; /* 背景图片不平铺 */
background-position: center center; /* 九宫格形式，正中间 */
}
|----------------------------------------------|
| left，top | center，top | right，top |
|----------------------------------------------|
| left，center | center，center | right，center |
|----------------------------------------------|
| left，bottom | center，bottom | right，bottom |
|----------------------------------------------|
div{
height: 600px;
width: 600px;
background-image: url("1.jpg"); /* 图片背景 */
background-repeat: no-repeat; /* 背景图片不平铺 */
background-position: 100px 50px; /* 相对于div标签的,距离左边100px,距离上面50px */
}
/* 简写方式 */
background:颜色/图片路径 是否平铺 图片位置
div{
height: 600px;
width: 600px;
background: url("1.jpg") no-repeat center center;
}
六、边框
边框属性：
1、border-width 宽度
2、border-style 样式
3、border-color 颜色
div{
height: 200px;
width: 200px;
border-width: 2px;
border-style: solid;
border-color: red;
}
/* 简写方式 */
div{
height: 200px;
width: 200px;
border: 2px solid red;
}
边框样式：border-style
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
单独设置边框样式：
div{
height: 200px;
width: 200px;
border-top-style: solid; /* 单独设置上边框为实线 */
border-top-color: red; /* 单独设置上边框为红色 */
border-bottom-style: dashed; /* 单独设置下边框为虚线 */
border-left-style: none; /* 单独取消左边框 */
}
border-left:10px solid red; /* 单独设置左边框的简写方式 */
border-radius: 50% /* 控制圆角 */
七、display属性
用于控制HTML元素的显示效果。
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline; /* 将标签设置为内敛标签 */
display: inline-block; /* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 */
display: none; /* 隐藏标签 ,并且不占用自己之前的空间 */
display: block; /* 将内敛标签设置为块级标签 */
}
隐藏标签
visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
display: none; /* 隐藏标签 ,并且不占用自己之前的空间* */
| 值 | 意义 |
|---|---|
| none | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| inline-block | 使元素同时具有行内元素和块级元素的特点。 |
八、css盒子模型
css里面，每个标签可以称为一个盒子模型：
1、content（内容）：盒子的内容，显示文本和图像所占的空间
2、padding（内填充）：内边距，用于控制内容与边框之间的距离
3、border（边框）：围绕在内边距和内容的外边框宽度
4、margin（外边距）：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
border内边距
div{
height: 100px;
width: 100px;
background-color: red;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
/* 简写 */
padding: 10px 20px; /* 10px上下内边距 ,20px左右内边距 */
padding: 10px 20px 5px 2px; /* 对应上右下左 */
}
margin外边距
top 距离上面标签的距离
bottom 距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离
div.d1 {
width: 200px;
height: 100px;
border: 2px solid deeppink;
margin-bottom: 200px;
}
div.d2{
width: 200px;
height: 100px;
margin-top: 100px;
border: 2px solid blue;
/* 简写方式 */
margin: 10px 20px;
margin: 10px 5px 6px 3px;
两个情况:
垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
水平方法,两个标签都设这外边距,取两者的边距之和
九、浮动float
浮动的两个特点：
1、浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2、浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
div.d1 {
width: 200px;
height: 100px;
background-color: red;
float: left; /* 向左浮 */
}
div.d2{
width: 200px;
height: 100px;
background-color: yellow;
float: right; /* 向右浮 */
}
浮动会造成父级标签塌陷问题
解决方法：
1 父级标签设置高度
2 伪元素选择器清除浮动，给父级标签加上类值
/* 方法1：*/
div.d1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
}
div.d2{
width: 200px;
height: 100px;
background-color: yellow;
float: right;
}
div.d3{
width: 100%;
height: 150px;
background-color: blue;
}
div.dd{
height: 100px; /* 设置父级标签高度 */
}
/* 方法2：*/
div.d1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
}
div.d2{
width: 200px;
height: 100px;
background-color: yellow;
float: right;
}
div.d3{
width: 100%;
height: 150px;
background-color: blue;
}
div.dd:after{
content: ‘‘; /* 结尾插入内容 */
display: block; /* 将内敛标签设置为块级标签 */
clear: both; /* 清除浮动 */
}
clear的值和描述
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
---------------------------------------------------------
<div class="dd">
<div class="d1">
</div>
<div class="d2">
</div>
</div>
<div class="d3">
</div>
十、overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值：内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
1 overflow（水平和垂直均设置）
2 overflow-x（设置水平方向，只出现x轴的滚动条）
3 overflow-y（设置垂直方向，只出现y轴的滚动条）
比如我们在一个标签里面写了一堆的文字，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了：
div.d1{
height: 50px;
width: 100px;
border: red solid 3px;
overflow: auto; /* 内容被修剪，显示滚动条 */
}
<div class="d1">
在茫茫的大海上，狂风卷记着乌云，在乌云和大海之间。
</div>
圆形头像示例
div.d1{
width: 100px;
height: 100px;
border: red solid 2px; /* 设置div的边框 */
border-radius: 50%; /* 设置边框圆角 */
overflow: hidden; /* 内容溢出隐藏 */
}
div.d1>img{
max-width: 100%; /* 让img标签按照外层div标签的宽度来显示 */
}
<div class="d1">
<img src="1.jpg">
</div>
总结一点：width宽度设置的时候，直接可以写100px，30%这种百分比的写法，它的宽度按照父级标签的宽度的百分比来计算。
十一、position定位
相对定位：relative 保留原来的空间位置，相对自己原来的位置移动，以左上角为基准
即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用
top：向下移动距离
bottom：向上移动距离
right：向左移动距离
left：向右移动距离
div.d2{
height: 100px;
width: 100px;
background-color: yellow;
position: relative;
top: 100px; /* 相对于自己原来的位置向下移动100px */
left: 100px; /* 在相对于自己原来的位置向右移动100px */
}
绝对定位：absolute 不保留自己原来的位置，按照父级标签或者祖先级标签，设置了position 为 relative 的标签的位置进行移动,如果一直找不到设置了设个属性的标签，那么按照浏览器界面来移动
div.d2{
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
top: 100px; /* 相对浏览器界面位置向下移动100px不保留原来的位置 */
left: 100px; /* 在相对浏览器界面位置向右移动100px不保留原来的位置 */
}
固定：fixed 不管页面怎么动，都在整个屏幕的某个位置
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
div.d2{
height: 100px;
width: 100px;
background-color: yellow;
position: fixed;
top: 100px; /* 相对浏览器界面位置向下移动100px */
left: 100px; /* 在相对浏览器界面位置向右移动100px */
}
十二、z-index控制层级
设置对象的层叠顺序。一般用在模态对话框上：
div.d2{
z-index: 999;
}
1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 最下面层 */
div.d1 {
height: 100px;
width: 100px;
background-color: red;
}
/* 中间层 */
div.d2 {
position: fixed;
background-color: black;
/* top\right\bottom\left都设置为0 */
/* 意思就是全屏，这个标签把全屏都覆盖了 */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
opacity: 0.4; /* 设置透明度 */
}
/* 最上面层 */
div.d3 {
height: 400px;
width: 300px;
background-color: white;
position: fixed;
/* 设置了left：50% 和top：50%，你就会发现，
你这个标签的左上角相对于页面的左面是50%，上面是50%，
所以我们还要移动窗口，往左移动标签宽度的一半，
往上移动高度的一半就行了。就是下面的margin设置 */
left: 50%;
top: 50%;
/* 左下右上，别忘了，往左移动要负值，往上移动要负值，
因为它的移动是按照自己标签的左上角来移动的。 */
margin: -200px 0 0 -150px;
z-index: 100;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d2">
</div>
<div class="d3">
</div>
</body>
</html>
十三、opacity透明度
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
方式一：针对背景透明度
div.d1{
/* 背景颜色或者字体颜色等单独的透明度 */
background-color: rgba(255,0,0,0.3);
height: 100px;
width: 100px;
}
方式二：整个
div.d2{
background-color: rgb(255,0,0);
height: 100px;
width: 100px;
opacity: 0.3; /* 整个标签透明度 */
}