May 11, 2016

HTML之DIV+CSS

一、CSS概述

【what】层叠样式表 Cascading Style Sheets
【why】修饰美化网页内容
【where】各种网页中
【优点】

  • 丰富的修饰样式
  • 内容与样式分离，利于团队开发
  • 实现样式复用，提高开发效率
  • 实现精确控制

二、使用方法

【基本语法】

样式属性:属性值;
  1. 行内样式：写在开始标签的style属性中
    【语法】```
    <标签名 style="样式属性1:属性值1; 样式属性2:属性值2;"></标签名>

例如： 设置li标签文字为红色，字体为12px

使用行内样式的段落

``` 2. 内嵌样式表：写在 `与`

标签中
【语法】


  <style type="text/css">
    选择器 {样式属性：属性值;......}
    选择器 {样式属性：属性值;......}
    ......
  </style>
  1. 外部样式表：将样式表写在外部文件（后缀为.css）中，并在 与

标签链接或者导入
【用途】使网站中的多个页面采用统一的样式风格
【语法】

  • 方法1：链接外部样式表 ```
``` - 方法2：导入样式表 ``` ``` 4. 样式使用的优先级为： 行内样式表>内嵌样式表>外部样式表。

【注意】

  • CSS代码不区分大小写，但推荐全用小写。
  • 每条样式规则用分号（；）隔开，通常写为多行，简单的规则也可以合并为一行。
  • 当CSS代码较多时，可以使用“/……/”添加必要的注释，增加代码的可读性。

三、CSS的基本选择器

  1. 标签选择器：通过标签名选择元素
    【示例】```
    div {
    color:blue;/设置背景颜色为蓝色/
    font-size:12px;/字体大小为12px/
    }
2. 类选择器：通过标签的类名（class）选择元素  
 【示例】```
<div class="red">...</div>

.red {
    color:red;
}
  1. ID选择器：通过标签的ID名（id）选择元素
    【示例】```
...
#news { background-color:#FFFFAA; /*设置背景颜色为浅黄色*/ font-size:12px; /*字体大小为12px*/ font-family:宋体; /*字体为宋体*/ width:330px; /*内容宽度为330px*/ } ``` 4. 选择器的优先级为： ID选择器>类选择器>标签选择器【扩展】
  1. *：所有元素：选择所有元素
  2. 复合选择器
示例作用
包含(后代)#div1 #div2 #div3
或者#div1,#div2,#div3
并且div.XX

四、样式属性

  1. 文本属性
属性名作用
line-height行高
text-align对齐
letter-spacing字符间距
text-decoration文本修饰
2. 字体属性
属性名作用
font缩写形式
font-weight粗细
font-size大小
font-family字体
Color字体颜色
3. 盒子属性
属性名作用
margin外边距/边界
border边框
padding内边距/填充
width宽
Height高
- 各属性又分为四个方向
方向属性名
上margin-top、border-top、padding-top
右margin-right、border-right、padding-right
下margin-bottom、border- bottom、padding- bottom
左margin- left 、border- left 、padding- left
- 边框属性
属性名作用
border-style边框样式
border-color边框的颜色
border-width:3px;边框的宽度
或者简写 border:1px solid red;（同时设置边框的宽度、样式、颜色） 4. 背景相关的属性
属性名作用
background简写形式
background-color设置背景颜色
background-image设置背景图片
background-repeat设置背景的平铺方式
background-position设置背景的坐标，偏移量

五、标准文档流：从上至下、从左至右

块级标签：默认宽度是一整行，可以设置宽和高
例如：

<h1>~<h6>、<p>、<hr>、<div>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>和<table>

行内标签：在同一行内进行排列，宽和高由内容决定
例如：

<a>、<font>、<img>、<input>、<select>、<textarea>和<span>

设置标签的显示方式：display

属性值作用
block块级方式显示
inline行内方式显示
none不显示
## 六、盒子的定位：每个标签都是一个盒子：position
属性值作用
static静态定位，默认
relative相对定位，参照该元素在标准文档流中的原位置进行偏移
absolute绝对定位，脱离标准文档流，参照浏览器左上角进行偏移
fixed固定定位，脱离标准文档流，参照浏览器左上角进行偏移，滚动条移动时重新定位
## 七、盒子浮动：让块级标签在同一行显示：float
属性值作用
none不浮动
left向左浮动
right向右浮动
【清除浮动】：父元素里的所有子元素都浮动时会产生浮动塌陷
  1. 在父元素中添加一个子元素，并添加样式
    {clear:both}
  2. 父元素添加样式{overflow:hidden}

八、DIV+CSS布局

  1. 将页面在整体上用 <div>

标记进行分块
2. 使用CSS对各版块进行定位
3. 在各版块中添加相应的内容，实现局部布局