css学习笔记2

3 美化网页

3.1 为什么要美化网页

1、有效的传递页面信息
2、美化网页，吸引用户
3、凸显页面主题
4、提高用户体验

3.2 字体样式

span标签：重点要突出的字,用span套起来
font-family 字体
font-size 字体大小
font-weight 字体粗细

3.3 文本样式

颜色
格式
color: 单词
RGB 0~F
RGBA A:0~1
文本对齐方式
text-align:center
首行缩进
text-indent:2em
行高
line-height: 200px
装饰
text-decoration:underline
文本图片水平对齐
vertical-align: middle

3.4 阴影

text-shadow: 颜色、水平偏移、垂直偏移、阴影半径

3.5 超链接伪类

鼠标悬浮样式
a:hover{
}
鼠标按住未释放样式
a:active{
}

3.6 列表

list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形

3.7 背景

背景颜色
背景图片
background-image:url(“xx.jpg”) ;
background-repeat: no-repeat;
background-position: top 100px;

3.8 渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, …);
background-image: linear-gradient(to right, red , yellow);

4 盒子模型

margin: 外边距
padding: 内边距
border: 边框

4.2 边框

1、边框的粗细
2、边框样式
3、边框颜色
border: 粗细 样式 颜色
border: 1px solid red;

4.3 圆角边框

左上 右上 右下 左下
border-radius: 10px 15px 20px 15px;

4.4 盒子阴影

box-shadow

5 浮动

块级元素：独占一行
h1-h6 p div 列表
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素之中，反之，不行

5.1 display

display:
block 块元素
inline 行内元素
inline-block 块元素，可以内联在一行
none

5.2 float

display也是实现行内元素排列的一种方式，但很多情况都有float
float: right

5.3 父级边框塌陷问题

clear:
right;右侧不允许有浮动元素
left;左侧不允许有浮动元素
both;两侧不允许有浮动元素
none
解决方案
1、增加父级元素高度
2、增加一个空的div标签，清除浮动
clear:both
3、overflow
在父级元素中添加一个overflow:hidden
4、父类添加一个伪类:
#test:help{
clear:both
}
小结：
1、浮动元素后面添加空div
简单，代码中尽量避免空div
2、设置父元素高度
简单，元素有了固定的高度，会被限制
3、overflow
简单，下拉的一些场景避免使用
4、父类添加伪类(推荐使用)

5.4 对比

display:方向不能控制
float:浮动起来会脱离标准

6 定位

6.1相对定位

position:relative
相对于原来的位置，进行相应的偏移，原来的位置会被保留

6.2 绝对定位

1、没有父级元素定位的前提下，相对于浏览器定位
2、父级元素存在定位，相对于父级元素定位
3、在父级元素范围内偏移
position:absoluto
原来的位置不会被保留

6.3 固定定位fixed

position:fixed

6.4 z-index

背景透明度
opacity:0.5
filter:Alpha(opacity=50)