H5网页设计基础,一位在校大学生的学习笔记以及体会心得(二)
哈喽！大家好，我是一个热爱编程的在校大学生，虽说不是纯正的软件专业，但也多多少少对编程能力有一定的要求吧，再加上我本人比较喜欢编程这门课程（虽说还是一个地地道道的入门级小白），所以我在老师和学长的推荐下加入了博客园这个大家庭，希望可以提升自己，也提供一些力所能及的帮助。看腻了那些高深莫测的文章，来这里寻找一下刚刚入门时的新鲜感也是不错的选择，嘿嘿。
H5这门语言呢，我从大一就开始学习，包括课上以及课下自学的，到现在我们的实训课使我再一次接触到了这门打开我编程思想大门的课程。所以，我准备在博客园分享一些基础的笔记以及我自己的学习心得，这些文章可能比较新手向，一些代码可能比较繁琐，还希望大佬们多多指点，让我也能进一步认识到自己的不足并加以改正。
上回咱们说了H5的一些基本的标签,这些标签效果也是十分的死板(难看)，所以今天我们来看一看能让这些标签稍微的“活”起来的CSS。
CSS，又叫层叠样式表，CSS 是一种描述 HTML 文档样式的语言，CSS 描述应该如何显示 HTML 元素。
div style="" div中的style是属性，可以进行自定义高宽，颜色等，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <div style="height: 50px;width: 50px;background: red"></div> </body> </html>
以上代码实现效果为一个高50px宽50px的红色方块
但是这种定义方式写在标签内部，为行内样式表，不推荐使用。但同时也是优先级最高的定义方式，CSS行内样式是直接将样式属性写在开始标签style属性中，多个元素难以共享样式，不利于代码复用；且HTML和CSS代码混杂，结构样式没有分离，不利于程序员和搜索引擎阅读，不利于后期维护。
这里我们推荐使用外部CSS链入，即单独创建一个CSS文件进行对各标签的定义。使用link标签来将外部CSS链入到内部html，<link rel="stylesheet" type="text/css" href="css/main.css">，href后就是外部的CSS文件。
下面我们来看一看选择器，我们常用的有三种
1， 标签（元素）选择器。2，id选择器。3，类选择器。
先来说说第一种标签（元素）选择器：
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
例如我们在html中使用了ul标签内嵌了多个li标签，我们在CSS样式里可以直接通过
ul{}进行定义ul的属性值，如果有多个ul则统一定义。li标签在没有进行单独定义的情况下是会跟随ul标签的定义而定义（这是CSS的继承性）。li{}则会直接选中所有的li标签进行定义。
Id选择器：
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号、井号。
使用id选择器要给html内的标签内设置一个id名字，这个名字可以自定义但只能使用一次。
类选择器：
类选择器使用class=“”，来命名定义，在css中应使用 .+class名来进行进一步的定义。
下面我们来说一说id选择器与类选择器的区别。
在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次，而类选择器不同。
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
这一点还是比较重要的，因为id选择器无法定义带有空格的id名，这也是我们今后写代码时需要注意的地方。
说完了一些基本的，我们来看看一些css有趣且实用的定义吧
使用浮动之后，元素会脱离标准的文档流。（标准的文档流就是按照不同的元素种类，如块元素，行元素按照各自的特点去排列显示，虽然属性不同，但都是按照从上到下，从左到右的顺序进行排列）
浮动的框可以向左或者向右移动,知道它的外边缘框碰到包含框或者另一个浮动框的边框为止.
这里插叙一条关于文档流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。元素按照顺序排序, 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位. 只有绝对定位absolute和浮动float才会脱离文档流。float浮动会使浮动元素脱离文档流.
浙公网安备 33010602011771号