css,专门用来“美化”标签。
基础CSS,写简单页面 & 看懂 & 改。
模块,调整和修改。
1、CSS应用方式
1.1. 在标签上
<img src="..." style="height:100px" />
<div style="color:red;">中国联通</div>
1.2. 在head标签中写style标签(*)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>
1.3.写到文件中(*)
link引用别人写好的第三方.css
.c1{
height:100px;
}
.c2{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>
2、选择器
ID选择器
#c1{
}
<div id='c1'></div>
类选择器(最多)
.c1{
}
<div clss='c1'></div>
标签选择器
div{
}
<div>xxx</div>
属性选择器
input[type='text']{
border: 1px solid red;
}
.v1[xx="456"]{
color: gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>
后代选择器
.yy li{
color: pink;
}
.yy > a{
color: dodgerblue;
}
<div class="yy">
<a>百度</a>
<div>
<a>谷歌</a>
</div>
<ul>
<li>美国</li>
<li>日本</li>
<li>韩国</li>
</ul>
</div>
关于选择器:
多:类选择器、标签选择器、后代选择器
少:属性选择器、ID选择器
关于多个样式 & 覆盖的问题:
同类样式定义在下面的样式会把上面的样式覆盖掉
3、样式
3.1. 高度和宽度
.c1{
height: 300px;
width: 500px;
}
注意事项:
宽度,支持百分比。
行内标签:默认无效
块级标签:默认有效(霸道,右侧区域空白,也不给你占用)
3.2. 块级和行内标签
块级
行内
css样式:标签 -> **display:inline-block**
示例:行内&块级特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">中国</span>
<span class="c1">联通</span>
<span class="c1">联通</span>
<span class="c1">联通</span>
</body>
</html>
示例:块级和行内标签的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div style="display: inline;">中国</div>
<span style="display: block;">联通</span>
</body>
</html>
注意:块级 + 块级&行内。
3.3.字体设置
颜色:rgb颜色
大小
加粗
字体格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: #00FF7F;
font-size: 58px;
font-weight: 600;
font-family: Microsoft Yahei;
}
</style>
</head>
<body>
<div class="c1">中国联通</div>
<div>中国移动</div>
</body>
</html>
3.4.文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中 ,高度多少填多少数据*/
}
</style>
</head>
<body>
<div class="c1">郭智</div>
</body>
</html>
3.5.浮动
float:right。 显示到右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
</body>
</html>
div默认块级标签(霸道),如果浮动起来,就不一样了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
如果你让标签浮动起来之后,就会脱离文档流。
‼️style="clear: both“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: dodgerblue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>
</div>
<div>你哦啊呀</div>
</body>
</html>
3.6.内边距
内边距,我自己的内部设置一点距离。
podding:内部空开多少距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
小朋友你是否下水道发
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
小朋友你是否下水道发
</div>
</div>
</body>
</html>
padding: 20px 10px 5px 20px;(上、右、下、左)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 20px 10px 5px 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
小朋友你是否下水道发
</div>
</div>
</body>
</html>
3.7.外边距
外边距,离外部的距离。我与别人加点距离。
margin-top等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>