CSS样式
1、高度和宽度
<style>
.c1{
height: 300px;
}
.c2{
width: 10px;
}
</style>
- 宽度支持百分比，高度不支持百分比
- 高度和宽度对行内标签（span）默认无效
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>
<div style="display: inline">nihaoya</div>
<span class ="c1">你好</span>
<span style="display: block">你好</span>
</body>
</html>
- 块级、块级&行内使用比较多
3、字体和颜色
- rgb颜色表
<style>
.c1{
color:rebeccapurple;
/*字体大小*/
font-size: 58px;
/*加粗*/
font-weight: 100;
/*字体*/
font-family:"fangsong";
}
</style>
4、文字对齐方式
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
/*水平方向居中*/
text-align: center;
/*垂直方向剧中*/
line-height: 59px;
}
</style>
5、浮动
<span>左边</span>
<!-- 飘到右边 -->
<span style="float: right">右边</span>
- div默认为块级标签，浮动起来会没那么霸道
- 标签浮动起来，会脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
float:left;
width: 100px;
height: 100px;
border:1px solid red;
}
</style>
</head>
<body>
<!--设置背景颜色-->
<div style="background-color: cornflowerblue">
<div class = "c1">你好</div>
<!-- 不让块级标签覆盖背景颜色 -->
<div style="clear: both;"></div>
</div>
</body>
</html>
效果展示：
6、内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 100px;
height: 100px;
border:1px solid red;
/*内边距：div内部空出来多少*/
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding: 20px;#上下左右都是20
padding: 20px 10px 5px 20px;#按照上右下左顺序
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: cornflowerblue">你好啊</div>
<div>小朋友</div>
</div>
</body>
</html>
效果展示：
7、外边距
<body>
<div style="height: 200px;background-color: cornflowerblue"></div>
<div style="background-color: rebeccapurple;height: 100px;margin-top: 10px"></div>
</body>
8、注意
- body默认有边距
/*去掉body所在样式*/
body{
margin: 0;
}
- 文本居中，文本会在对应区域居中
<div style="width: 200px;text-align: center">文本居中</div>
- 区域居中
- 自己要有宽度
- margin-left:auto;margin-right:auto;
/*将部件放到容器中，实现居中,写在header中*/
.container{
width: 1000px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
- 父亲没有高度或者宽度，会被孩子支撑起来
- 页面中存在float浮动，一定记得加入,要为兄弟关系：
<div style="clear: both"></div>
- 学会参考目前成熟的样式
- 划分出来大概样式之后，再用css去写
