CSS的作用:
1. 美化网页,相当于的网页的皮肤
CSS的样式:
a) 行内样式:
i. 在标签内部添加style属性
ii. 适用范围:只适用于当前标签
b) 内嵌样式:
i. 在head标签中添加style标签
ii. 适用页面符合条件的标签
c) 外部样式:
i. 通过link标签引入外部的css文件
ii. 适用于所有导入该文件的页面
CSS的选择器
a) 基本(简单)选择器:(5)
i. 标签选择器 :直接写标签名称
ii. Id选择器 :#id名称
iii. 类别选择器 : .class名
iv. 通用选择器 :*{}
v. 伪类选择器 : :选择器名
1. 例如:a:link 鼠标点击前 a:visited 鼠标点击后 a:hover 鼠标放上去 a:active 鼠标点击时
b) 复杂选择器:(5)
i. 后代选择器:eg: div a (div中所有的a标签)
ii. 子代选择器:eg:div>a(div的子集a标签,直接下级)
iii. 并集选择器:eg:div,p,ul(给div及其他标签添加相同的样式)
iv. 交集选择器:eg:div.one(给class=one的div添加样式)
v. 属性选择器:eg:div[width](给具有宽度属性的div调节样式)
常见的css属性
字体属性
a) font-family 调节字体
b) font-size 调节文字大小
c) font-style 调节字体的样式(倾斜)
d) font-weight 调节字体的粗细
e) 缩写:要求:必须有font-size和font-family,正常的顺序是font-style font-weight font-size font-family
背景属性
1. background-color 调节背景颜色
2. background-image:url() 调节背景图片
3. background-repeat 调节背景是否重复
a) no-repeat
b) repeat-x
c) repeat-y
d) repeat
4. background-position 调节背景图片的位置
5. 缩写:没有顺序和个数的要求
文本属性:
1. text-decoration:none去除下划线
2. text-align:文字的水平对齐方式(left,center,right,justify)
3. line-height 文字的行高(一般我们用于在line-height=height时来调节文字的垂直居中)
列表属性
1. list-style-type 调节列表前的标识
2. list-style-image 调节列表前的图片
3. list-style-position 调节列表前标识的位置
a) outside 在列表外面
b) inside 在列表内部
元素的分类
1. 行内元素
a) 在一行显示,不能自动换行
b) 不能设置宽高
c) 常见的行内元素有:a u s I del font span
2. 块级元素
a) 自动换行,独立占一行
b) 可以设置宽高属性
c) 每个块级元素的宽度默认都是父元素的宽度
d) 常见的块级元素:p h1-h6 ul ol dl li div
3. 行内块元素
a) 在一行显示,不能自动换行
b) 可以设置宽高属性
c) 常见的有:input image button
4. 元素之间的相互转化
a) display:block inline inline-block
div
组成的部分:content border padding margin
实际大小:content(width+height)+border+padding
border: 边框
a) border-color
b) border-style
c) border-width
d) border-left
e) border-right
f) border-top
g) border-bottom
padding 内边距
a) padding-left
b) padding-right
c) padding-top
d) padding-bottom
e) 缩写:
i. 一个值:上下左右
ii. 二个值:上下 左右
iii. 三个值:上 左右 下
iv. 四个值:上 右 下 左
margin外边距
a) margin-left
b) margin-right
c) margin-top
d) margin-bottom
e) 缩写:
i. 一个值:上下左右
ii. 二个值:上下 左右
iii. 三个值:上 左右 下
iv. 四个值:上 右 下 左
垂直外边距合并: 在垂直方向上,上一个盒子设置了下边距,下一个盒子设置了上边距,合并取最大值
垂直外边距塌陷:在子元素中设置margin-top,父元素也会随之移动:解决方式1.给父元素添加border属性2.给父元素添加overflow:hidden属性
浮动
标准流:标签元素在正常状态下呈现的形式,一般我们都称为标准流
浮动的作用:
1. 制作导航条
2. 网页的布局
3. 文字的环绕效果
浮动的特点:
1. 会产生脱标
2. 会发生元素转换
3. 不占位置
4. 同级元素之间一个发生浮动,其它的都要发生浮动
浮动的属性:float:left/right
清除浮动
在父元素没有设置高度而子元素又都发生了浮动,那么这个时候我们需要清除浮动产生的影响
清除浮动的方式:
1. 给父元素设置高度(通用性小)
2. 给父元素添加空标签,给标签添加clear(left,right,both,none)(麻烦,不建议使用)
3. 给父元素添加overflow:hidden属性(不建议使用)
4. 使用伪元素清除浮动:
.clearfix:after{
content:““;
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1; /* 兼容ie浏览器*/
}
元素的隐藏
a) overflow:hidden;(隐藏元素中溢出的内容,属性值还有:scroll,auto自动)
b) display:none; 隐藏当前元素;不占位置
c) visibility:hidden; 隐藏当前元素;占位置