CSS
2018-10-25 本文已影响0人
Snackk
CSS语法
CSS样式由两个组成部分：
1.选择器
CSS语法：
选择器 {k1: v1; k2:v2...}
2.声明
a属性
b.属性值
css注释：
/*这是注释*/
CSS的引入方式
1.行内注释
<p style="color: red">Hello world.</p>
2.内部样式
<style>
p{
background-color: #2b99ff;
} # 背景色
div{
color: #2b99ff; 字体颜色
}
</style>
</head>
3.外部样式
将css写在一个单独的文件中，然后在页面进行引入即可，直接创建一个stylesheet文件。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
代码
css文件名后缀是以.css,格式和内部格式相似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="b.css" rel="stylesheet">
</head>
<body>
<p>
我是至尊
</p>
</body>
</html>
选择器：
基本选择器
1. ID选择器 --> #p1
2. 标签选择器 --> div
3. 类选择器 --> .c1
4. 通用选择器 --> *
5. 标签，类选择器 -->p.c1
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id是p1的标签*/
#p1 {color: red}
/*id是p2的标签*/
#p2 {
color: green
}
/*所有的div标签*/
div {color: blue}
/*有c1这个class的标签*/
.c1 {color: deeppink}
/*有c2这个class的标签*/
.c2 {color: purple}
/*有c1这个class的i标签*/
i.c1 {color: yellow}
.c1.c2 包括这两个类的标签
/* 通用 */
* {color: black}
</style>
</head>
组合选择器
1. 子子孙孙选择器（后代选择器） --> div p
2. 儿子选择器 --> div>p
3. 毗邻选择器(紧挨着下面的标签) --> div+p
4. 弟弟选择器(同级下面所有的标签) --> div~p
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*找儿子标签：li的儿子a标签*/
li>a {color: red}
/*子子孙孙中找标签*/
#d1 p {color: green}
/*毗邻选择器：找下面紧挨着的*/
div+p {color: blue}
/*弟弟选择器：同级往下面找 */
#d2~a {color: deeppink}
</style>
</head>
<body>
<ul>
<li><a href="">手机</a></li>
<li><a href="">电脑</a></li>
<li><a href="">爆米花</a></li>
</ul>
<ol>
<li><p><a href="">哈哈哈</a></p></li>
</ol>
<div id="d1">
<div>
<div>
<p>我是一个p标签！</p>
</div>
<p>我也是一个P标签！</p>
</div>
<p>我是儿子p标签！</p>
</div>
<hr>
<p>div上面的p标签</p>
<div>div</div>
<p>div下面的p标签</p>
<p>div下面的下面的p标签</p>
<hr>
<div id="d2">d2</div>
<p>d2下面的p</p>
<a href="">呵呵</a>
<p>p标签</p>
</body>
</html>
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
不常用属性：
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
分组和嵌套
1.分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
为div标签和p标签统一设置字体为红色。
代码
div,
p {
color: red;
}
2.嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p {
color: red;
}
伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式，框内背景*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
常用的给首字母设置特殊样式：first-letter
div.c1:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动。
选择器的优先级：
1.CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。CSS继承性的权重是非常低
2.选择器权重计算方式(权重可以相加),值越大，优先级越高
元素选择器(1)：p ｛color：red｝
类选择器(10)：.c1 {color: red}
id选择器(100)：a1 ｛color：red｝
内联样式(1000)：<p style="color: red">Hello world.</p>
!important方式来强制让样式生效: p {color : red!important}
权重相加(10+10):.c1>.c2 {color: yellow}
css之宽和高：
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
代码
<style>
div {width: 1000px;background-color: red} /*设置宽度*/
span {width: 1000px;background-color: red}
</style>
字体属性
1.文字字体：font-family
可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
代码：
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
字体大小
如果设置成inherit表示继承父元素的字体大小值。
p {
font-size: 14px;
}
字重（粗细）
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
文字属性：
文字对齐
text-decoration 属性用来给文字添加特殊效果。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration 属性用来给文字添加特殊效果
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {width: 1000px;background-color: red}*/
/*span {width: 1000px;background-color: red}*/
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
span {
font-size: 48px;
}
div {
font-weight: bold;
/*color: green;*/
/*color: #00FF00;*/
color: rgb(251,97,19);
/*中间对齐*/
text-align: center;
}
p {
font-size: 14px;
text-decoration: overline;
text-indent: 28px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
一个标签可以同属于多个类--> class="a1 a2" 表示这个标签 .c1.c2 {color :red}
整理背景：
/*背景颜色*/
background-color: red;
背景颜色：
.c1 {
height: 100px;
width: 100px;
color: red;
background-color: green;
}
背景图片
/*背景图片*/
background-image: url('1.jpg');
/*背景重复*/
background-repeat: no-repeat;
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
/*背景位置*/
background-position: right top;
背景简写
.c2 {
height: 600px; # 图片200 200 就会以九宫格平铺
width: 600px;
background: url("hlw.png") no-repeat center bottom;
}
支持简写：
background:#ffffff url('1.png') no-repeat right top;
背景-->雪碧图：为了减少网页请求图片的次数，将很多小图片放在一个大图片中，通过background-postion来指定
背景固定：
background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动背景图示例</title>
<style>
* {
margin: 0;
}
.box {
width: 100%; #沾满宽度
height: 500px;
background: url("https://mir-s3-cdn-cf.behance.net/project_modules/fs/8ad33271028179.5bb705f12ba56.jpg") no-repeat center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumorchid;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
边框：
边框属性
border-width
border-style
border-color
代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1 {
height: 100px;
width: 100px;
border-width: 2px; /*边框宽度*/
border-style: solid; /*边框样式*/
border-color: #2b99ff; /*边框颜色*/
}
</style>
</head>
简写
#i1 {
border: 2px solid red;
}
边框样式
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
另一种样式（边框四个边都各种都格式）
.c1 {
height: 100px;
width: 100px;
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius（属性能实现圆角边框的效果）
/*画一个圆*/
.c3 {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
}
鼠标移上去变色
.a2:hover {background-color: rebeccapurple}
改商城价格：
Console --> document.body.contentEditable=true
display（控制HTML元素的显示效果）：
div.c1 + tab = <div class="c1"></div>
div*3 = 3 个div标签
div.a5{文本$}*4
display:"none" HTML文档中元素存在，但是在浏览器中不显示。直接消失
display:"block"行内标签编程块节标签
display:"inline" 行内标签属性
display:"inline-block" 行标签和块标签的特点
display:"none"与visibility:hidden的区别：
都是隐藏页面上的标签
display: none隐藏标签并且不占位置
visibility: hidden 隐藏标签的同时会占住位置
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
盒子模型：
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
margin：顺序：上右下左
.padding-test {
padding: 5px 10px 15px 20px;
}
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
float浮动：
取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--去除浏览器默认边框-->
body {
margin: 0;
}
.left {
width: 20%;
height: 1000px;
background-color: red;
/*左浮动*/
float: left;
}
.right {
width: 80%;
height: 1000px;
background-color: green;
右浮动
float: right;
}
</style>
</head>
浮动副作用的解决方法（clear）
clear属性规定元素的哪一侧不允许其他浮动元素。
注意：clear属性只会对自身起作用，而不会影响其他元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
border: 1px solid black;
/*height: 102px;*/
}
.c2 {
height: 100px;
width: 200px;
background-color: red;
border: 1px solid black;
}
.c3 {
width: 100%;
height: 200px;
background-color: deeppink;
}
.left {
float: left;
}
.right {
float: right;
}
/*clearfix清除浮动的约定类名*/
.clearfix:after {
content: '';
display: block;
clear: both; # 清除浮动
}
</style>
</head>
<body>
<div class="c1 clearfix">
<div class="c2 left"></div>
<div class="c2 right"></div>
<!--<div class="cc"></div>-->
</div>
<div class="c3"></div>
</body>
</html>
父标签塌陷问题（清除浮动）
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden; #内容会被修剪，并且其余内容是不可见的。
}
.header-img>img {
max-width: 100%; #图片大小和边框一致
}
</style>
</head>
<body>
<div class="header-img">
<img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>
</body>
</html>
定位（position）
默认属性值：static
相对定位：relative 相对定位：相对 标签原来的位置 做的定位
position: relative
left:
top:
bottom:
right:
绝对定位：absolute
固定：fixed
相对定位
.c2 {
position: relative;
left: 200px;
top: -200px;
}
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1, .c2 {
height: 200px;
width: 200px;
}
.c1 {
background-color: red;
/*position: relative;*/
/*left: 200px;*/
}
.c2 {
background-color: green;
position: relative;
left: 200px;
top: -200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
absolute（绝对定位）
position: absolute;
top: 200px;
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c0, .c2, .c3 {
height: 200px;
width: 200px;
}
.c0 {
background-color: blue;
}
.c1 {
/*position: relative;*/
/*left: 200px*/
}
.c2 {
background-color: red;
position: absolute;
top: 200px;
}
.c3 {
background-color: green;
}
</style>
</head>
<body>
<div class="c0"></div>
<div class="c1">
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
fixed（固定）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。
.c1 {
border: 1px solid black; /*边框*/
width: 80px;
height: 40px;
line-height: 40px; /*将行高设置成标签的高度可以实现垂直居中*/
text-align: center; /*垂直居中*/
position: fixed; /*固定*/
bottom: 50px;
right: 50px;
}
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回顶部示例</title>
<style>
* {
margin: 0;
}
.d1 {
height: 1000px;
background-color: #eeee;
}
.scrollTop {
background-color: darkgrey;
padding: 10px;
text-align: center;
position: fixed;
right: 10px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
文档流问题
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
Z轴（z-index）：
设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。
#i2 {
z-index: 999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
/*position: fixed;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
/*z-index: 998;*/
}
.modal {
background-color: blue;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
另一种写法
.modal {
background-color: blue;
position: absolute;
height: 300px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
z-index: 1000;
}
透明度的区别（opacity与rgba）
opacity：设置该标签的透明度
rgba：设置背景颜色的透明度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 100px;
width: 100%;
color: red;
background-color: rgba(0,0,0,0.4);
}
.c2 {
height: 100px;
width: 100%;
color: red;
background-color: rgb(0,0,0);
opacity: 0.4;
}
</style>
</head>
<body>
<div class="c1">
事了拂衣去
</div>
<hr>
<div class="c2">
深藏身于名
</div>
</body>
</html>
