CSS 样式
最新推荐文章于 2024-09-14 17:04:32 发布
阅读量186
收藏
点赞数
1
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>
运行结果：
扫一扫
2万+
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: 多亏了你这篇博客, 解决了问题: https://ask.csdn.net/questions/8010290, 请多输出高质量博客, 帮助更多的人
外太空程序员: 因为怕有小数，小数一般用字符型float，整型一般才用int
dwcgzshtx: 大大，那个float shuzi＝0为什么要用float，不能用int，求解惑啊
小龙藏在云里: （5）推论没有看懂呀
海量681: 可以教一下自定义背景的颜色吗？我试了N次，都是会被覆盖