CSS样式
css，专门用来”美化“HTML标签。
1. 快速了解
<!-- 带有style的就是样式 -->
<img src='...' style='height:100px' />
<div style='color:red'> </div>
2. CSS应用方式
2.1 在标签上直接通过style关键字使用
<img src='...' style='height:100px' />
<div style='color:red'> </div>
2.2 在head标签中写style标签
类似于对样式命名，方便重复应用，常用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<h1 class="c1">用户注册</h1>
</body>
</html>
2.3 把样式写到.css文件中
此方式适用于设计多个页面，对于初学者来说一般自定义的样式不采用此方式，相对来讲前两种方式应用更多；
.c1{
color:red;
}
.c2{
height:100Px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 导入css样式文件，href参数为css文件地址（必须放在static目录中）-->
<link rel='stylesheet' href='common.css' /></head>
<body>
<h1 class="c1">用户注册</h1>
</body>
</html>
3. CSS选择器
3.1 类选择器
<style>
/* "."表示类选择器，在后面使用的时候用class='c1'调用 */
.c1{
color: red;
}
</style>
<div class='c1'> </div>
3.2 id选择器
不常用，因为id只能有一个
<style>
/* "#"表示id选择器，在后面使用的时候用id='c1'调用 */
#c2{
color: red;
}
</style>
<div id='c2'> </div>
3.3 标签选择器
<style>
/* "li"表示标签选择器，给所有的li标签加样式，"li"也可以是其他标签"div""span".... */
/* 一般标签选择器会与前面的类选择器/id选择器配合适用，仅针对某一类标签中的一个进行“专属”的样式设置，
通常不会对整个html文件中所有某一类标签进行统一的设定 */
li{
color: pink;
}
</style>
3.4 属性选择器
在前面三个选择器的基础上对属性进行选择，下面这个例中，对属性type为’text’的标签加上红色边框。首先键入input，找到所有input标签，然后在input基础上用[]选择属性type=‘text'的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
input[type=text]{
border: 1px soild red;
}
</style>
</head>
<body>
<input type='text'>
<input type='password'>
</body>
</html>
-
在下面这个例中当中，对采用类选择器
v1，并且属性xx='123'的标签设置红色样式，即s会变成红色；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> .v1[xx=='123']{ color: red; } </style> </head> <body> <div class='v1' xx='123'>s</div> <div class='v1' xx='456'>n</div> <div class='v1' xx='789'>m</div> </body> </html>
3.5 后代选择器
先根据属性找到所有对应的标签，再在这些标签里面找标签。
-
.v1 div空格分隔，.v1下面所有子代div都设置为红色；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> .v1 a{ color: red; } </style> </head> <body> <div class='v1'> <a>c</a> <div> <a>d</a> </div> </div> </body> </html>
-
.v1 > a用>分隔，只找儿子代，不找孙子代；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> .v1 > a{ color: red; } </style> </head> <body> <div class='v1'> <a>c</a> <div> <a>d</a> </div> </div> </body> </html>
注意：在这里的后代是相对于具有属性.v1的标签来讲的，即最外层div标签，如果在具有属性.v1的div标签内未再出现div，则div内部的全为儿子代，样式对所有a标签都适用，即使有多重嵌套。
3.6 关于多个样式和覆盖问题
多个不同样式使用时，会叠加显示，但是如果出现重复，则以后一个定义的样式为准（以<style></style>中的定义顺序，不是使用顺序class="c1 c2"），如果想要后面定义的不要覆盖前面的样式，则可以在前面的样式后面加! important。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
color: red ! important;
}
.c2{
border: 1px solid red;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">用户注册</div>
</body>
</html>
4. 样式
4.1 高度宽度
.c1{
height: 300px;
width: 200px/40%;
}
- 对于宽度，支持百分比，但是高度不支持百分比;
- 行内标签：对高度、宽度的设置
默认无效； - 块级标签：对高度、宽度的设置
默认有效（虽然高度、宽度有调整，但是仍然独占一行）；
4.2 同时具备块级和行内标签特征
.c1{
display: inline-block; /* 关键设置 */
height: 100px;
width: 50%;
border: 1px solid red
}
<span class='c1'>用户注册</span>
-
块级标签和行内标签互换
/* 行内标签变为块级标签，独占一行 display: block */ <span style='display: block'>用户</span> /* 块级行内标签变为行内标签，自己多大占多大 display: inline */ <div style='display: inline'>注册</div>
4.3 字体、颜色、大小
.c1{
color: red; /* 颜色，也可用rgb */
font-size: 30px; /* 字体大小 */
font-weight: 300; /* 加粗 */
ront-family: Times New roman; /* 字体格式*/
}
4.4 位置
.c1{
height: 30px;
text-align: center; /* 水平居中 */
line-height: 30px; /* 垂直居中，与高度设置相同的像素 */
}
4.5 浮动
<span>用户</span>
<span style='float: right'>注册</span>
<!-- 注册会在一行的最右端 -->
块级标签在添加浮动样式的时候，会变为行内标签，不再占一整行。注意当div浮动样式作为子标签时，要在所有子标签的最后面加上<div style="clear: both"></div>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
float: left;
height: 100px;
width: 120px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style='background-color : gold'>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div style="clear: both"></div> <!-- 关键点 -->
</div>
<div class="c1"></div>
</body>
</html>
4.6 内边距
针对在同一个"框"内的"框"，"框"与"框"之间的距离；
.c1{
height: 200px;
wigth: 300px;
border: 1px solid red;
padding-top: 20px; /* 上边距20像素 */
padding-bottom: 20px; /* 下边距20像素 */
padding-left: 20px; /* 左边距20像素 */
padding-right: 20px; /*右边距20像素 */
padding: 20px; /* 上下左右内边距都为20px */
padding: 10px 20px 30px 40px; /* 上右下左 */
}
4.7 外边距
自己这个"框"与其他"框"的距离
.c1{
height: 200px;
wigth: 300px;
border: 1px solid red;
margin-top: 20px; /* 上边距20像素 */
margin-bottom: 20px; /* 下边距20像素 */
margin-left: 20px; /* 左边距20像素 */
margin-right: 20px; /*右边距20像素 */
margin: 20px; /* 上下左右内边距都为20px */
margin: 10px 20px 30px 40px; /* 上右下左 */
}
4.8 总结
-
body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？
<style> body{ margin: 0; } </style> -
居中-
文本居中，文本在这个区域中居中；<div style='width: 300px; text-align: center;'>用户注册</div> -
区域居中，自己要有宽度+左右外边距auti，上下外边距0；.container{ /* div要设置了宽度(not 100%)， margin: 0 auto才能显示居中效果*/ width: 980px; margin: 0 auto; } -
如果父级白浅没有设置高度，则会被子级标签撑起来；
-
如果存在浮动，要在与浮动同一级的最后加上；
<dir style='clear: both'></dir>
-
4040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
