CSS基础
1. 关联一个css样式文件
<link rel="stylesheet" type="text/css" href="css/exp.css">-rel : relationship css和当前的关系 是 样式文档
-type: text/css 关联文件的类型
-href: 这个link的 地址
2. 理解样式的继承关系
子元素样式自动继承父元素样式
可以复写子元素的样式
<html>
<head>
<style>
body {
background-color : red;
}
p {
background-color : green;
}
</style>
</head>
<body>
<div>
div背景自动继承红色
</div>
<p>
p内背景被改成绿色
</p>
</body>
</html>3. 理解css的加载顺序
先加载link
之后 html-head-style中得样式
最后 标签中得 style属性
最终的样式由最终加载项决定
4. 理解 span 和 div 代表的两类元素的区别
span 默认是inline元素，修饰时不换行
div 默认是block元素，修饰时独占一个行空间
span可以放在p中，div不可以放在p中及其他inline元素中
5. 理解 css中的各种计量单位
对于颜色: #630 #663300 3位和6位两种，重复3位得到的6位代表同一个颜色，调整6位的重复位可以得到微调的3位颜色
对于文字和空间: pt px ex em %
pt： point 浏览器默认字号一般是12pt
px：pixel 可以调整像素比例
ex：一个小写x的 高度 可以用于调整 高度
em：一个大写M的 宽度 可用于调整 宽度
%：当前默认值的百分比
对于元素的尺寸和block元素的尺寸
width height +padding + border + margin 的 单位和 文字空间的一致
CSS Positioning
1. 理解 定位方式的种类 static absolute relative float fixed 无继承性
static：默认的定位方式
absolute：相对于父窗口的偏移定位
relative：相对于父窗口在应占位置的基础上的偏移定位
float：right | left 相对于其它元素漂浮出来，依次排在左边或右边，非float元素可以添加 clear : right/left/both 标签消除float元素对之后元素的效果
fixed ：相对于window的固定定位，特点是拖动滚动条不改变元素的可是位置
2. 元素position的第三个维度 z-index
子元素默认在父元素上方
同级子元素，后面的在前面的上方
可以改变z-index调整上下重叠关系
3. relative position的最常用应用
最为容器元素使用 position: relative , 内部的元素布局使用 absolute 或 float;
注意 容器元素的条件: postiiton: relative 没有 方向偏西
4. 一些技巧
link+图片+设置位置可以toggle不同动作下得图片显示
a:link, a:visited{
background: url(xxx) left top;
}
a:hover, a:{
background:url(xxx) left bottom;
}容器设置padding加内部元素设置统一margin-left/right: 0;可以 对齐
用<p style="clear:both"/> 在结尾除，可以清除之前float样式对之后元素的影响
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
