一:CSS简介
a) Cascading Style Sheets层叠样式表(初级样式表)
b) 是一个文本文件,不需要编译,由浏览器直接执行。
c) 作用是定义网页的外观,诸如字体,背景,等。
d)可以配合 JavaScript 做出绚丽的效果。
二:CSS特点
a)精确的定位
准确到可以控制页面的任何元素
b)精细的控制
可以做到像素级别的调整
c) 样式与内容分离
便于维护,便于重用。
三:使用方法
1. 内联
写在标签内的 style 属性中的叫做内联
2,内嵌
写在 head 标签的 style标签属性中的属性叫做内嵌
3,外联
通过外部引入的方式使用
四:基础语法
1,CSS 格式
选择器
负责圈定范围,要修改的元素集合声明
声明
由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式
CSS 的组成
由选择器和一个或多个声明组成,多个声明之间用分号
选择器{属性名:属性值;属性名:属性值}
2:CSS 注释
样式表中的注释只有一种
/*这里是注释内容*/
注意:注释不能嵌套
3:单位
a) 长度单位
1 : em 倍数
2 : px(pixel)像素,屏幕上的最小单位,用于网页设计
备注:学习 CSS 只要知道这两种,其他了解即可。
b) 颜色单位
1 :英文名 red green blue 。。。
2 :十六进制 rgb #000000 ~ #ffffff
3 :rgb
数字 (0~255)rgb(255.0.0 )
百分比 ( 0~100% ) rgb(100%.0.0)
四 :URL 地址
1 . 不用引号 url(text.jpg)
2 . 绝对路径 url ( http://www.baidu.com/text.jpg)
3 . 用单或双引号 url("./text.jpg") url(‘./text.jpg’)
无 :选择器
1,html 选择器
就是使用 html 元素作为选择器
2, id 选择器
使用 id 值作为选择器
使用方法:# id 值{声明}
3.Class选择器
使用class值作为选择器
使用方式:.class值{声明}
例如:.butingke{color:red}
注意:不要轻易使用id选择器 请多使用class选择器进行选择!
2.关联选择器
通过一级一级的向下查找得到唯一使用选择器
每个选择器之间使用空格隔开
例如: ul #zhangsan b{color:red}
3.组合选择器
多个选择器组合在一起中间使用逗号分隔
例如:p,.pangzi{color:red}
4.伪元素选择器
a) :link 未访问链接
b) :hover 鼠标移动到链接上时
c) :active 鼠标选中的链接
d) :visited 已访问的链接