Web前端入门知识:CSS-1
书接上回，上回书说到：我们初步学会了写出一个简单的网页，但是缺少一些花里胡哨的效果。这一章我们就来学习如何加入CSS。
CSS中文名：‘’层叠样式表‘’(英文：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
SO...将CSS应用于页面有三种方式。分别是链入外部，链入内部，内联。链入外部样式表： 将网页链接到外部样式表。先创建一个 CSS 文件，再在 HTML 中通过 <link> 链接此 CSS 文件。一般写在 <style></style> 的前面。内部样式表： 在网页上创建嵌入的样式表，通常写在 <head></head> 里面。内联样式（行间样式、内联样式、行嵌样式）： 在html元素上通过 style="" 属性直接写样式。
在开始编写之前，我们要知道怎样将样式给指定的元素。那就需要选择器了。有ID选择器，类选择器，标签选择器，后代选择器，属性选择器等。我们常用的是前四种。ID选择器和类选择器分别用“.”和“#” 作为开头，标签选择器直接写标签名即可。
内容用大括号抱起来，样式之间用分号隔开，写出来的样式如下：
body{margin: 0;padding: 0;}
.headBox{position: relative;width: 100%;height: 120px;margin: 0;padding: 0;}
#H{margin: auto;width: 1178px;height: 100%;}
接下来该对我们选择好的元素进行布局了，我们会用到CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
那么元素是怎样浮动的呢？元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
浙公网安备 33010602011771号