【CSS 层叠样式表】
【 使用CSS的好处】
1.可以对HTML标签进行样式的强行控制。
2.1个CSS属性可以同时控制多个HTML标签。
3.将HTML代码和CSS样式代码分离。
4.方便分工合作。
5.给1个HTML页面配置多个CSS界面皮肤。
<div></div> 块级元素 占满整个一行
<span></span> 行内元素
【CSS的书写方式】
1. 行内式
<标签名 style="css属性:值; css属性:值; css属性:值; ...." />
利用分号来分割多个属性值
例
<div style="background-color: green;width: 50%;>div1</div>
2. 标签式
<style type="text/css">
</style>
例
<style type="text/css">
div {
background-color: black;
width: 50%;
}
</style>
- 导入式
在html的head标签内加上link标签,指向对应的css文件
例
<link href="CSS文件路径" rel="stylesheet" href="xxx.css" />
【CSS选择器】
例
- 标签选择器 标签名
div {
background-color: green;
width: 50%;
}
- 类别选择器 class .类别名
类名的第一个字符不能使用数字!它无法在火狐浏览器中起作用
例
.d1{
background-color: green;
width: 50%;
}
- ID选择器 id #ID名
id不要以数字开头,数字开头的id在火狐浏览器中不起作用
Id属性只能在每个html文档中出现一次
例
#p1{
background-color: red;
width: 50%;
}
【CSS选择法】
- 并集选择法 (或者) 选择器1,选择器2,选择器3,......
满足div标签和p标签的标签
例
div,p {
background-color: red;
width: 50%;
}
- 交集选择法 (并且) 标签名.类别名
同时满足div标签和di类别的标签
例
div.d1 {
background-color: red;
width: 50%;
}
- 子代选择法
例
id为tb2下的所有的td标签
#tb2 td{
background-color: darkorange;
}
选择器和选择法的优先等级:
加载页面时优先加载前面的,后面加载的会把前面的覆盖
并集选择法 > 标签选择器 > 类别选择器 > 交集选择法 > ID选择器
【基本属性】
width 宽度
height 高度
overflow 溢出(对盒子内溢出的文字)
visible 显示(默认)
scroll 滚动轴
hidden 隐藏
a标签和font标签是功能性标签,没有width和height属性
如何让a标签等拥有别的标签的功能呢?
display 显示
block (div) 块级样式显示,拥有div标签的属性
none(隐藏)
inline (span) 行内元素的样式显示,拥有span标签的属性
inline-block 在同一行中的块级样式显示 仅限于IE浏览器(慎用)
list-item(<li>) 列表项样式显示
float 浮动
Float属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止.
浮动之后的元素将围绕它
浮动元素之前的元素将不会受到影响
left 向左浮动 right
clear:left; 清除向左浮动
right
both
一般定义一个类别选择器,用来清除浮动:
.clear{
width: 0px;
height: 0px;
clear: both;
}
【背景属性】
background
background-color 背景颜色
background-image 背景图片 循环
例:background-image: url(img/logo.png);
background-repeat 背景图片循环方式
repeat:循环 (默认)
repeat-x:X轴循环
repeat-y:Y轴循环
no-repeat:不循环
background-position 背景图片位置 背景不循环时才能使用
left right top bottom center
背景图片位置设置为左下:background-position: left bottom
【边框属性】
border-style 边框线形
solid 实线
dashed 虚线
dotted 点线
double 双实线
groove 和黑色组成的立体边框
inset 内发光立体边框
outset 外发光立体边框
border-color 边框颜色 颜色名称 16进制 rgb函数
border-width 边框宽度 xxxpx
方位:left right top bottom
简要写法(四周都有边框线):border: 1px red solid;
【文字属性】
color 文字字体颜色
font 文字
font-family 文字字体
font-size 文字大小
font-style 文字样式 italic 倾斜
font-weight 文字粗细
text-decoration 文字线形
underline 下划线
overline 上划线
line-through 删除线
text-align 水平对齐
vertical-align 垂直缩进 td适用
line-height 行高
【列表属性】
list-style-type 符号样式
list-style-position 列表项位置 inside outside
list-style-image 符号图片
【超链接属性】
a:link 默认状态
a:hover 鼠标掠过
a:active 鼠标点击
a:visited 访问过的链接
inherit 继承=======================>Demo14.html
【鼠标指针样式属性】
cursor
hand 手型
crosshair 十字型
text 移动到文本上的那种效果(I 形)
wait 等待的那种效果(沙漏)
default 默认效果
help 问号
e-size 向右的箭头
ne-resize 向右上的箭头
n-resize 向上的箭头
nw-resize 向左上的箭头
w-resize 向左的箭头
sw-resize 向左下的箭头
s-resize 向下的箭头
se-resize 向右下的箭头
auto 由系统自动给出效果
【盒子模型】
border:边框
margin:边框离外部的距离
margin:auto设置以后不居中的原因:
没有为DIV设置宽度,这很容易理解:DIV没有宽度,如何根据宽度自适应呢?
padding:边框离内部内容的距离
div坍塌现象:
上下两个div标签的margin-top和margin-bottom值不会叠加,按照值较大的属性为准。
改变内边距
【position:定位】(将该标签放在一个新的图层中)
relative 相对定位
相对于自己原来的位置的左上角。因此,移动元素会导致它覆盖其它框。
可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变
absolute 绝对定位
相对于自己外部最近的一个有定位的父级标签。
绝对定位的标签是没有盒子的。
绝对定位使元素的位置与文档流无关,因此不占据空间
fixed 锁定定位
相对于浏览器的可见部分。
锁定定位使元素的位置与文档流无关,因此不占据空间
例:网页上的广告,返回定义按钮
left :x轴坐标
top :y轴坐标
z-index :z轴坐标
CSS 定位 position
position : 定位属性 (确定坐标轴的中心点)
值: relative 相对定位()
坐标轴原点是自己原来位置的左上角
absolute 绝对定位
坐标轴的原点是离自己最近的一个有定位的盒子的左上角。
fixed 锁定定位
left: x轴坐标
top: y轴坐标
y轴是从0开始朝下为正方向!所以如果要往上移动,top的像素值取负数
z-index: z轴坐标