【牛腩新闻发布系统】——CSS学习

牛腩的第19集开始讲CSS相关内容，也离真正的网页制作迈进了一大步。这里简单介绍一下CSS的基本内容

与核心内容。

度娘的说法

CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件

样式的计算机语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持

几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示

最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读

性。

我的认识

在学习CSS的两集视频里介绍了基础内容与核心内容，现在就针对这两方面进行：

1、基础内容

先说CSS的特点：实现网页内容与样式的分离。为的就是在大型项目中，将网页的主要样式写在CSS里，

从标题到内容都可以进行分别设置，让整个网页显示一致化。像我们现在正在开发的ITOO，就是很明显的例子。为

什么每个功能的界面都是一致的，当然设计到的内容肯定不止CSS一种方法，但是CSS也是做的重要贡献的。

然后是CSS的特色：选择器。按照优先级来说：ID选择器 > 类选择器 > HTML标签选择器。那么他们分别

是什么，拥有怎么的规则？

ID选择器：通过在CSS里设定

#aaa {
border :1px solid #100;
padding :5px;
}

在HTML网页里调用id为aaa就行了。

<span id="aaa"> 栏目一</span>

类选择器：在CSS设定

.title {
color :#00f;  /*新闻标题样式*/
clear:left; /*清除浮动*/
}

在HTML网页里调用

<span class="title" > 栏目一</span>

HTML标签选择器：指在HTML中，除了拥有ID选择器和类选择器设置之外的内容，如下：

<pre name="code" class="html"> <span id="aaa">栏目一</span>
<span class="title" > 栏目二</span>
栏目三

在上述的代码中，只有“栏目三”没有特殊的选择器设定，所以它属于标签选择器，只要在CSS中的body中

设置相应的样式就能让栏目三也拥有特殊的样式。

body {
color:#f0f;
}

注意：在这里提示一下，因为三者的优先级关系，所以只要有冲突，会以优先的选择器中的内容为
准。

核心内容

CSS的核心内容有：标准流，盒子模型，浮动和定位。拓展的内容有块级元素和行内元素。

这里分别描述核心内容的意义：

1、标准流：就是在CSS中的标签的先后顺序。

body {
color:#f0f;
}
.menu {
color :#f00; /* 文字颜色*/
}
.title {
color :#00f;  /*新闻标题样式*/
clear:left; /*清除浮动*/
}

如上述内容中title内容要后于menu，所以如果出现

<span class="title class=menu" > 栏目二</span>

那么就先以menu中的内容为主。

2、盒子模型：拥有外边距：上、下、左、右；内边距；内容区：宽、高；画框：宽的一种页面设计。

一张图说明盒子模型：



所以在CSS中针对相关属性设值就行了。

3、浮动和定位：都是对盒子的位置进行调整的。

浮动：能使盒子的位置进行左、右移动。

定位：能使盒子的相对和绝对位置产生变化。

4（拓展）、块级元素与行级元素。

块级元素会独占一行，其宽度自动填满其父元素宽度。

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素

的内容而变化

而且行级元素是可以向块级元素变换的，这个就不细说了。

总结

通过对CSS的学习，感觉它的作用还是挺强大的，在接下来的网页制作中再慢慢体会它的好~