CSS初识

CSS定义

　CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

CSS特点

　实现网页内容与样式的分离。

CSS选择器

　优先级：ID选择器 > 类选择器>HTML标签选择器

　ID选择器：

　　同一个标签最多只能引用一个id选择符。

　　以井号（#）前缀开头。

　类选择器：

　　类（class）选择符可以实现同一个标签在网页的不同位置显示不同的样式。

　　以点（.）前缀开头。

　HTML标签选择器：

　　html文档由很多标签通过一定的规则编织而成，可以把这些标签称为网页元素，标签选择符（也称为类型选择符）用来确定要定义样式的网页元素对象。标签选择符不需要重命名，直接引用html特定标签的名称即可，它规定了网页元素在页面中的默认显示样式，即会影响页面中所有同名标签。比如p标签：p{font-size:14px;margin-　bottom:18px;}

CSS核心内容

　标准流、盒子模型、浮动、定位

标准流：即标签的排列方式

 

1、块级元素：如：<div></div>

<div class="menu">栏目一</div>

样式设置后样式会占满一行

2、行内元素：如：<span></span>

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

样式的作用域只与内容有关

效果：

 

盒子模型：

 

具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)

每个HTML标记都可看作一个盒子；

每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；

 

浮动

 

float :left ; /*盒子向左浮动*/

如下图：

↓

 

 

定位

  相对定位

   position :relative;/*相对定位*/

   top:20px;    /*相对自己原来的位置移动，不会影响到其它的盒子*/

 绝对定位

   position :absolute ;/*绝对定位*/