一般链接式 写在前面
后面样式会覆盖前面样式，内层样式会覆盖外层样式
优先级排序：导入式在后面的情况
行内样式>链接式>内嵌式>导入式（在后面的链接式）
导入式在前面的情况
行内样式>内嵌式>导入式>链接式（在前面的链接式）
HTML中的CSS
行内样式
内嵌式
链接式（方便管理，用的最多）
创建一个外部的CSS文件 里面写样式内容
HTML内
导入样式 （导入CSS样式）
导入式和链接式的区别
链接式不会在链接CSS样式语句是提前加载CSS样式，而是当运行到body标签中时才去加载CSS文件
用到时才取
导入式是在导入样式语句的时候就将CSS文件中的样式之间加载进来
不管用不用到都直接取
复合选择器
交集选择器 （方便，避免重复，继承其他样式）
希望同时使用两种一定义好的选择器样式来修饰时使用 交集选择器
并集选择器
希望对很多意见用一些样式修饰的 来添加新的样式时使用 并集选择器
后代选择器
子选择器
CSS样式的继承特性
CSS的继承有些是可以继承的有些是不可以继承的
样式层叠有优先级的
边框
border-width 边框粗细
border-color 边框颜色
border-style 边框样式
简单写法
内边距
设置内边距
padding： 40px; 默认统一设置
分别设置 内边距
简单写法
外边距
设置外边距 默认统一设置
分别设置 外边距
简单写法
网页布局和盒模型
像水流一样一层一层的解析，一层一层的渲染
块级元素 div
块级元素独占一行，依次垂直向下排序
行内元素 span
行内元素 在同一行依次横向向右排序
盒子在标准流中的定位 盒子与盒子之间的距离
行内元素之间的水平 margin
行内元素之间的margin计算
块级元素之间的竖直 magin
块级元素之间的margin计算
之间有重叠时，大的会覆盖小的，以大的为准
嵌套盒子之间的 margin
嵌套盒子之间的margin计算
margin 属性可以设置为负值
负值会之间向反方向移动
盒子浮动 float
使用 clear 清除浮动的影响
盒子定位 position
相对定位
绝对定位
固定定位
z-index 空间位置
空间层叠中 上层下层的显示 覆盖不覆盖的位置
设置z-index值越小越显示到下层
盒子 display 属性
将块元素变成内元素
将内元素变成块元素
8.用CSS设置文字的效果
设置文字字体
设置字体斜体
设置文字加粗效果
设置字体不加粗
英文字母大小写转换
设置文字大小
设置文字装饰效果
段落首行缩进
设置字体的间距
设置字体行高
设置段落之间的距离
设置文本的水平位置
段落的对齐
设置文字的颜色和背景颜色
设置段落的垂直对齐方式（让段落在一定的纵向区域对齐）
//别人写的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <body> |
9.用CSS设置图像的效果
设置图片的边框
实线的边框
虚线的边框
点划线边框
没有边框
给边框的不同部分设置边框样式
设置图片大小和缩放
大小
缩放（包容图片的容器的百分之多少）
图文混排
设置图片与文字的对齐方式
基准线对齐 （默认对齐方式）
顶部对齐
居中对齐
底部对齐
其他对齐
下标
上标
自定义对齐
相对于基准线的距离 20px 向上的距离 -20px 向下的距离
10.用CSS设置网页的背景颜色和背景图像
设置网页的背景颜色
设置网页的背景图像
默认图片在网页平铺
设置网页的背景图像平铺
在h1标签内平铺图片
在h1标签内左右平铺图片
平铺并设置平铺高度
设置图片不平铺，默认在左上角显示
设置网页的背景图片位置固
设置显示位置 图片上方和左边与网页边框的距离
在右下角显示
backaground-position 使用还有很多
设置网页的背景图片位置固定在窗口位置不变
图片固定位置不变
11.用CSS设置表格样式
设置表格的边框
设置表格的宽度
设置表格隔行换色
设置整个表格的样式背景色，再设置偶数行的背景色
设置表格列样式
使用链接选择器
设置鼠标经过是行变色效果
12.用CSS设置超链接样式
使用CSS伪类别来设置超链接样式
未被访问的状态
用户已访问的状态
鼠标指针位于链接的上方的状态
链接被点击时刻的状态
创建按钮式超链接
用颜色的差异来 设置成 按钮样式的超链接
13.用CSS设置列表的样式
设置列表的符号
列表是有默认的符号的
设置列表图片符号
创建简单导航菜单
一些CSS样式
#navigation { 120px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ } #navigation li a{ display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; } #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } |
14.CSS固定宽度布局
经典布局 小的布局用html 大的布局用CSS+DIV
绝对定位法
绝度定位 每个块都都要设置高度 不然会混乱
浮动法 一般用浮动法 用法灵活
浮动直接设置块元素左浮动右浮动，不一定要设置高度
15.CSS 变宽度布局
变宽布局 随着浏览器的放大缩小 网页的元素也随着 放大缩小
方法：先前的设置位置和大小都是 固定的值 要转换成 百分比设置
直接将 ?px 改成 ？%