什么是CSS:
级联样式表,简称为样式表
CSS作用:
----实现了将内容和表现分离
----提高代码的可重用性和可维护性
各元素使用统一的样式声明!
且提高了样式的重用性和可可维护性
使用CSS样式表:
内联方式: 定义在单个HTML元素中
语法:
--用“ ;”隔开多个属性
---属性和属性值之间:用 :连接
---多对属性之间用 ;隔开
内部样式表: 定义在HTML页的头元素中
外部样式表: 定义在外部的CSS文件中(.css)
在文档的<head>元素内添加 <link> 元素
样式优先级
就近优先
内联样式优先级最高,而内部样式表和外部样式表的优先级取决于定义的先后顺序,后定义的样式会覆盖先定义的样式,就近优先
各种选择器:
元素选择器:html的元素就是选择器
---比如: <p>, <h1>等
类选择器:
语法: .classNmae { color:red; }
可以将类选择器和元素选择器结合起来使用,以实现对某种元素中不同样式的细分控制
语法为: 元素选择器.className{}
id选择器:
语法: 选择器器前面加一个 # 号
选择器分组:
选择器声明为以逗号隔开的选择器列表 ,
----将一些相同的规则作用于多个元素
派生选择器:
通过依据元素在其位置的上下文 关系来定义样式
- 选择器一段包括两个或多个用空格分隔的选择器
伪类选择器:
伪类用于向某些选择器添加特殊的效果;
使用冒号(:)作为结合符,左边(其他选择器):右边(伪类)
如 a:link{}
常用的伪类:
---link
----active
----visited
-----hover
----:focus
样式单位:
in:英寸 pt: 磅
em: 1em等于当前的字体尺寸, 2em等于当前字体尺寸的两倍
RGB:rgb(255,0,0) 百分比:rgb(100%,0%,0%)
#rrggbb: 十六进制数,如 #ff0000
#rgb:简写的十六进制
尺寸:
width和 height
overflow:当内容溢出的时候如何处理:
---visible
----hidden
----scroll :总显示滚动条
---auto :1。不超出不显示 2. 文本内容超出尺寸时显示滚动条
如: <div class="auto"></div>
边框:
简写方式:
--border:width style color;
单边定义:
--border-left/rigth/top/bottom: width style color
框模型:
-----外边距:与下一个元素之间的空间量
--margin:value
单边设置:
margin-top/right/bottom/left:value
简写方式:
----margin: value1 value2 value3 value4
top right bottom left
---- 内边距: 内容与框线之间的距离
--padding:value
单边设置:
padding-top/right/bottom/left:value
简写方式:
----padding: value1 value2 value3 value4
top right bottom left
背景色:
background-color:
背景图片:
background-image
如:body{
background-image:url("image/bg_01.gif");
}
背景重复:
background-repeat
-------默认情况下,背景图像在水平和垂直方向上重复出现,创建一种称为“墙纸”的效果
background-repeat 可取值:
--repeat:在水平和垂直方向上重复,为重复值
--repeat-x:仅在水平方向重复
--repeat-y:仅在垂直方向上重复
--no-repeat:仅显示一次
背景定位:background-position
--background-position 属性改变图像在背景中的位置
该属性的取值为:
x% y%
x y
left:
center:
right:
top:
botom:
背景图片的固定:
background-attachment:
默认情况下,背景图片会随着页面的滚动和移动
可以通过设置 background-attachment 属性来设置
---默认是 scroll:默认情况,背景会随文档滚动
----可取值fixed:背景图片固定。常用于实现水印的图像