怎么做到css和html分开,CSS结构与表现分离怎么实现？

使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望网页美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。

CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。如图1所示的代码片段，就是将CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。

图1 HTML和CSS代码片段

如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。HTML与CSS的关系就像人的身体与衣服，通过更改CSS样式，可以轻松控制网页的表现样式。

怎么做到css和html分开,CSS结构与表现分离怎么实现？相关推荐

html5结构与表现分离原则,网页简单布局之结构与表现原则分享
一般来说html结构 css表现 javascrip行为,网页布局要考虑到结构,表现,行为分离原则,首先重点放在结构和语义化上面,再考虑CSS,JS等,便于后期维护和分析. 结构与表现相关内容简介 h ...
结构与表现分离的思想
网页制作中,结构,表现,行为分离. 微博用户发言信息列表制作高级思路: <!DOCTYPE html> <html lang="en"> <head ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
html页面的盒子边框怎么做的,HTML+CSS入门用三层盒子结构实现多边框详解
本篇教程介绍了HTML+CSS入门用三层盒子结构实现多边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 如果想给每个盒子加上美观的border,实现如下效果如果 ...
【练习】DIY青志协网站（html+css+js未分开）
南大科院青志协主页面毕业季页面部门介绍剩余页面省略效果图结语主页面 <!DOCTYPE html><html><head><meta chars ...
html中css的逗号用法,css样式多个类、标签用【逗号空格冒号点】分开的解析...
ReactNative学习之css样式使用前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascadi ...
比较有名的CSS,优雅地写css
重置你的CSS样式使用CSS常量进行更快速的开发. /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mi ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
CSS是什么？CSS样式规则
CSS是层叠样式表( Cascading Style Sheets ) 的简称,有时我们也会称之为CSS 样式表或级联样式表. CSS 是也是一种标记语言,最早CSS的出现,是为了补充HTML在页面布 ...
CSS基础知识(一) CSS入门
文章目录一.CSS使用场景二.CSS简介三.CSS规则四.CSS代码风格 1.样式格式书写 2.样式大小写 3.空格规范一.CSS使用场景美化网页,布局页面二.CSS简介 CSS是层叠样 ...

怎么做到css和html分开,CSS结构与表现分离怎么实现？

怎么做到css和html分开,CSS结构与表现分离怎么实现？相关推荐

最新文章

热门文章