css内嵌样式案例分析

显示全部楼层 · 2019-8-21 20:17

css内嵌样式案例分析先来看下案例效果图：

css内嵌样式案例分析

案例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
text-align: left; /* 文本左对齐 */
font-size: 18px; /* 字体大小18像素 */
line-height: 25px; /* 行高25像素 */
text-indent: 2em; /* 首行缩进2个文字大小空间 */
width: 500px; /* 段落宽度500像素 */
margin: 0 auto; /* 浏览器下居中 */
margin-bottom: 20px; /* 段落下边距20像素 */
}
</style>
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。(百度公司会议室名为青玉案，即是这首词的词牌)。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如SOHU的狐，如GOOGLE的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。 </p>
<p>在百度那次更换LOGO的计划中，百度给出的3个新LOGO设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
<p>此次更换LOGO的行动共进行了3轮投票，直到第2轮投票结束，新的笑脸LOGO都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把3个新LOGO方案彻底否决。</p>
</body>
</html>

复制代码

admin · 2019-8-21 20:22

下面我们再来看一个案例教程：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" title="字体14号">
p {
text-align: left; /* 文本左对齐 */
font-size: 14px; /* 字体大小14像素 */
line-height: 25px; /* 行高25像素 */
text-indent: 2em; /* 首行缩进2个文字大小空间 */
width: 500px; /* 段落宽度500像素 */
margin: 0 auto; /* 浏览器下居中 */
}
</style>
<style type="text/css" title="字体18号">
p {
text-align: left; /* 文本左对齐 */
font-size: 18px; /* 字体大小18像素 */
line-height: 25px; /* 行高25像素 */
text-indent: 2em; /* 首行缩进2个文字大小空间 */
width: 500px; /* 段落宽度500像素 */
margin: 0 auto; /* 浏览器下居中 */
}
p { color: #6699FF; /* 字体颜色的改变 */ }
</style>
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。(百度公司会议室名为青玉案，即是这首词的词牌)。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

复制代码

css样式效果图：

浏览器=查看=页面风格，可以选择样式展示。
默认显示的是第一次写的样式。