1 . 样式表 Cascading Style Sheet
css优势:
-
内容与表现分离
-
网页的表现统一,容易修改
-
丰富的样式,使网页布局更加灵活
-
减少网页代码量,增加网页的浏览速度,节省网络带宽
-
使用独立于网页的CSS,有利于网页被搜索引擎收录
-
嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签
1.1 引入方式
四种
-
style=”” 行内样式表
-
<style> 内部样式表
-
<link rel=”stylesheet” href=”” /> 外部样式表 (使用最多)
-
<style>@import “”</style> 导入方式,尽量不要使用!!!
1.2 引入方式优先级
行内>内部>外部>导入
1.3 链接式和导入式的区别:
-
<link/>标签属于XHTML,@import属于CSS2.1;
-
使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示;
-
使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页中;
-
@import是CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的;
2. 选择器
2.1 哪几种选择器和它的优先级
ID选择器 # 一个HTML文档中只能有一个相同名字的ID
CLASS选择器 . 可以有多个
元素 p
通配符 *
2.2 选择器的优先级
ID > CLASS > 元素 > *
3 . 基本的几个样式(常用于文本,图片,列表)
background背景
1.background-color 背景色 (16进制数 rgb rgba 英文名)
2.background-image 背景图
3.background-size 背景大小 (像素、百分比)
4.background-repeat (repeat-x repeat-y no-repeat)
5.background-position (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
6.background-attachment 是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
7.background复合属性 可以把之前的属性定义在这一个里面,