css层叠样式表
一、 使用CSS样式的方式
- HTML<!DOCTYPE>声明标签
定义和用法：<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。<!DOCTYPE>声明不是HTML标签；它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
在HTML4.01中，<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML。DTD规定 了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。
声明：<!DOCTYPE html>
定义字符集：<meta charset=”utf-8”>
2．内链样式表：
<body style=”background-color:green;margin:0;padding:0;”></body>
嵌入样式表：<style type=”text/css”></style>
需要将样式放在<head></head>中
引入样式表：<link rel=”StyleSheet” type=”text/css” href=”style.css”>
二、 定义样式表
1、 HTML标记定义：<p>…</p>
p{属性:属性值;属性1:属性值1;}
2、 class定义：<p class=”p”>…</p>
.p(属性:属性值;属性1:属性值1)
3、 ID定义：<p id=”p”>…</p>
#p(属性:属性值;属性1:属性值1;)
4、 优先级问题：ID>class>HTML 同级时选择离元素最近的一个
5、 组合选择器（同时控制多个元素）：h1,h2,h3(font-size:14px;color:red;)
6、 伪元素选择器： a:link 正常链接的样式 a:hover 鼠标放上去的样式
a:active 选择链接时的样式 a:visited 已经访问过的链接样式
三、 常见属性
1、 颜色属性
Color属性定义文本的颜色：
Color：green
Color：#ff6600
简写式color：#f60
Color:rgb(255,255,255) 红（R）、绿（R）、蓝（R）取值范围0-255
Color:rgba(255,255,255,1) 1表示透明度 取值范围0-1
2、 字体属性
字体大小：font-size：px:设置一个固定的值
%父元素的百分比
Smaller：比父元素更小
Larger：比父元素更大
Inherit：继承父元素的
Font-family：定义字体
Font-family：微软雅黑，serif；
可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个。
Font-weight：字体加粗
Normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细）
Font-style：字体样式
Normal（正常）、italic（斜体）、oblique（倾斜）、inherit（继承）
Font-variant：小型大写字母显示文本
Normal（标准）
Small-caps：小型大写字母显示文本
Inherit：继承
3、 背景属性
背景颜色：background-color
背景图片：background-image
背景重复：background-repeat
repeat:重复平铺满 repeat-x：向x轴重复
repeat-y：向y轴重复 no-repeat：不重复
背景位置：background-position
横向（left，center，right） 纵向（top,center,bottom）
用数值来表示位置
简写方式：Background：背景颜色url（图像）重复 位置
Background:#f60 url（images）/bg.jpg) no-repeat top center
4、 文本属性
横向排列text-align：left center right
文本行高line-height：1 %：基于字体大小的百分比行高
2 数值：设置固定值
首行缩进text-indent：1 %：父元素的百分比
2 px固定值，默认0
3 inherit继承
字符间距letter-spacing：mormal（默认）
Length设置具体的数值（可以设置负值）
Inherit继承
单词间距word-spacing：normal标准间距
Px固定值
Inherit继承
文本方向direction：ltr从左到右（默认值）
rtl从右到左
inherit继承
文本大小写text-transform：none（默认）
capitalize：每个单词以大写字母开头
uppercase: 定义仅有大写字母
lowercase:定义仅有小写字母
inherit：规定应该从父元素继承text-transform属性的值
5、 边框属性
边框风格border-style：同一风格
边框风格样式的属性值
边框宽度border-width
边框颜色border-color
简写方式
6、 列表属性
标记的位置list-style-position
设置图像列表标记list-style-image
简写方式list-style
四、 div+css布局
1、 div和span
区别：span是内联元素，div是块级元素
2、 盒模型
margin：盒子外边距
padding：盒子内边距
border：盒子边框宽度
width：盒子宽度
height：盒子高度
3、 布局相关属性
1.position定位方式：正常定位：relative
根据父元素定位：absolute
根据浏览器窗口定位：fixed
没有定位：static
继承inherit
2.定位：left、right、top、bottom
- z-index层覆盖先后顺序
4 .display显示属性
display-none：层不显示
display-block：块状显示
display-inline:内联显示
5. float浮动属性：left right
6.clear清楚浮动：clear：both
7.overflow溢出处理：hidden隐藏超出层大小的内容
scroll无论内容是否超出层大小都添加滚动条
auto超出时自动添加滚动条
4、 兼容问题
- 兼容性测试工具
- 常用的浏览器
- 高效的开发工具
- 网页设计工具
- 判断IE的方法
