温馨提示:
本文中可能包含表格,在手机屏幕上竖屏显示时,一行内可显示中文字符数量为20个左右,因部分表格单元格内容过长会导致自动换行,从而使得排版不太美观。
另外,本文中可能包含高清图片,在手机屏幕上预览时,我们需要频繁的进行放大缩小操作,这是相当麻烦的一件事情。
因此,如果条件允许,建议您坐在舒适的办公桌前,冲泡一杯咖啡或者茶,在电脑上阅读以获得更好的体验。
在HTML文档中,有三种使用样式表的方式:内联方式、内部样式块和外部样式文件。
1、内联方式 (Inline Styles)
内联定义即在标记的style属性值上直接使用CSS。
示例代码:
<!DOCTYPE html>
<html>
<head style="">
<meta charset="UTF-8">
<title>内联样式表</title>
</head>
<body style="background-color: deepskyblue;">
<p style="color:gray;
font-size: 18px;
font-family: '微软雅黑';" >
字体颜色将显示为灰色,18像素大小,字体为微软雅黑。
</p>
</body>
</html>
运行效果:
2、内部样式块对象 (Embedding a Style Block)
我们还可以在HTML文档的<head>标记里插入一个<style>块。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式块</title>
<style>
body {
background: deepskyblue;
color: green;
}
p {
font-size: 12px;
}
</style>
</head>
<body>
<!--
描述:此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则;
-->
<p style="font-size: 30px;">这段文字颜色遵循内部样式表规则,文字大小遵循内联样式表规则。</p>
<p style="font-size: 20px;">第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
运行效果:
3、外部样式表 (Linking to a Style Sheet)
我们在Web项目中可以先建立外部样式表文件style.css,然后在HTML文档中使用<link>标记将其作为样式表链接起来。
css文件style.css示例代码:
body {
background: deepskyblue;
color: green;
}
p {
font-size: 12px;
}
HTML文档示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!--
描述:此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则;
-->
<p style="font-size: 20px;">这段文字颜色遵循外部样式表规则,文字大小遵循内联样式表规则。</p>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
运行效果:
温馨提示:
多种使用方式并存时,最接近目标元素的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义,但覆盖重叠的定义。
如果您不能静下心来,不精心雕琢和打造自己的知识系统和技能体系,沉迷于点石成金亦或是拔苗助长等等的奇技淫巧之间,那都是事倍功半的瞎忙活!
古往今来,学习,没有捷径,除非出现科幻般的脑机互联......但有拙法,那就是书山有路勤为径,学海无涯苦作舟!更何况,日新月异知识爆炸的今天,态度犹豫和停止学习,那么等待您的,唯有丛林淘汰法则。
书,能读完吗?肯定不能,汗牛充栋!
书,能学完吗?绝对可以,得读经典。
好好学习,天天向上!继续下一章...