目录
九、CSS 常用样式
9.1 字体样式
-
font-size 字号、大小
-
font-family 字体，多写几个备用
-
font-style 字型
-
font-weight 粗细
例子：
<style>
html {
/* 字号 :
默认大小为16, 推荐14, 最小给12
单位:推荐使用px(绝对)
相对单位: em: 相对当前元素的font-size的倍数
rem: 相对于html根元素的倍数
*/
font-size: 14px;
}
body {
font-size: 2rem;
}
div {
/* 字体 */
font-family: 'Microsoft Yahei', Courier, monospace;
font-size: 2rem;
/* 粗细: font-weight: bold bolder 100-900 500或600*/
font-weight: 200;
}
p {
font-size: 2rem;
font-style: italic;
}
</style>
</head>
<body>
<h1>字体相关样式</h1>
<ol>
<li>字体</li>
<li>字号</li>
<li>字型</li>
<li>粗细</li>
</ol>
<div>
div的区别
<p>字体样式</p>
</div>
</body>
</html>
9.2 文本样式
-
color 文本颜色
-
text-align 水平对齐
-
line-height 行高
-
height: 40px; line-height: 40px;保持一致可到达数值剧中的效果
-
-
text-decoration 文本修饰
-
text-intent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { /* RGB : red green blue : 0-255-> 00 - FF */ /* color: #963; */ color: rgb(255, 0, 0); /* 文本水平对齐方式 left center right*/ /* text-align: right; */ color: #fff; background-color: #936; /* 文本垂直对象 : line-height = height */ height: 72px; line-height: 72px; /* text-decoration: underline; */ text-decoration: line-through; } p { text-indent: 32px; } a { /* 文本修饰 : 下划下 中划线 上划线 underline line-through none */ text-decoration: none; } /* 默认 */ a { color: red; } /* 访问后 */ a:visited { color: yellow; } /* 悬停 */ a:hover { color: blue; font-size: 48px; } /* 点击没有放开鼠标 */ a:active { color: green; } </style> </head> <body> <h1>文本样式</h1> <ol> <li>颜色</li> <li>水平对齐方式</li> <li>行高</li> <li>文本修饰</li> <li>缩进</li> </ol> <div>文本样式</div> <a href="#">链接</a> <p> 文本样式文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰文本修饰 </p> </body> </html>段落首行缩进
9.3 边框样式
-
border-style 虚线，实现
-
border-width 边框宽
-
border-color
-
border 可合并 border: 2px solid #f00;
-
border-radius : 角度圆滑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box-a {
/* 写法-1 */
/* border-color: #f00;
border-style: solid;
border-width: 10px; */
/* 写法-2 */
border: 2px solid #f00;
height: 40px;
line-height: 40px;
/* border-left: 2px solid #f00;
border-top: 4px dashed #0f0;
border-right: 6px solid #00f; */
border-radius: 20px;
}
.box-b {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
}
.box-c {
width: 120px;
height: 40px;
background-color: #f00;
border-top-left-radius: 20px; /*指定上边框左边*/
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<h1>边框样式</h1>
<div class="box-a">边框样式</div>
<hr />
<div class="box-b"></div>
<hr />
<div class="box-c"></div>
</body>
</html>
9.4 背景样式
-
background-color
-
/* background-color: #936; */
/* background-color: rgb(255, 0, 0); */
/* 透明度取值: 0-1 , 1代表不透明, 0完全透明 */
background-color: rgba(0, 0, 0, 0);
-
-
background-image 背景图片
-
background-repeat 图片是否平铺，一般设为none
-
background-size :图片大小
-
background-position 图片位置
-
/* background-position: right bottom; */
/* background-position: center center; */
background-position: 20px center;
-
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box-a {
color: #fff;
/* background-color: #936; */
/* background-color: rgb(255, 0, 0); */
/* 透明度取值: 0-1 , 1代表不透明, 0完全透明 */
background-color: rgba(0, 0, 0, 0);
}
.layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
display: none;
}
.box-b {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-image: url(images/weixin.png);
background-repeat: no-repeat;
/* background-position: right bottom; */
/* background-position: center center; */
background-position: 20px center;
}
.layer div {
width: 100px;
height: 60px;
line-height: 60px;
margin: 50px auto;
background-color: #fff;
}
</style>
</head>
<body>
<h1>背景样式</h1>
<ol>
<li>背景颜色</li>
<li>背景图片</li>
</ol>
<div class="box-a">背景颜色</div>
<div class="box-b"></div>
<hr />
<div class="layer">
<div>请登录</div>
</div>
</body>
</html>
补充：精灵图，将网页需要申请的图片和在一起，这样只需申请一次，调整显示位置即可
background-position: 0 -280px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box-error {
width: 64px;
height: 64px;
background-image: url(images/error.png);
}
.box-info {
width: 64px;
height: 64px;
background-image: url(images/info.png);
}
.box-success {
width: 64px;
height: 64px;
background-image: url(images/success.png);
}
.box-wx {
width: 48px;
height: 48px;
border: 1px solid #ccc;
background-image: url(images/icon_02.png);
background-repeat: no-repeat;
background-position: 0 -280px;
}
</style>
</head>
<body>
<img src="images/error.png" alt="" />
<img src="images/info.png" alt="" />
<img src="images/success.png" alt="" />
<hr />
<div class="box-error"></div>
<div class="box-info"></div>
<div class="box-success"></div>
<div class="box-wx"></div>
</body>
</html>
9.5 尺寸样式
-
width
-
height
-
padding
-
内填充， 影响到容器大小尺寸
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #936;
color: #fff;
/* padding-left: 10px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px; */
/* padding: 20px 30px 40px 10px; */
/* padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px; */
/* padding: 20px 10px 20px 10px; */
/* padding: 20px 10px; */
padding: 10px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="box">元素尺寸</div>
</body>
</html>
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
