CSS——网页的美容师
1.HTML主要做结构,显示元素内容。
2.CSS美化HTML,布局网页。
3.CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离。
CSS语法规范
- CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
- 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现。
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
CSS代码风格
- 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和大括号之间保留空格
选择器分类
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器和通配选择器
常用的CSS选择器
元素选择器:h1,img,p
- 类选择器:className
id选择器:#id
通配符选择器:*
常见的CSS属性
- 字体大小:font-size
- 字体颜色:color
- 宽度:width
- 高度:height
- 背景色:background-color
- 文本水平居中:text-align
- 文本行高(垂直居中):line-height
选择器进阶(更多选择器)
- 层级选择器:selector1 selector2
- 组合选择器:selector1,selector2
- 伪类选择器(增加行为):selector:hover
- 伪元素选择器(增加元素):selector::before,selector::after
CSS2:伪类选择器和伪元素选择器都是一个冒号
CSS3:让伪元素选择器增加了一个冒号
选择器权重
相同选择器:后面的会覆盖前面的
不同选择器:ID(100)>CLASS(10)>element(1)
层级选择器:按权重累加计算
有关盒子模型的CSS属性
边框:border-width;border-style;border-color;
外边框:margin(-top\-right\-bottom\-left)
内边框:padding(-top\-right\-bottom\-left)
HTML元素的分类
块元素:可以设置宽度和高度,独立成行。h1——6、、p、div、ul、li
行内元素(内联元素、行级元素):不可以设置宽度和高度,不独立成行。a、span
行内块元素:可以设置宽度和高度,不独立成行img,input,button
display属性
block:转换为块元素
inline:转换为行内元素
inline-block:转换为行内元素
none:隐藏元素
浮动元素的特性:脱离文档流
空div清除浮动(clear:both)
.clear::after,.lear::before{
content:" ";
display:block;
clear:both;
}
去掉文字链接的下划线:text-decoration:none;