湖北网站定制开发价格表,电子网站建设前台设计,wordpress迁移需要重新安装,网页设计html实验总结插播一条CSS的工作原理#xff1a;
CSS是一种定义样式结构如字体、颜色、位置等的语言#xff0c;被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式#xff0c;样式单包含将样式应用到指定类型的元素的规则。…插播一条CSS的工作原理
CSS是一种定义样式结构如字体、颜色、位置等的语言被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式样式单包含将样式应用到指定类型的元素的规则。外部使用时样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中外部样式单保存在独立的文档中网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠cascading”表示样式单规则应用于HTML文档元素的方式。具体地说CSS样式单中的样式形成一个层次结构更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定从而实现级联效果。
CSS 的版本可以从 1996 年开始追溯当时所推行的版本为 CSS1而到了 1998 年CSS2 在原来的基础上增加了定位、z-index、media 等到了 20042011 年CSS2.1 的出现使其成为了到目前为止最为广泛的版本而从 1999 年起CSS3 成为最为现代的版本出现了分模块的操作CSS4 只是在其基础上进行分模块的升级。 目录
编辑
一.外链样式
二.文本样式 一.外链样式
CSS外链样式是网页设计中一种常用的方法能够有效地减少代码量、提高网站的性能和可维护性。
前文我们说到前端开发中要遵循“结构——样式——行为”相分离的设计思想即各模块之间应该互不干扰体现在代码中CSS所规定的样式设计均写在了头部标签style的内部。然而这只是一定程度上实现了分离——实际上结构与样式的代码仍在同一文件中~
因此CSS中还有一种叫做外链样式的技术——即将样式代码写在单独的CSS文件中这样即可实现结构与样式的完全分离~
如下创建后缀为.css的独立文件 然后再该文件中写独立的样式
.blue
{color: dodgerblue;
}
.strong
{font-weight: 900;
}
big
{font-size: 23px;
}
如下是核心代码声明外链样式
link relstylesheet href10号自己的样式.css
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.red{color: red;}.strong{font-weight: 800;}.big{font-size: 23px;}/stylelink relstylesheet href10号自己的样式.css/head
body!-- 第一个使用内部样式表 --p classred strong big第一首br黑云压城城欲摧甲光向日金鳞开。br角声满天秋色里塞上胭脂凝夜紫。br半卷红旗临易水霜重鼓寒声不起。br报群黄金台上意但携玉龙为君死。br/p!-- 第二个使用外部样式表 --p classblue第二首br醉里挑灯看剑梦回吹角连营。br八百里分麾下炙五十弦翻塞外声沙场秋点兵。br马作的卢飞快弓如霹雳弦惊。br了却君王天下事赢得生前身后名。可怜白发生br!-- 外部样式表仍不能成功使用 --/p!-- 第三个使用行内样式表 --pdiv stylecolor: aquamarine; font-size: 23px;font-weight: 800;第三首br/divdiv stylecolor: aquamarine; font-size: 23px;font-weight: 800;僵卧孤村不自哀尚思为国戍轮台。/divdiv stylecolor: aquamarine; font-size: 23px;font-weight: 800;夜阑卧听风和雨铁马冰河入梦来。/div
/p
/body
/html 如上图所示虽然.blue属性位于独立的CSS文件之中仍然可以通过类选择器的使用方式应用于标签元素。
总的来说在开发大型项目时外链样式的存在有助于提升代码复用率~
二.文本样式
接下来介绍一些有关文本的样式 font-family:字体类型font-size:字体大小font-weight:字体粗细程度text-indent首行缩进 具体的属性值什么的大家可以自行查阅接下来给大家一段样例代码参考
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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;}/* 最后一个类选择器使字体变细 *//style
/head
bodyh3 classsong 南园十三首·其五/h3 p classxingziti sixteen 【作者】李贺 【朝代】唐/pp classxingziti 男儿何不带吴钩收取关山五十州。/pp classxingziti请君暂上凌烟阁若个书生万户侯/pbrhr size20 colororange!-- 使用一个换行符分割两首古诗 --h3献钱尚父/h3p classnormal【作者】贯休 【朝代】唐/pP贵逼人来不自由龙骧凤翥势难收。/Pp classbold满堂花醉三千客一剑霜寒十四州。/pp鼓角揭天嘉气冷风涛动地海山秋。/pp东南永作金天柱谁羡当时万户侯。/phr size20px colorred h3首行缩进效果展示/h3div此处为首行缩进的效果图/div
/body
/html 此外CSS还支持为文本设置符合选择器如下 stylediv{font: italic 800 40px 宋体;color: brown;}/* 顺序为style 大小 行高 字体样式 */span{font: normal 600 30px 宋体;color:burlywood;}/style 需要注意的是上述的font属性中各种子属性的顺序一定不能颠倒 接下来展示一段字体属性的综合案例——新闻排版~
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title奥运会乒乓球战报/titlestyle.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;}/style
/headbodyh2 classred center乒乓球男团中国3比0完胜韩国 率先闯进决赛/h2hr size2 colorblackdiv classcenterspan2021年08月04日 15:47 /spana hrefhttps://www.chinanews.com/中国新闻网/a/divhr size1 colorblackh4原标题乒乓球男团中国3比0完胜韩国 率先闯进决赛/h4p新网8月4日电 北京时间8月4日在东京奥运会乒乓球男团半决赛中由马龙、许昕、樊振东组成的中国队3比0战胜韩国队率先进入决赛。决赛中中国队的对手将是德国队和日本队之间的胜者。/pp率先进行的男双对决中马龙搭档许昕出战很快以11:5、11:5、11:8拿下韩国组合李尚洙/郑荣植先下一城。/pdiv classcenterimg src/乒乓球比赛.jpg width450 /div!-- text-align属性同样适用于图片 --p classsuo之后进行的首场男单比赛中樊振东对阵韩国选手张禹珍。第一局樊振东11:7轻松拿下。第二局樊振东一度2:7落后但樊振东稳扎稳打很快追至8平。樊振东反拉出界后8:9落后。随后他连得3分11:9再下一局。第三局樊振东又是开局落后不过很快从3:6追至6平。10平、11平、12平、13平、14平比赛进入相持阶段最终樊振东16:14赢下第三局中国队再下一城。/pp classsuo第二场男单比赛马龙对阵韩国选手李尚洙。首局马龙有些慢热一度3:7落后随着远台拧拉得分马龙追至7平。11:9马龙后来居上拿下第一局。11:8马龙随后拿下第二局。第三局马龙9:11被对手扳回一局。第四局双方打得胶着9平、10平、11平、12平13平最终马龙13:15再丢一局。第五局马龙没有再手软11:6拿下。/pp这样中国队就以总比分3:0战胜韩国队率先闯进决赛。/pp关键字 : 乒乓球马龙韩国中国樊振东/p
/body/html
