上一篇 HTML Introduction，介绍了简单的HTML入门基础。本章节是简单介绍了解 CSS 。
在此之前请先了解 HTML 基础部分。
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS 作用：
用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
基本语法：
来源runoob教程图片.png
元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
比如说： h2, p, img, a 等等。
还有两个特别的选择器 id 和 class
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定 特定 的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class 选择器
class 选择器用于描述 一组元素 的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
注意：
- id 与 class 属性不要以数字开头
插入样式
-
内联样式
示例：
内联样式示例.png
内联样式示例效果.png
color:#FF9800 表示设置字体颜色。
margin-left:20px 表示距离外边距 左边 20px。
内部样式
示例：
内部样式表示例.png
内部样式示例效果.png
外部样式
- 首先需要一个以 .css 后缀名的文件，本例 index.css
- 在html 文件中 引入css 文件， 即 index.css
外部样式示例.png
外部样式示例效果.png
这三种方式，得到的效果最后都一样。
设置css样式属性很多，建议到 w3school CSS 教程
学习。可能一时间没办法都记住所有的属性，但是得知道如何去查找相关资料学习，完成作业。
DIV
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
DIV.png
导航栏简单示例
- 新建文件夹 nav
- 新建 html 文件 index.html
- 新建 css 文件 nav.css
目录结构.png
index.html
index.html
- 在 head 内 引入 nav.css 外部样式文件 (暂时未书写任何样式);
- 在 body 内 嵌入一层 div ， 并且 设置 class 为 nav;
- 在 div 内 嵌入 ul 列表；
纯粹html效果，并没有具体设置样式。
显示效果.png
设置导航栏水平显示，在 nav.css 添加如下代码。
设置列表水平排列.png
设置列表水平排列示例效果.png
这样的导航栏，一般人受不了。为了设置美观一点，我们需要在nav.css 再修改添加一些样式。
添加修改nav样式.png
添加修改nav样式效果.png
接下来我们在index.html再加一点点东西，在导航栏下设置左右两个模块。
class = "main" 下分别嵌入 两个div , blog 和 info.
左右模块代码.png
然后在nav.css 添加样式
完整的nav.css.png
显示效果：
最终效果.png
只是纯粹演示简单布局和简单CSS的设置，多花点心思，你们可以设计得更好。
注意：
- 文件命名： 小写英文，不要中文，不带空格
网友评论