二、CSS基础

二、css基础

1、css层叠样式表

　　(1)、行内样式表(style属性)

　　<p style="">

　　(2)、内部嵌入样式表(style元素)

　　<style type="text/ess">

　　　　body {background-color #FF0000;}

　　　　.boss{}

　　　　#id{}

　　</style>

 

(3)、外部引用样式表(引用一个样式表文件)，推荐

<link rel="stylesheet" type="text/css" href="css/style.css"/ >

 

 

2、选择器ID、类、属性

 

ID选择器:

　　#idName{}样式唯一;

类选择器:

　　.className{}样式共用;

标签选择器

　　html自带的标签;

 

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

　.name a{}   

　　　　name类下标签进行样式修改

　　a,p{}

　　　　a、p两种标签样式同时修改

 

3、常见的样式属性

　　width height border

　　font color

　　background

 

4、div+css页面布局

a、外边距属性:margin，盒子与盒子之间的间距,比如盒子有个自己定义的势力范围

　　magin: 上 右 下 左:4个值

　　magin: 上 左/右 下:3个值

　　magin: 上/下 左/右:2个值

　　magin: 上/下/左/右:1个值

　　div左右居中 margin:10px auto

b、内间距属性:padding，标签内容(月饼)在盒子内部的间距

　　使用和margin一致

c、 浮动属性float，可以理解成在水面浮动盒子，会相互占据空间

　　文档流默认为从上往下

　　以左边开始文档流默认为从上往下，以左边开始(一般会用div容器进行布局)

　　float

d、清除浮动属性

　　清除跟随浮动的影响

　　clear

 

5、CSS标签中的链接：

　　a:link {color:#FF0000;} /* 未被访问的链接 */

　　a:visited {color:#00FF00;} /* 已被访问的链接 */

　　a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */

　　a:active {color:#0000FF;} /* 正在被点击的链接 */

 

6、初始化浏览器样式

　　html,body{magin:0;padding:0}