首页 > 代码库 > 蓝鸥零基础学习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的常见样式