CSS样式
1.1字体属性


例题:
body {
font-size: 20px;
}
/* 标题标签的大小比较特殊,需要另外单独指定大小 */
h3 {
font-size: 20px;
}
目击众神死亡的草原上野花一片
远在远方的风比远方更远
我的琴声呜咽 泪水全无
我把这远方的远归还草原
一个叫木头 一个叫马尾
我的琴声呜咽 泪水全无
远方只有在死亡中凝聚野花一片
明月如镜高悬草原映照千年岁月
我的琴声呜咽 泪水全无
只身打马过草原
运行结果:



例题:
p {
/* 让字体倾斜 */
font-style: italic;
}
em {
/* 让倾斜的字体,脉动回来 */
font-style: normal;
}
同学们,上课了!
同学们,下课时间到了!
运行结果:


例题:
/* 想要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';
}
运行结果:



例题:
div {
color: #ea00ff;
}
运行结果:


例题:
h2 {
text-align: center;
}
h3 {
text-align: right;
}
运行结果:


例题:
/* 下划线 */
.xhx {
text-decoration: underline;
}
/* 上划线 */
.shx {
text-decoration: overline;
}
/* 删除线 */
.scx {
text-decoration: line-through;
}
/* 删除取消超链接的下划线 */
a {
text-decoration: none;
}
过河拆桥
暗度陈仓
顺手牵羊
运行结果:


例题:
p {
/* 每一段第一行缩进20像素 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是当前元素 2个文字大小的距离 */
text-indent: 2em;
}
打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络, 这代表了中国最成熟的三套城市轨道交通系统。
可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤--对很多人而言,
每次挤地铁的过程, 都像是一场硬仗。更何况,还都是败仗居多。
那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?
运行结果:


例题:
p {
text-indent: 2em;
/* 设置行高为30像素 */
line-height: 30px;
}
打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络, 这代表了中国最成熟的三套城市轨道交通系统。
可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤--对很多人而言,
每次挤地铁的过程, 都像是一场硬仗。更何况,还都是败仗居多。
那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?
运行结果:






