一、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)