搜索
首页web前端html教程CSS之旅--第一站 为什么要用CSS_html/css_WEB-ITnose

  不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻。。。既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说

CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容基本上就是和你交谈一样,非常舒服,好了,下面从正文说起。

 

一:为啥要学习CSS

  当你知道CSS的历史还是蛮有味道的,在很久很久以前,web上没有css,只有一些html的标签,比如p,h1...h5... div span,ul 等等,这些html标记

都是一个具有特定含义的html标签,过去人很实在,不讲究排版,只要内容是干货就好了,就比如现在的博客园排版,简洁美,我们这些码农同样也不在乎这

个,只要文章是干货就好,但是呢?web用户不是程序员,他们才不讲究干货不干货,他们讲究外表,讲究炫酷,讲究如何的个性,这样的话Html就扛不住了,

W3C组织就为了满足这些人的胃口,提供了一些装饰html标记的标记,比如strong,font,b,u等等。。。就比如下面这样。

 

<body>    <font size="20" color="red"><b>你好</b></font></body>

 

然后的然后,程序员就有了下面这样的抱怨了。。。

 

第一: 老子为了decorate个text,要写无数个标签,我操。。。多麻烦。。。

第二:马丹,现在我们的页面结构开始越来越复杂,这些几把font, b压根就不能重用,根本就是完蛋的东西。。。。高个毛啊。。。

第三:现在国家这么穷,带宽这么贵,我的html体积真tmd的大,内容其实仅仅占不到html的1/10。。。我的客户有时候要几分钟才能打开。。。这样下去,

         我要失业了。。

 

结果就这样W3C招致网上程序员的骂声一片,原本的想法就是想通过一些样式的html标记来修饰html的结构内容,结果导致现在的一片混乱,而且页面结构失

衡。。。面对三大问题,W3C就开始推出了CSS,这个装修Html的层叠样式表。彻底的解决了程序员提出的三大难题。。。

 

二:如何解决三大难题

1. 无数个标签的问题

  css采用一条条规则来decorate各个html的结构元素,规则的结构采用 “标签+内容声明” 的方式,比如:

1     <style type="text/css">2         p {3             font-size: 20px;4             color: red;5             margin: auto 0;6             width: 50%;7         }8     </style>

 这种定义我想没什么好说的,这样的话,我们把html中的装饰标签全部拿出来了,放到一个专门的css规则中,这样的好处大家也看到了,”内容“和”展示”的分离,

这样的话就解决了程序员们的第一个抱怨。

 

2. 装饰标签的重用问题。

确实,原始的html装饰标签无法做到重用,这样的话自然就会导致页面膨胀,css就采用了规则组来解决这个问题,先把规则写好,然后哪个标签想用的话,自己套用

下已设定的css定义就可以了。这样的话也就解决了重用的问题。

 

3. 体积膨胀的问题

 如果第一,第二个问题没有解决好,第三个问题自然会发生,而且我想还有其他一连串的连锁反映,那么css都采取了哪些手段来解决的,为了突出css的终极目标,必须

严格的做到“内容”和“展现”的分离,要做到“分离”,那就必须将css单独的封装到一个专门的css文件,这样的话,就不光可以做到单个html页面的标签重用,甚至可以多页

面重用,多站点重用。那下一个问题就来了,引用css文件的方式有哪些???  哪些是不值得提倡的?

 

三:css文件的引用方式

1.  link引用

  当你把css拖入到vs的时候,默认就是link模式,link它本来就是xhtml的一个标签,所以我们还可以用js来动态追加和控制,这个我想大家都清楚,还有一点好玩的地方就

是可以做“候选样式表”,在浏览器中可以动态选择自己想要的样式,比如下面我定义了两个css文件,分别让页面展示 red 和 blue 的背景。

 

然后我们可以在浏览器中可以动态切换我想要的css样式,蛮有意思的,虽然这种作用相对比较少见,由于截图不好截,大家可以使用 工具栏中的 ”查看“=> "样式"。

 

2.import引用

  同样这个标记也可以导入,就像下面这样。

 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4     <title></title> 5     <style type="text/css"> 6         @import url(blue.css) 7     </style> 8 </head> 9 <body>10     hello world;11 </body>12 </html>

 

最后值得一提的是,尽量避免使用“内联样式”的style,如果这样的话,跟使用font,strong这样的标记几乎没有什么区别,就比如下面这样,所以我们尽量避免。

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <title></title> 6 </head> 7 <body style="color: red; margin: 0 auto"> 8     hello world; 9 </body>10 </html>

 

好了,第一篇大概就这么说了,后续的我们再延伸,周末愉快。

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境