css初接触

 

一、简介：CSS 即 级联样式表 。

它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

 

css是能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

这种分离方式有点像前面的配置文件。都能够提高设计效率。

二、css选择器

 

1、什么是选择器呢？

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

 

2、包含类型及优先级：

ID选择器>类选择器>HTML标签选择器

三、css排版

1、标准流与浮动：

标准流就是标签的排列方式。

页面里显示的顺序和代码里的顺序一致就是符合标准流的

若是给上面的标签加上浮动或定为属性，就可能脱离标准流，此时便可能出现同一行排版多个标签的情况。

2、盒子模型

css盒子模型就像普通的盒子一样具有内容(content)、填充(padding)、边框(border)、边界(margin)四个属性，每个属性又都有上、右、下、左四个部分

3、绝对定位与相对定位

（1）相对定位：没有脱离原来的标准流，相对于原来的位置移动

（2）绝对定位：脱离原来的标准流，绝对于包含此盒子的更外一层盒子移动

4、行列元素与块级元素

行列元素

<span style="font-size:14px;"><span class="menu"> 栏目一</span> </span>

块级元素

<span style="font-size:14px;"><div class="menu"> 栏目一</div> </span>

顾名思义，他们两个的区别就是“行布局”与“块布局”的区别，也因此行列元素对盒子模型的很多属性都是不能使用的的。 而块级元素只能是矩形形状的，所以盒子模型适合于我们的块级元素。