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>
-