CSS中常用样式总结
目录
1 CSS字体及文本属性
样式调试工具
样式位置:
盒子模型:
1.1 字体：（font）
/*字体的颜色*/
color: gray;
/*字体的大小*/
font-size: 12px;
/*字体的加粗*/
/*font-weight: bold;*/
/*字体的风格*/
/*font-family: 宋体;*/
/*字体倾斜*/
/*font-style: italic;*
1.2 文本（text）
/*下划线展示*/
text-decoration: underline;
/*去除下划线*/
text-decoration: none;
/*文本居中*/
text-align: center;
1.3 border 属性有三个修饰属性
border-color
border-color:red;
border-top-color:blue;
border-width
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid；
可以使用border统一设置
border: 1px solid red;
border-right: 5px dotted blue;
1.4 边框的风格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 100%;
height: 100px;
border: 1px solid red;
}
.top_a{
/*字体的颜色*/
color: gray;
/*字体的大小*/
font-size: 12px;
/*
/*字体的加粗*/
/*font-weight: bold;*/
/*字体的风格*/
/*font-family: 宋体;*/
/*字体倾斜*/
/*font-style: italic;*/
/*去除下划线*/
text-decoration: none;
}
a:hover{
color: red;
/*下划线展示*/
text-decoration: underline;
}
.tips{
width: 100%;
height: 40px;
border: 1px dotted indianred;
/*背景颜色*/
background-color: pink;
/*文本居中*/
text-align: center;
/*行高 行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/
line-height: 40px;
}
.center{
width: 100%;
height: 500px;
border: 1px solid red;
/*设置背景图片*/
background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*调整背景图片的位置 X Y*/
background-position: center;
/*调整背景图片的大小 宽 高 */
/*background-size: 300px 500px;*/
/*背景颜色 red #f0000 rgb(255,0,0) rgba(255,0,0,.5){包含透明度} */
background-color: rgba(255,0,0,.5);
}
</style>
</head>
<body>
<!--顶部的位置-->
<div class="top">
<a href="" class="top_a">登录页面，调查问卷</a>
</div>
<!--中间的提示操作-->
<div class="tips">
<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
</div>
<div class="center">
</div>
</body>
</html>
2 CSS背景
2.1 行高
2.2 背景
/*设置背景图片*/
background-image:
url("http://img30.360buyimg.com/da/jfs/t22399/154/7
65213112/96035/f94f9605/5b17512dN2de9d722.jpg");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*调整背景图片的位置
X Y*/
background-position: center;
/*调整背景图片的大小 宽 高 */
/*background-size: 300px 500px;*/
/*背景颜色 red
#f0000 rgb(255,0,0)
rgba(255,0,0,.5){包含透明度} */
background-color: rgba(255,0,0,.5);
3 CSS 行块儿元素
3.1 行元素和块元素
行内元素：（多个标签位于同一行）
span font 小标签 img a 等
块元素：（标签可以自动换行的元素是块元素）
div h1-h6 ul p等
4 其他样式
/*调整透明度的属性 0-1*/
opacity: 0.4;
/*超出隐藏 hidden*/
overflow: hidden;
/*行内元素转块级元素inline block none(隐藏)*/
display: block;
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div_1{
width: 200px;
height: 200px;
background-color: rgba(255,0,0);
color: rgba(0,0,255);
/*调整透明度的属性 0-1*/
opacity: 0.4;
/*超出隐藏 hidden*/
overflow: hidden;
}
#span_1{
width: 100px;
height: 100px;
border: 1px solid red;
/*行内元素转块级元素 inline block none(隐藏)*/
display: block;
}
ul{
float: right;
}
li{
/*列表的风格去除*/
list-style: none;
float:left;
/*内边距*/
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
</ul>
<!--<hr />
<div class="div_1">
我们都是div我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div我们都是div
</div>
<hr />
<span id="span_1">1234</span>
<hr />
-->
</body>
</html>效果：
浙公网安备 33010602011771号