html css 实战例子（测试开发全栈-HTML）
上午已经说完了CSS文本样式，接着说下CSS的引入方式，包含内部样式表(嵌入式)，行内样式表(行内式)和外部样式表(链接式)。
内部样式表(内嵌样式表)是写道HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
以前的语法展示:
<style>
div {
color:pink;
font-size:12px;
}
</style>
将所有的样式，都放到<style>标签中
展示如下:
对应的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS引入方式-内部样式表</title>
<!-- 将所有的样式都放在一个<style>标签中 -->
<style>
div {
/* 文本颜色属性 */
color: blue;
/* 文本行间距 */
line-height: 32px;
/* 让文本在中间展示 */
text-align: center;
}
p {
/* 段落首行收缩2个字 */
text-indent: 2em;
}
a {
/* 文本不展示下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div>战无不胜，攻无不克，横刀立马，千秋万代</div>
<p>10月15日晚，甘肃省天水市妇女联合会官方微博发布通报称，经过多方劝解，孩子父亲毛某已于10月14日将孩子送到母亲范某身边。目前孩子健康状况良好，范某情绪稳定，毛某也认识到因自己一时冲动造成的严重后果，并保证不再有过激行为。</p>
<div>一片祥云，我自横刀向天笑</div>
<!-- 下划线展示 -->
文本不展示下划线<br/>
<a href="www.baidu.com">跳转到百度页面</a>
</body>
</html>
<style>标签理论上可以放到HTML文档的任何地方，但一般会放在文档的<head>标签中。通过此种方式，可以方便控制当前整个页面中的元素样式设置。代码结构非常清晰，但是并没有实现结构与样式完全分离。使用内部样式设定CSS,通常也被成为嵌入式引入，这种方式是我们练习时的常用方式。
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
