插播一条CSS的工作原理:
CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。
CSS 的版本可以从 1996 年开始追溯,当时所推行的版本为 CSS1;而到了 1998 年,CSS2 在原来的基础上增加了定位、z-index、media 等;到了 2004~2011 年,CSS2.1 的出现,使其成为了到目前为止最为广泛的版本
;而从 1999 年起,CSS3 成为最为现代的版本,出现了分模块的操作,CSS4 只是在其基础上进行分模块的升级。
目录
CSS外链样式是网页设计中一种常用的方法,能够有效地减少代码量、提高网站的性能和可维护性。
前文我们说到前端开发中要遵循“结构——样式——行为”相分离的设计思想,即各模块之间应该互不干扰,体现在代码中,CSS所规定的样式设计均写在了头部标签style的内部。然而这只是一定程度上实现了分离——实际上结构与样式的代码仍在同一文件中~
因此CSS中还有一种叫做外链样式的技术——即将样式代码写在单独的CSS文件中,这样即可实现结构与样式的完全分离~
如下,创建后缀为.css的独立文件
然后再该文件中写独立的样式 :
- .blue
- {
- color: dodgerblue;
- }
- .strong
- {
- font-weight: 900;
- }
- big
- {
- font-size: 23px;
- }
如下是核心代码:声明外链样式
10号自己的样式.css">
整体代码如下:
- 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>Documenttitle>
- <style>
- .red
- {
- color: red;
- }
- .strong
- {
- font-weight: 800;
- }
- .big
- {
- font-size: 23px;
- }
- style>
- <link rel="stylesheet" href="10号自己的样式.css">
-
- head>
- <body>
-
- <p class="red strong big">
- 第一首<br>
- 黑云压城城欲摧,甲光向日金鳞开。<br>
- 角声满天秋色里,塞上胭脂凝夜紫。<br>
- 半卷红旗临易水,霜重鼓寒声不起。<br>
- 报群黄金台上意,但携玉龙为君死。<br>
- p>
-
-
- <p class="blue">
- 第二首<br>
- 醉里挑灯看剑,梦回吹角连营。<br>
- 八百里分麾下炙,五十弦翻塞外声,沙场秋点兵。<br>
- 马作的卢飞快,弓如霹雳弦惊。<br>
- 了却君王天下事,赢得生前身后名。可怜白发生!<br>
-
- p>
-
-
- <p>
- <div style="color: aquamarine; font-size: 23px;font-weight: 800;">第三首<br>div>
- <div style="color: aquamarine; font-size: 23px;font-weight: 800;">僵卧孤村不自哀,尚思为国戍轮台。div>
- <div style="color: aquamarine; font-size: 23px;font-weight: 800;">夜阑卧听风和雨,铁马冰河入梦来。div>
- p>
- body>
- html>
如上图所示,虽然.blue属性位于独立的CSS文件之中,仍然可以通过类选择器的使用方式应用于标签元素。
总的来说,在开发大型项目时,外链样式的存在有助于提升代码复用率~
接下来介绍一些有关文本的样式:
- font-family:字体类型
- font-size:字体大小
- font-weight:字体粗细程度
- text-indent:首行缩进
具体的属性值什么的大家可以自行查阅,接下来给大家一段样例代码参考:
- html>
- <html lang="en">
- 8">
- content="IE=edge">
- content="width=device-width, initial-scale=1.0">
-
Document -
- .xinziti
- {
- font-family: 'Times New Roman', Times, serif;
- }
- /* 类标签的字体属性用了三种样式,若无法识别自动跳转下一个 */
- .song
- {
- font-family:宋体;
- }
- .sixteen
- {
- font-size: 20px;
- }
- .bold
- {
- font-weight:700;
- }
- .normal
- {
- font-weight: lighter;
- }
- div
- {
- text-indent: 2em;
- }
- /* 最后一个类选择器使字体变细 */
-
- <body>
- <h3 class="song"> 南园十三首·其五h3>
- <p class="xingziti sixteen"> 【作者】李贺 【朝代】唐p>
- <p class="xingziti"> 男儿何不带吴钩,收取关山五十州。p>
- <p class="xingziti">请君暂上凌烟阁,若个书生万户侯?p>
-
-
20" color="orange"> -
- <h3>献钱尚父h3>
- <p class="normal">【作者】贯休 【朝代】唐p>
- <P>贵逼人来不自由,龙骧凤翥势难收。P>
- <p class="bold">满堂花醉三千客,一剑霜寒十四州。p>
- <p>鼓角揭天嘉气冷,风涛动地海山秋。p>
- <p>东南永作金天柱,谁羡当时万户侯。p>
-
20px" color="red"> - <h3>首行缩进效果展示h3>
- <div>此处为首行缩进的效果图div>
- body>
- html>
此外,CSS还支持为文本设置符合选择器,如下:
-
- div
- {
- font: italic 800 40px 宋体;
- color: brown;
- }
- /* 顺序为style 大小 行高 字体样式 */
- span
- {
- font: normal 600 30px 宋体;
- color:burlywood;
- }
-
需要注意的是,上述的font属性中,各种子属性的顺序一定不能颠倒!
接下来展示一段字体属性的综合案例——新闻排版~:
- html>
- <html lang="en">
-
- 8">
- content="IE=edge">
- content="width=device-width, initial-scale=1.0">
-
奥运会乒乓球战报 -
- .red {
- color: red;
- }
- .xie {
- font-style: italic;
- }
- .big {
- font-size: 20px;
- }
- .center {
- text-align: center;
- }
- span {
- color: rgba(67, 71, 71, 0.89);
- }
- a {
- text-decoration: none;
- }
- body {
- line-height: 25px;
- }
- .suo {
- text-indent: 3em;
- }
-
-
- <body>
- <h2 class="red center">乒乓球男团中国3比0完胜韩国 率先闯进决赛h2>
-
2" color="black">
新网8月4日电 北京时间8月4日,在东京奥运会乒乓球男团半决赛中,由马龙、许昕、樊振东组成的中国队3比0战胜韩国队,率先进入决赛。决赛中,中国队的对手将是德国队和日本队之间的胜者。
率先进行的男双对决中,马龙搭档许昕出战,很快以11:5、11:5、11:8拿下韩国组合李尚洙/郑荣植,先下一城。
"suo">
"suo">
这样,中国队就以总比分3:0战胜韩国队,率先闯进决赛。
关键字 : 乒乓球马龙韩国中国樊振东