CSS
HTML对于页面上元素的样式，没有一个很好的办法进行约束，所以有了css来修改页面上元素样式,考虑一个对象的样式：颜色、大小、位置，边框，距离。
在HTML当中修改样式需要依赖CSS(cascading style sheets):层叠样式表。
层叠：就是在一个对象上，通过多重描述作用到一起形成样式。
CSS使用的方法
CSS是作用在HTML元素上的样式描述，所以在使用的时候，有三种方式：
行内式
在元素内部通过style属性进行css样式设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 style="color: red;">G</h2>
</body>
</html>
HTML任意标签都有style属性
嵌入式
在页面的内部，通常在头部，使用style标签，在style标签内部编写样式，这样的样式可以作用在一个页面多个共性的元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
</body>
</html>
外链式
基于多个HTML共性的CSS，为了方便代码的维护，采用外部的CSS文件进行样式描述，这个时候需要使用link标签导入外部的CSS文件
文件结构
被导入的css文件
h2 {
color: green;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/01_CSS.css">
</head>
<body>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
</body>
</html>
三种使用方式不同，但是css的编写格式一致：
属性：值;
而嵌入和外链式需要使用大括号对css进行分割
{属性：值;}
CSS选择器
CSS是用来描述HTML元素的样式的，要描述就需要指定描述对象，指定的方式就是选择器。
基本选择器
标签选择器
通过标签名称选择所有该标签的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: pink;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h6>h1</h6>
<h6>h2</h6>
<h6>h3</h6>
</body>
</html>
id选择器
通过#id来指定页面内部对应id值的标签的样式，一个页面当中，id不可以重复，所以，id选择器只针对单个元素进行修改，和行内样式有重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h6 id="red">h1</h6>
<h6>h2</h6>
<h6>h3</h6>
</body>
</html>
类选择器
通过.class来指定页面内部对应class值的标签，类选择器在整个CSS编写过程当中使用最频繁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.g {
color: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p class="g">p3</p>
<h6 id="red">h1</h6>
<h6 class="g">h2</h6>
<h6>h3</h6>
<span class="g">这是一个span</span>
</body>
</html>
关系选择器
子关系
使用>连接两个选择器来表示当前标签直接嵌套的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#w_p > span{
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<p>
<span>
2
</span>
</p>
</p>
</body>
</html>
后代关系
使用空格连接两个选择器来表示当前标签嵌套的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#w_p > span{*/
/*color: red;*/
/*}*/
#w_p span{
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
后代包含子
并列关系
使用,连接多个选择器来表示并列的多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#w_p > span{*/
/*color: red;*/
/*}*/
/*#w_p span{*/
/*color: red;*/
/*}*/
#w_p,#w_p1 {
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_p1">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
属性选择器
基于基本选择器和关系选择器的更加细节一种选择器
| 选择器 | 描述 |
|---|---|
| p[age=“18”] | 所有age属性值为18的元素 |
| p[id^=“w”] | 所有id属性值以w开头的元素 |
| p[id$=“p”] | 所有id属性值以p结尾的元素 |
| p[id*=“p”] | 所有id属性值包含p的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[age="18"]{
color: red;
} /*所有age属性值为18的元素*/
p[id^="w"]{
color: red;
} /*所有id属性值以w开头的元素*/
p[id$="p"]{
color: red;
}/*所有id属性值以p结尾的元素*/
p[id*="p"]{
color: red;
}/*所有id属性值包含p的元素*/
</style>
</head>
<body>
<p id="w_p" age="18">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_1" age="18">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="b_p2">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_p3">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
伪类选择器
当触发某个条件之后执行的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
color: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
</body>
</html>
CSS选择器的优先级
| 优先级 | 值 |
|---|---|
| 行内 | 1000 |
| id | 100 |
| class | 10 |
| 标签 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p style="color: red">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</body>
</html>
css选择器的优先级和python变量的作用域原理类似，遵循就近原则。
CSS字体样式
颜色
color 属性来决定字体的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
大小
font-size 字体大小，单位通常是px，也可以是em，rem或者百分比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-size: 150px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-family: "Microsoft YaHei UI Light";
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
粗细
font-weight,100-900粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
样式
font-style: 通常进行文字倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
font-style: italic;/*倾斜*/
font-style: normal;/*正常样式*/
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
位置
缩进
text-indent: 指定首行缩进距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-indent: 20px;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
水平
text-align进行水平方向上文字的位置的设置，包括 left(左) right(右) center(中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
垂直
CSS当中，文字垂直位置是通过行高进行设置的，通常文字靠下显示，但是会在行高高度上垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
line-height: 300px;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
对于a标签的强调
text-decration 去掉a标签的下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">hello world</a>
</body>
</html>
css颜色设置
在css当中通常有四种颜色表达的方式
单词
使用关于颜色的英文单词可以快速的描述颜色
red green blue yellow
rgb
工业三原色，使用 r(红) g(绿) b(蓝) 三种颜色进行混色，调和出其他颜色，在CSS当中，每种颜色的由弱到强为 0-255，
rgb(0,0,0) 黑
rgb(255,255,255) 白
rgb(255,0,0) 红
rgb(0,255,0) 绿
rgb(0,0,255) 蓝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
line-height: 300px;
color: rgb(0,0,0);
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
十六进制
在css当中采用#6位16进制数，进行颜色表述，rgb分别占2位。
255 FF
#FFFFFF #FFF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: #4085FC;
}
.red{
color: #F13F3F;
}
.orange{
color: #ECBB06;
}
.green{
color: #43996A;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
/*font-style: italic;倾斜*/
font-style: normal;/*正常样式*/
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
rgba
在rgb的基础上添加了透明度a,a的取值范围0-1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
line-height: 300px;
color: rgba(0,0,255,0.1);
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
元素划分
块级元素
块儿级元素，默认宽度100%占满浏览器，支持全部的CSS样式，比如：
<p>
<div>
<h1-6>
<ul> <ol> <dl> <dt> <dd> <li>
行内元素
宽度由内容决定，所以不能进行位置，大小，边距设置，多个行内元素是居于一行的，比如：
<span>
<a>
<em> <i> <b> <u> <strong>
行内块元素
支持所有的CSS样式，但是多个行内块元素是居于一行，通常是由块儿级元素或者行内元素转换过来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>下面是个p</p>
<p>上面是个p</p>
<a href="#">这是个a</a>
<a href="#">这还是个a</a>
</body>
</html>
三种元素可以通过display方法进行转换:
| 参数 | 描述 |
|---|---|
| inline | 转换为行内元素 |
| block | 转换为块儿级元素 |
| inline-block | 转换为行内块儿元素 |
| none | 隐藏元素 |
CSS大小设置
除了文字之外，其他的HTML元素都可以使用 width 和 height 进行大小设置
| 属性 | 描述 |
|---|---|
| width | 宽 |
| height | 高 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<img src="1.jpg">
</body>
</html>
CSS边框与背景设置
在CSS当中可以使用backgroud对HTML元素进行背景设置，细分有以下方法：
| 方法 | 描述 |
|---|---|
| background | 背景总的方法，可以支持连写 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-size | 背景大小 |
| background-repeat | 重复，repeat, no-repeat, repeat-x, repeat-y |
| background-position | 背景位置 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
width: 100%;
}
body{
background-image: url("2.jpg");
background-size: 500px auto;
background-repeat: no-repeat;
background-position: center right;
background: url("2.jpg") no-repeat 500px center ;
}
span,p{
background-color: #4085FC;
}
</style>
</head>
<body>
<span>
hello world
</span>
<p>
hello world
</p>
</body>
</html>
在HTML当中，任何一个元素都有边框，使用border进行设置
| 属性 | 描述 |
|---|---|
| border | 边框 |
| border-left | 左边框 |
| border-right | 右边框 |
| border-top | 顶部边框 |
| border-bottom | 底部边框 |
| border-radius | 圆角 |
| box-sizing:border-box; | 取消边框占位 |
对边框的描述有三个参数
粗细：边框线条的粗细，不占元素宽度
样式：线条颜色 虚线(dashed)，实线（solid），点状线(dotted)
颜色: 就是颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px black solid;
width: 500px;
height: 600px;
text-align: center;
line-height: 500px;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
</html>
CSS边距
css当中有内边距（padding）和外边距(margin)，
margin 是边框距离父元素的距离
padding 是边框和内容之间的距离
padding会改变原来的边框大小
padding 和 margin都可以四个方向单独设置
| 方向 | 描述 |
|---|---|
| padding-left margin-left | 左边距 |
| padding-right margin-right | 右边距 |
| padding-top margin-top | 上边距 |
| padding-bottom margin-bottom | 下边距 |
padding和margin可以支持多参数连写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 800px;
height: 800px;
border: 2px black solid;
padding: 100px; /*内边距，边框和内容之间的距离*/
}
.child{
width: 200px;
height: 200px;
border: 100px blue solid;
margin: 200px;*/
}
.child{
width: 200px;
height: 200px;
border: 100px blue solid;
margin: 200px; /*外边距距离上下左右各200*/
margin: 200px 400px; /*外边距距离上200 左400*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
margin也可以用在块元素水平居中
magin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.borderd{
background-image: url("border.jpg");
width: 179px;
height: 320px;
margin: 0 auto;
}
.borderd > img{
margin: 8px;
width: 165px;
height: 255px;
}
</style>
</head>
<body>
<div class="borderd">
<img src="atm.jpg">
</div>
<hr>
<div class="borderd">
<img src="atm.jpg">
</div>
</body>
</html>
css位置设置
文档流
HTML默认是从上到下，从左到右进行元素分布的，块儿级元素占一行，行内元素从左到右排列在一行。
浮动
浮动可以使块级元素可以从左到右进行排列，但是会脱离当前的文档流，上浮一层。
浮动采用float属性，有以下特征：
1、浮动分为left和right，注意浮动和元素的先后顺序，写在前面的元素先浮动。
2、浮动后的元素会脱离当前的文档流，所以不会占用当前文档流的高度，导致父元素闭合。
3、浮动的对象按照浮动的值进行水平排列，如果超出父元素的宽度自动折行
4、浮动之后脱离原来的文档流，如果上面有没有浮动的元素会覆盖，如果下面有没有浮动的元素会补齐，文字除外
css 位置
css位置，可以使用浮动进行设置，float:left[right],但是单纯浮动不够灵活还是需要另外技术点来确定元素的位置。这个技术点叫做定位。
在这个技术点开始之前，先看一下清除浮动和元素溢出的处理。
浮动可以实现好多布局，但是也带来了很多问题，尤其是：
1、父元素高度问题
2、换行问题
基于上述问题，在浮动之后，需要清除浮动对父元素和下面不浮动的元素带来的影响，清除浮动有以下三种方式。
1、给父元素固定高度。
2、使用overflow: hidden;属性
3、使用消除浮动的css属性 clear:both; 这个功能和上述的功能不一样，不是针对父元素，而是针对换行，浮动过程当中使用clear：both，浮动元素会换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
border: 1px black solid;
/*height: 500px; 第一种清除浮动*/
/*overflow: hidden; overflow 清除浮动*/
}
.parent div{
float: left;
width: 400px;
height: 400px;
}
.c1{
background-color: red;
}
.c2{
background-color: green;
}
.c4{
background-color: blue;
}
.c3{
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">
</div>
<div class="c4" style="float: none;">
</div>
</div>
</body>
</html>
溢出处理
在css样式设置过程当中，经常会遇到子元素的宽高大于父元素，这个时候需要对超出的部分进行设置。
| 属性 | 描述 |
|---|---|
| hidden | 超出部分隐藏 |
| scroll | 超出部分自适应,添加两个方向的滚动条 |
| auto | 超出部分自适应,超出添加方向添加滚动条 |
| visible | 超出部分默认 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 400px;
height: 400px;
border: 2px black solid;
/*overflow: hidden; /*超出部分隐藏*/
overflow: scroll; /*超出部分自适应,添加两个方向的滚动条*/
/*overflow: auto; /*超出部分自适应,超出添加方向添加滚动条*/
/*overflow: visible; /*超出部分默认*/
}
.c1{
width: 500px;
height: 300px;
background-color: rgba(255,255,0,0.2);
}
</style>
</head>
<body>
<div class="parent">
<div class="c1"></div>
</div>
</body>
</html>
定位
开发者可以使用position进行定位操作：
| 参数 | 描述 |
|---|---|
| absolute | 绝对定位，参照页面进行定位 |
| relative | 相对定位，相对父元素 |
| fixed | 固定定位，基于窗口 |
| static | 静态，默认值无效果 |
在position的使用过程当中，必须配合方向描述定位的位置
| 方向 | 翻译 |
|---|---|
| top | 上 |
| bottom | 下 |
| left | 左 |
| right | 右 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 100px auto;
}
.child{
width: 200px;
height: 200px;
background-color: green;
/*position: absolute;*/
/*position: relative;*/
/*position: fixed;*/
/*position: static;*/
position: absolute;
bottom: 100px;
right: 500px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
