首页 > 代码库 > 蓝鸥零基础学习HTML5第六讲 CSS的常见样式
蓝鸥零基础学习HTML5第六讲 CSS的常见样式
蓝鸥零基础学习HTML5第六讲 CSS的常见样式
CSS的常见样式
1.css文本样式的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:160px;
font-family: "sans-Serif";
color:rgb(41,232,32);
}
</style>
</head>
<body>
<div>蓝鸥科技 lanou</div>
</body>
</html>
2.line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border:1px solid red;
height:100px;
line-height: 100px;
}
</style>
</head>
<body>
<div>我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面</div>
</body>
</html>
3.text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:200px;
line-height: 200px;
border:1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>蓝鸥科技</div>
</body>
</html>
4.text-indent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid red;
font-size:20px;
line-height: 25px;
text-indent: 40px;
}
</style>
</head>
<body>
<div>近日，一则深圳汽车起火爆炸的新闻引起网友的关注。经初步调查，起火汽车的车主一家三口刚从万科红开车回家，停在路边不到三分钟就起火，车头烧毁严重，没有人员伤亡，起火原因正在进一步调查当中。事情是怎么一回事呢？7月17日凌晨，深圳龙岗区布吉湖西路的一辆汽车，在刚停好不到三分钟就突然起火，幸好车主一家三口已离开，否则后果不堪设想。</div>
</body>
</html>
5.font-weight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div>蓝鸥科技</div>
</body>
</html>
6.font-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
/*font-style:oblique;*/
}
em {
font-size:50px;
font-style: normal;
}
</style>
</head>
<body>
<div>蓝鸥科技</div>
<em>蓝鸥科技</em>
</body>
</html>
7.text-decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>100元RMB</div>
<a href="http://www.mamicode.com/###">蓝鸥科技</a>
</body>
</html>
8.letter-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
letter-spacing: 10px;
word-spacing: 100px;
}
</style>
</head>
<body>
<div>蓝鸥科技 蓝鸥科技 i love you</div>
</body>
</html>
9.复合样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:500px;
height:500px;
background: red url("img/1.jpg") 100px 100px no-repeat;
border: 10px solid yellow;
padding:10px 20px 30px 40px ;
margin:20px 40px 80px 160px ;
font: italic bold 50px/500px "stkaiti";
}
</style>
</head>
<body>
<div>蓝鸥科技</div>
</body>
</html>
10.样式继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
color:red;
font-size:50px;
text-decoration: underline;
border:1px solid red;
padding:100px;
}
a {
color:red;
}
</style>
</head>
<body>
<div id="box1">
蓝鸥科技
<div id="box2">
就是牛逼
</div>
<a href="http://www.mamicode.com/###">我是A标签</a>
</div>
</body>
</html>
11、Font-family资料
font-family可以取的值
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
宋体：SimSuncss中中文字体（font-family）的英文名称
Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
蓝鸥零基础学习HTML5第六讲 CSS的常见样式