WEB标准布局（DIV+CSS）学习笔记（一）--基础知识

时间 2019-11-13

标签 web 标准布局 div+css div css 学习笔记基础知识栏目 HTML 繁體版

原文原文链接

首先，CSS样式有4种使用方式：css

一、外部样式html

二、内部样式程序员

三、行内样式浏览器

四、导入样式工具

外部样式：把CSS样式写入到一个单独的文件中，每一个HTML页面连接该文件，是使用最为普遍的方式，很好的体现了表达（CSS）与结构（HTML）的分离思想。布局

<!-- 在head标签内增长以下代码，表明连接外部样式 -->
<head>
  <link href="css/mystyle.css" rel="stylesheet" type="text/css" />
</head>

内部样式：只在本HTML页面内有效，不能做用于其余页面。在本页面内，也可以实现表达（CSS）与结构（HTML）的分离。网站

<!-- 在head标签内增长以下代码，表明建立内部样式 -->
<head>
  <style type="text/css">
    h1 {color:#000000;}
  </style>
</head>

行内样式：在某个html标签内，经过定义样式，使该标签的表达发生改变。这种方式并很差，由于表达（CSS）与结构（HTML）牢牢地耦合在一块儿。但因为使用DW等网页可视化编辑工具，能够很是方便的“所见即所得”，这种方式也被不少人所使用，但要知道，这是不对的，尽量避免。
url

<!-- 在p标签内部，直接定义样式 -->
<p style="font-size:18px;">内部样式</p>

导入样式：为了样式的重用，减小代码冗余，容许在某个css样式文件中，导入另一个css样式文件。好比global_style.css定义了全局最基础的样式，而index_style.css定义了网站首页的样式，而index_style.css中为了使用global_style.css中的样式，能够在index_style.css中这样写spa

<!-- 导入globa_style.css中的样式 -->
@import url("/css/global_style.css");

其次，说说CSS的优先级：
设计

一、id的优先级高于class

二、后面定义的的样式覆盖前面的

三、明确指定的样式高于继承的样式

四、行内样式高于内部或外部样式

虽然有这样的规定，但在实际使用中，尽量提早把样式明明白白的规划好，尽量不去重名，对于代码的理解也有好处，不要没事考验浏览器和程序员的智商。

而后，很是很是重要的CSS的盒子模型：

这是WEB标准（CSS+DIV）布局的基础，也是核心概念。原来的网页布局更多靠大小不一的table相互组合嵌套，但这样存在一些问题，好比布局代码很是复杂，样式和结构不独立，很难维护；不一样浏览器对这种布局的解释，在兼容性也可能存在一些问题。采用WEB标准布局后，网页由大小不一的DIV相互组合嵌套，每一个DIV都很独立，样式和结构可以很好的独立开，兼容性也有保障。

先看下面的图，摘抄一段很是好的比喻（原文出自“标准之路”的《十天学会DIV+CSS》，很是感谢）：咱们能够把它想像成现实中上方开口的盒子，而后从正上往下俯视，边框至关于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，至关于为防震而在盒子内填充的泡沫，边界呢至关于在这个盒子周围要留出必定的空间，方便取出。是否是这样就很容易理解盒模型了。

因此整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是content的宽度，要特别注意。边界也经常称为外边距，填充也经常称为内边距。

最后，观念的转变：

理论上，良好的布局，可以经过改变CSS而实现各类外观，所以在设计之初，要忘记原来的table布局方法，把焦点集中在客户体验上，集中在DIV的摆放上，而后经过CSS来上色，这更像是绘画中的方法。