css知识点1小总结
注意：建议有css基础
1.引入CSS样式
1.行内式
- 其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
- 案例：
青春不常在，抓紧谈恋爱
- 注意：
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
- 缺点：
没有实现样式和结构相分离
2 内部样式(内嵌样式)
- 其基本语法格式如下：
- 注意：
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
- 缺点：
没有彻底分离
3.外部样式(外链式)
- 其基本语法格式如下：
4 导入式
- 其基本语法格式如下：
@import url("css文件路径");
比前两中好，但一般就用第三种，因为这一种你可能都是第一次见
5 三种样式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
css 基础选择器
1.标签选择器
- 语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用：
标签选择器 可以把某一类标签**全部**选择出来 比如所有的div标签 和 所有的 span标签
- 优点：
是能快速为页面中同类型的标签统一样式
- 缺点：
不能设计差异化样式。
2 类选择器
- 语法：
- 优点：
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
- 注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
- 给标签指定多个类名，从而达到更多的选择目的。
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
蒙多
压缩
复仇之矛
圣枪游侠·奥巴马
3 id选择器
- 语法格式如下：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素
- 用法基本和类选择器相同。
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
- id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
- 类选择器我们在修改样式中，用的最多。
- id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。
4. 通配符选择器
语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
注意：常用类选择器， 少用其他三种
一，常用样式-字体样式
font-size:大小
font-family:字体
列子：
p{ font-family:"微软雅黑";}
font-weight:字体粗细
代替了html中的b 和 strong 标签
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
font-style:字体风格
代替了 i 和 em 标签 没说禁止（上下同）
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
简写：
选择器 { font: font-style font-weight font-size/line-height font-family;}
二，常用样式-外观样式
1 color:文本颜色
-
作用：
color属性用于定义文本的颜色，
-
其取值方式有如下3种：
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
注意
我们实际工作中， 用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色
2.text-align:文本水平对齐方式
-
作用：
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
-
其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
-
注意：
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
尺寸单位
单位为px
width : 宽高
height： 高度
3 line-height:行间距
-
作用：
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
-
单位：
- line-height常用的属性值单位有三种，分别为像素px，相对值rem,em和百分比%,vh,vw，实际工作中使用最多的是像素px
-
技巧：
一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;
4 text-indent:首行缩进
-
作用：
text-indent属性用于设置首行文本的缩进，
-
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
5 text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
CSS 三大特性
1 层叠性
所谓层叠性是指多种CSS样式的叠加。
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠
2 继承性
-
概念：
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
- 注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
3 CSS优先级
继承权重为 0 < 标签为 1 < class 10 < id 100<行内 1000 < !important 无穷大
复杂选择器
- 后代选择器 空格
- 子代选择器 大于号
- 兄弟选择器 加号
- 群组选择器 逗号
- 伪类选择器 hover 当鼠标移入标签时的样式
a 标签的链接样式：
:link
:hover
:active
:visited
Document
span
谁再问就是傻子
结果：
1. 盒子模型
概念：把每个标签当成一个纸盒看待，每个标签就会存在边框，内容，内边距，外边距
特点：
盒子模型是由内容（width,height）,边框，内边距，外边距组成
盒子本身的文字和图片等元素就是内容区域
盒子的厚度就是边框
盒子内容于边框的距离就是内边距
盒子与盒子之间的距离就是外边距
1.1 边框样式 border
border-width 定义边框粗细，单位px
border-style 定义边框样式
可选值：none 默认值，没有边框
solid 单实线 常用
dashed 虚线
dotted 点线
border-color 定义边框颜色 默认为黑色
border-radius 边框圆角
边框的简写
border : border-width border-style border-color
1.2 内边距 padding
盒子的边框到内容的距离就是内边距
padding-left
padding-right
padding-top
padding-bottom
单位都是数值设定距离
1.内边距会使盒子变大
内边距的简写
padding : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
1.3 外边距 margin
盒子的边框到内容的距离就是内边距
margin-left
margin-right
margin-top
margin-bottom
单位都是数值设定距离
外边距的简写
margin : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
1.4盒子模型的常见问题和解决方案
-
块级级盒子水平居中问题
必须满足的条件指定了宽度，将这个盒子左右margin设置为auto -
文字居中和盒子居中
行内元素，行内块元素，文本在水平方向居中对齐text-align:center
跨级元素在水平方向居中对齐margin:auto -
清除元素的默认内外边距（重要）
自带内外边距的标签：ul li ol dl dt dd p body
为了更灵活方便的控制网页的标签
*{
margin:0;
padding:0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
- 边距塌陷（外边距重合问题）
使用margin定义块元素的垂直外边距，可能会出现边距塌陷问题
①相邻块元素垂直外边距合并
当上下的两个块元素相遇时，如果上面的元素设置了margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直外边距不是margin-bottom+margin-top之和
取两值中的较大值作为中间的外边距，这种现象被称为边距塌陷
解决方案：尽量只给一个盒子设置margin
②嵌套块元素垂直外边距合并
对于两个嵌套关系的块元素，如果父元素没有上内边距和边框
父元素上外边距会和子元素上外边距发送合并，合并后的外边距时两者中较大值
**
解决方案：1.给父元素边框
2.给父元素内边距
3.给父元素overflow:hidden;
**
1.5 盒子模型的稳定性
优先使用 宽度width > 内边距padding > 外边距margin
- margin会有外边距合并问题，ie6下面的margin会有一个边距加倍的bug
w3c标准盒子模型中的宽高度计算：
宽度 = width + 左右border-width + 左右padding
高度 = height + 上下border-width + 上下padding
ie盒子模型（怪异盒模型）
1. 标签分类
-
行内标签
特点：和其他行内标签在同行显示，不支持宽高（css样式）
比如：a,b,s,u,i,font,sub,sup,span
-
块级标签
特点：独占一行，支持宽高（css样式）
比如：h1~h6,p,hr,div,li,ul,ol,dl,dd,dt
-
行内块标签
特点：同行显示，支持宽高
比如：img