【牛腩新闻发布系统】--CSS学习_html/css_WEB-ITnose

牛腩的第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就行了。

 栏目一

类选择器 ：在CSS设定

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

在HTML网页里调用

 栏目一

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

 栏目一  栏目二 栏目三
  
 在上述的代码中，只有“栏目三”没有特殊的选择器设定，所以它属于  标签选择器，只要在CSS中的body中  
  
设置相应的样式就能让栏目三也拥有特殊的样式。
  
  
body {    color:#f0f;}
  注意：在这里提示一下，因为三者的优先级关系，所以只要有冲突，会以优先的选择器中的内容为  
准。
  

 核心内容  

  
CSS的核心内容有：标准流，盒子模型，浮动和定位。拓展的内容有块级元素和行内元素。
  
这里分别描述核心内容的意义：
  
1、标准流：就是在CSS中的标签的先后顺序。
  
  
body {    color:#f0f;}.menu {    color :#f00; /* 文字颜色*/}.title {    color :#00f;  /*新闻标题样式*/    clear:left; /*清除浮动*/}
 如上述内容中title内容要后于menu，所以如果出现  
  
  
 栏目二
 那么就先以menu中的内容为主。  
  
2、盒子模型：拥有外边距：上、下、左、右；内边距；内容区：宽、高；画框：宽的一种页面设计。
  
一张图说明盒子模型：
  

  
所以在CSS中针对相关属性设值就行了。
  
3、浮动和定位：都是对盒子的位置进行调整的。
  
浮动：能使盒子的位置进行左、右移动。
  
定位：能使盒子的相对和绝对位置产生变化。
  
4（拓展）、块级元素与行级元素。
  
块级元素会独占一行，其宽度自动填满其父元素宽度。
  
  
   行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素   
  
   的内容而变化  
  
  
而且行级元素是可以向块级元素变换的，这个就不细说了。
  

  

 总结  

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