CSS样式
1.1字体属性
例题:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 20px;
}
/* 标题标签的大小比较特殊,需要另外单独指定大小 */
h3 {
font-size: 20px;
}
</style>
</head>
<body>
<h3>海子《九月》</h3>
<p>目击众神死亡的草原上野花一片</p>
<p>远在远方的风比远方更远</p>
<p>我的琴声呜咽 泪水全无</p>
<p>我把这远方的远归还草原</p>
<p>一个叫木头 一个叫马尾</p>
<p>我的琴声呜咽 泪水全无</p>
<p>远方只有在死亡中凝聚野花一片</p>
<p>明月如镜高悬草原映照千年岁月</p>
<p>我的琴声呜咽 泪水全无</p>
<p>只身打马过草原</p>
</body>
运行结果:
例题:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 让字体倾斜 */
font-style: italic;
}
em {
/* 让倾斜的字体,脉动回来 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学们,上课了!</p>
<em>同学们,下课时间到了!</em>
</body>
运行结果:
例题:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且是 微软雅黑 */
div {
/* 正常写的方式 */
/* font-style: italic;
font-weight: bold;
font-size: 16px;
font-family: 'Microsoft YaHei'; */
/* 复合属性:简写的方式 节约代码 */
/* 字体: 字体样式 字体加粗 字体大小/行高 字体 (属性值之间用空格隔开)*/
/* font: font-style font-weight font-size/line-height font-family; */
font: italic bold 16px/20px 'Microsoft YaHei';
}
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意学前端,仔仔细细码代码!</div>
</body>
运行结果:
例题:
<style>
div {
color: #ea00ff;
}
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意学前端,仔仔细细码代码!</div>
</body>
运行结果:
例题:
<style>
h2 {
text-align: center;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h2>标题二 居中对齐</h2>
<h3>标题三 靠右对齐</h3>
<h4>标题四 默认靠左对齐</h4>
</body>
运行结果:
例题:
<style>
/* 下划线 */
.xhx {
text-decoration: underline;
}
/* 上划线 */
.shx {
text-decoration: overline;
}
/* 删除线 */
.scx {
text-decoration: line-through;
}
/* 删除取消超链接的下划线 */
a {
text-decoration: none;
}
</style>
</head>
<body>
<p class="xhx">过河拆桥</p>
<p class="shx">暗度陈仓</p>
<p class="scx">顺手牵羊</p>
<a href="#">福如东海</a>
</body>
运行结果:
例题:
<style>
p {
/* 每一段第一行缩进20像素 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是当前元素 2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络, 这代表了中国最成熟的三套城市轨道交通系统。
</p>
<p>可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤--对很多人而言,<br> 每次挤地铁的过程, 都像是一场硬仗。更何况,还都是败仗居多。
</p>
<p>那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
运行结果:
例题:
<style>
p {
text-indent: 2em;
/* 设置行高为30像素 */
line-height: 30px;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络, 这代表了中国最成熟的三套城市轨道交通系统。
</p>
<p>可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤--对很多人而言,<br> 每次挤地铁的过程, 都像是一场硬仗。更何况,还都是败仗居多。
</p>
<p>那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
运行结果: