一、CSS定义
-
CSS就是web标准中的表现标准，专门用来对网页标签进行布局和样式设定的语言
-
CSS又叫层叠样式表
二、CSS基本语法
1.结构：
- 选择器{属性: 属性值; 属性2: 属性值2; 属性3:属性名3....}
2.说明
-
选择器：用来选中确定设置样式的标签
-
{}：固定写法
-
属性：CSS提供的属性，共200多个
-
属性值：根据属性赋不同的值
三、CSS样式
1.内联样式
- 将样式表写在标签的style属性中 -- 样式只对一个标签有效
2.内部样式
- 将样式表写在head的style标签中 -- 样式只对当前HTML文件中的标签有效
3.外部样式
- 将样式表写在外部CSS文件中，然后在head中通过link标签导入 -- 样式可作用于所有HTML文件
四、选择器
1.元素选择器
-
将标签名作为选择器，选中指定的标签
-
用法：标签名{}
2.id选择器
-
将标签中的id属性的值作为选择器，选中指定的标签
-
用法：#id{}
3.class选择器
-
将标签中的class属性的值作为选择器，选中指定的标签
-
用法：.class{}
4.群组选择器
-
多个选择器用逗号隔开作为一个选择器，同时选中多个标签
-
用法：标签名1，标签名2{}
5.父子选择器
-
多个选择器用空格隔开作为一个选择器，按顺序依次往后找，选中最后一个选择器对应的标签
-
用法：标签名1 标签名2 标签名3{}
6.通配符
-
将*作为选择器，选中网页中所有标签
-
用法：*{}
7.选择器优先级
- 元素选择器< class选择器<id选择器 < 内联样式
五、标准流布局
1.标准流
-
块级标签是一个占一行，默认宽度是父标签的宽度，设置宽高有效
-
行内标签是一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽高无效
-
行内快标签是一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽高有效
2.块级标签
- h1~h6、p、hr、ol\ul\dl\li、table、tr、div
3.行内标签
- a、img、td、input、select、option、span
4.设置标签性质
-
display:block -- 将标签设置为块级标签
-
display:inline-block -- 将标签设置为行内标签
-
display:inline -- 将标签设置为行内标签
六、常用CSS属性
1.颜色
-
设置背景颜色(background-color)
-
设置字体颜色(color)
-
注:CSS中的颜色值
a.颜色的英文单词
b.#颜色值对应的6位16进制值（#ff00, #00ff00）
c.rgb(r,g,b) rgba(r,g,b,a);r,g,b的取值范围是0-255，a表示透明度，取值范围是0-1
2.文本（text / font）
-
文本的大小和字型(font-size / font-family)
-
斜体、粗体、大写和下划线(font-weight / font-style / text-decoration)
-
行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)
-
对齐(text-align)方式和缩进(text-ident)
-
链接样式（:link / :visited / :active / :hover）
3.盒子（box model）
-
盒子大小的控制（width / height）
-
盒子的边框、外边距和内边距（border / margin / padding）
-
盒子的显示和隐藏（display / visibility）
-
边框图像（border-image）
-
投影（border-shadow）
-
圆角（border-radius
4.图像
- 控制图像的大小（display: inline-block）
- 对齐图像(margin: 0 auto)
- 背景图像（background / background-image / background-repeat / background-position）
5.列表、表格和表单
-
列表的项目符号（list-style）
-
表格的边框和背景（border-collapse）
-
表单控件的外观
-
表单控件的对齐
-
浏览器的开发者工具
6.布局
-
相对定位（position：relative）
-
绝对定位（position：absolute）
-
固定定位（position：fixed）
-
浮动元素（float / clear）
网友评论