Web前端之CSS
1. css的四种引入方式
1. 标签属性，这是利用了标签的style属性，控制标签的一些样式。这种方式不需要寻找标签，只会影响自己的属性。
语法如下：
<p style="background-color: #FF0000">我是谁</p>
2. 在head标签添加style标签,利用选择器进行标签属性的设置。
<html>
<head>
<meta charset="utf-8" />
<title>错误页面</title>
<style>
div {
color: lightslategrey;
font-size: 16px;
}
</style>
</head>
<body bgcolor="white">
<p></p>
<div id="cdn_debug_info" style="display:none;"></div>
<div>我是谁</div>
<div>你是谁</div>
</body>
</html>
影响body中的所有div标签
3. 采用css文件引入的方式，把css文件放到其他地方去。这样多个html文件，都可以引用一个css。
在head标签中添加。
<link rel="stylesheet" href="常用css方式.css">
4. 采用导入的方式，不常用，所以不需要具体研究，如果遇到，再进行研究。
2. CSS选择器
1. 基础选择器
1. 标签选择器
上面的第二种css方式，就是css的标签选择器的使用方法。
2. ID选择器(也可以指定某个标签的ID,如：div#p3)
<head>
<style>
#p3 {
background-color: green;
}
</style>
</head>
<p id="p3">p3</p>
3. class 选择器(也可以指定某个标签的类样式,如：p.p3)
<head>
<style>
.p3 {
background-color: blue;
}
</style>
</head>
<p class="p3">p3</p>
4. 通配符选择器： 通配选择器，找到所有的标签。
<head>
<style>
* {
background-color: red;
}
</style>
</head>
<p class="p3">p3</p>
2. 层级选择器
|
1
2
3
4
5
6
7
8
9
|
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; } E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; } |
注意，关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
1. 后代选择器 .c1空格c3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1 p{
color: #FF0000;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">我是杨建波
<p class="c3">哈哈哈</p>
</div>
<p>aaaaaa</p>
<div class="c3">我是王艳和</div>
</div>
<div class="c3">
我是股数为
</div>
</body>
</html>
.c1 的后代中的p标签。 .c1空格p{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1 .c3{
color: #FF0000;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">我是杨建波
<p class="c3">哈哈哈</p>
</div>
<p>aaaaaa</p>
<div class="c3">我是王艳和</div>
</div>
<div class="c3">
我是股数为
</div>
</body>
</html>
.c1的后代为c3的都受影响,不管是儿子还是孙子
2. 子代选择器 .c1 > .c3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1>.c3{
color: #FF0000;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">我是杨建波
<p class="c3">哈哈哈</p>
</div>
<p>aaaaaa</p>
<div class="c3">我是王艳和</div>
</div>
<div class="c3">
我是股数为
</div>
</body>
</html>
.c1>.c3 在c1的儿子找叫c3的标签
3. 毗邻选择器：.c1+标签 一定要跟c1紧挨着的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1 + p{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">我是杨建波
<p class="c3">哈哈哈</p>
</div>
<p>aaaaaa</p>
<div class="c3">我是王艳和</div>
</div>
<p>我是邻居</p>
<div class="c3">
我是股数为
</div>
</body>
</html>
与c1相邻的p标签
4. 兄弟选择器：.c1~标签 只要是兄弟标签都会变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1 ~ div{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">我是杨建波
<p class="c3">哈哈哈</p>
</div>
<p>aaaaaa</p>
<div class="c3">我是王艳和</div>
</div>
<p>aaaaa</p>
<div class="c3">
我是股数为
</div>
</body>
</html>
与c1同层级的div都受影响
5. 多元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
span.c3{
color: red;
}
</style>
</head>
<body>
<span>11111</span>
<div class="c3">
我是股数为
</div>
<span class="c3">22222</span>
</body>
</html>
span.c3 找到span标签，并且class为c3的标签 span要在c3的前面
. 表示且的关系
如果表示或的关系，使用逗号表示
6. 标签有多个类，在标签属性里面，可以指定多个class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
.c1 {
color: red;
}
.c2{
background-color: #E36E18;
}
</style>
</head>
<body>
<span>11111</span>
<div class="c3">
我是股数为
</div>
<span class="c1 c2">22222</span>
</body>
</html>
定义class的时候，使用空格隔开类名。
3. 属性选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。 比如“[cheacked]”。以下同。） p[title] { color:#f00; }E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;} |
1. 如何找到自定义的属性
<!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</title>
<style>
[egon='e']{
color: red;
}
</style>
</head>
<body>
<div egon="egg">egg</div>
<span egon="egg">egg</span>
<div egon="alex">egg2</div>
<div alex="32">alex</div>
</body>
</html>
4. 伪类选择器
1. anchor伪类：专用于控制链接的显示效果
'''
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
'''
2. 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.top{
background-color: rebeccapurple;
width: 100px;
height: 100px;
}
.bottom{
background-color: green;
width: 100px;
height: 100px;
}
.outer:hover .bottom{
background-color: yellow;
}
/*注意:一定是outer:hover 控制outer里某一个标签,否则无效*/
.top:hover .sun{ #悬浮到top时，后代sun背景为红色
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="top">top
<p class='sun'>猴子牛逼 </p>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
3. before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
<!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</title>
<style>
span{
color: royalblue;
width: 300px;
height: 300px;
background-color: lightslategrey;
}
span:hover{
color: red;
}
.s1,.s2{
width: 100px;
height: 100px;
}
.s1{
background-color: grey;
}
.s2{
background-color: rosybrown;
}
.outer{
border: 1px solid red;
}
.outer:hover .s1{
background-color: royalblue;
}
.outer:before{
content: "hello world";
color: red;
}
</style>
</head>
<body>
<span>hello world</span>
<hr>
<div class="outer">
<div class="s1"></div>
<div class="s2"></div>
</div>
</body>
</html>
4. 伪类选择器种类
1. 动态伪类
动态伪类是一类行为类样式，这些伪类并不存在于HTML中，只有当用户与页面进行交互式才能体现出来
5. 继承父类(与字体相关的样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
body{
background-color: #BD8E00;
}
p{
background-color: #FF0000;
}
</style>
</head>
<body>
<p class="p1" id="p1">this is P</p>
</body>
</html>
子孙按照父类的设置进行继承。
注意： CSS继承的权重为0，最低的，可以被其他规则覆盖。CSS继承是有限制的，有一些属性不能被继承，如：border,margin,padding,background等。
6. CSS优先级
!important声明>style标签属性>ID选择器>class选择器>标签选择器
3. CSS属性
1. 文本属性
color: 三种方式：(十六进制 RGB 颜色的英文单词)
text-align 属性规定元素中的文本的水平对齐方式。
-
-
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
-
注意：line-height: 200px; 让这个值等于行高。
1. 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
h2 {text-align:center;}
p.publish_time {text-align:right;}
p.content {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017 年 5 月 17 号</p>
<p class="content">
有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，
跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”
几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来
服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而
复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！
只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声
音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>
2. 其他属性
/* font-size: 10px; 文字大小 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' 字体类型，可以使用多个字体，使用逗号隔开。如果字体名称包括空格，需要使用引号 font-weight: lighter/bold/border/ 字体粗细 font-style: oblique 斜体字体 text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写 */
a标签默认有一个字体和颜色。
2. 背景属性
-
-
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景图像是否及如何重复铺排
- background-position 背景图像位置
-
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;
background:#ffffff url('1.png') no-repeat right top;
3. 边框属性
border-color: #FF0000; 边框的颜色
border-radius: 50%; 边框的弧度
border-width: 1px; 边框的宽度
border-style: solid; 边框的样式
也可以用一句话：border: 1px solid red;
边框-单独设置各边
border-top-style:dotted; 点线 border-right-style:solid; 实线 border-bottom-style:dashed; 虚线 border-left-style:none;
4. 列表属性
list-style-type 设置列表项标志的类型。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
ul{
list-style: none;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
5. dispaly属性
-
-
none 隐藏标签block 将标签声明为块级标签inline- inline-block
-
1. none(隐藏某标签)
p{display:none;}
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
2. block(内联标签设置为块级标签)
span {display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
3. inline(块级标签设置为内联标签)
li {display:inline;}
4. inline-block
选择内联标签的属性： 按内容占空间
选择块级标签的属性：可以设置长宽
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
#outer{
border: 3px dashed;
word-spacing: -5px;
}
5. 例子一
<!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</title>
<style>
span{
background-color: lightslategrey;
width: 200px;
height: 200px;
/*将标签声明为块级标签*/
display: block;
}
.c1{
background-color: greenyellow;
width: 200px;
height: 200px;
/*将标签声明为隐藏标签*/
display: none;
/*visibility: hidden;*/
}
.c2{
background-color: firebrick;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>span</span>
<div class="c1">DIV1</div>
<div class="c2">DIV2</div>
</body>
</html>
6. 例子二
<!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</title>
<style>
.c1,.c2,.c3{
width: 100px;
height: 100px;
display: inline-block;
margin-left: -6px;
}
.c1{
background-color: #EE4000;
}
.c2{
background-color: green;
}
.c3{
background-color: lightslategrey;
}
</style>
</head>
<body>
<span class="c1">1</span>
<span class="c2">2</span>
<span class="c3">3</span>
</body>
</html>
6. 内边距和外边距
1. 内边距：
padding 内容与边框的距离
padding 一个值 四周都加边距
padding 两个值 上下 左右
padding 四个值 上 右 下 左
padding 三个值 上 左右 下
2. 外边距 控制元素与元素之间的距离
margin 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
margin-bottom 上下取最大的值
margin-top 上下取最大的值
margin-left 从元素的左侧开始多少个像素
margin-right 左右是相加
margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
3. 居中应用
margin: 0 auto;
4. body也有外边距,取消body的外边距
body{
border-width: 1px;
border-style: solid;
margin: 0;
}
5. 例子
<!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</title>
<style>
body{
margin: 0 ;
}
.c1{
width: 200px;
height: 200px;
/*padding: 100px 100px 20px;*/
/*padding-top: 100px;*/
padding: 30px;
background-color: lightslategrey;
border: 10px solid red;
margin-bottom: 80px;
}
.c2{
width: 200px;
height: 200px;
padding: 5px;
background-color: darkseagreen;
margin-top: 50px;
}
.c3{
margin-right: 100px;
background-color: goldenrod;
}
.c4{
margin-left: 200px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c2">222</div>
<hr>
<span class="c3">1111</span>
<span class="c4">2222</span>
</body>
</html>
6. 边界重叠
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: rebeccapurple;
width: 300px;
height: 300px;
overflow: hidden;
}
.div2{
background-color: green;
width: 100px;
height: 100px;
margin-bottom: 40px;
margin-top: 20px;
}
.div3{
background-color:teal;
width: 100px;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
overflow: hidden; 内容溢出隐藏。
7. float属性
8. 背景图片
引入图片：background-image: url("IMG_5422.jpg"); 以图片进行填充
引入图片但是不填充：background-repeat: no-repeat;
设置背景图片的位置：background-position: center;
background-position: 100px 200px; 离左边100px, 离上边200px
简写的方法：background: url("IMG_5422.jpg") no-repeat center brown;
取图片的一部分
移动背景图片: 利用浏览器进行调整。
9. css属性操作之定位position.
position: fixed 以可视窗口为参照物 完全脱离文档流
例子： 定位到右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="常用css方式.css">-->
<style>
body{
margin: 0;
}
.c1{
width: 100%;
height: 1200px;
background-color: grey;
/*background-image: url("IMG_5422.jpg");*/
/*background-repeat: no-repeat;*/
/*!*background-position: center;*!*/
/*background-position: 100px 200px;*/
/*padding: 50px 100px; #上下*/
/*background: url("IMG_5422.jpg") no-repeat center brown;*/
}
.btn{
width: 60px;
height: 50px;
background-color: #FF0000;
text-align: center;
line-height: 20px;
color: white;
position: fixed;
right: 0;
bottom: 0;
}
.
</style>
</head>
<body>
<div class="c1"></div>
<div class="btn">返回顶部</div>
</body>
</html>
position:relative 相对定位 以自己原来的位置为参照物 不脱离文档流
position:absolute 绝对定位 脱离文档流 以最近的已定位的祖先元素，如果没有已定位的祖先元素，就以body为参照物。祖先元素里面有position。
10. positon应用
京东轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: solid 1px lightgreen;
width: 590px;
height: 340px;
position: relative ;
margin: 100px auto;
}
ul.c2{
list-style: none;
padding: 0 ;
}
ul li{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="c1">
<ul class="c2">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
