CSS学习笔记
理解CSS的概念
什么是CSS？
CSS层叠样式表，由W3C发布，版本CSS1.0 CSS2.0 CSS3.0（最新）
为什么用CSS？
- 提高页面浏览速度
- 缩短改版时间，降低维护费用
- 强大的字体控制和排版能力
- CSS非常容易缩写
- 更好的控制页面的布局
- 实现表现和结构、内容相分离
- 更方便搜索引擎的搜索
如何使用
那里写（如何引用CSS)
- 外部样式表
<link rel="stylesheet" href="css地址"></p>
- 内部（嵌入）样式表
<style type="text/css">
.p{
}
</style>
- 内联样式表
<p style="color:red"></p>
- 导入样式表（也属于外部样式）：导入式
<style type="text/css">
@import "css文件链接"
</style>
注：link与@import区别是什么？
<link/>标签是属于XHTML范畴的，@import是属于CSS2.1中特有的- 使用
<link/>链接的CSS是客户端浏览页面时先将外部CSS文件加载到网页当中，然后再进行编译显示 - 使用
@import导入的CSS文件，客户端在浏览器页面时是先将HTML结构呈现出来，再把外部CSS - 由于
@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说是无效的
怎么写（语法）
选择器
选择器{
属性：值；
}
-
标签选择器：
标签名{}
-
id选择器：同一个页面只能有一个
#id{
} -
类选择器
.类名{} -
通用选择器（页面中的所有元素）
*{}
优先级
行内 > 内部 > 外部
权重值计算：
-
id权重：100
-
类权重：10
-
标签：1
-
通用权重：0
注：当权重值相同时，后面的就会覆盖前面的
复合选择器
- 并列选择器
选择器1，选择器2，…{
} - 交集选择器
选择器1选择器2{
}
例：
p.txt{}
注：多个选择器中有标签选择器，标签选择一定要写在最前面 - 后代选择器
父选择器 子选择器{} - 子代选择器
父选择器>子选择器{}
基本属性
- 颜色：
- color：rgb(10%,50%,30%)
- color:rgb(66,99,66)
- color:#696
- 文字:
- font-famil:字体的类型
- font-style:字体的风格，normal正常，italic斜体
- font-weigth：字
体精细，可以是数字bold，light，100-700等 - font-size：字体大小：
单位：
- 相对单位（随着分辨率而变化）：
- px：像素，
- em:倍
- %：百分比
- 绝对单位：
- cm：
- mm：
- in：英寸
- font：复合属性
font:[font-style],[font-weigth],[font-size],[font-famil]
注：属性可省略但是顺序不可变
- 文本属性
- color:字体属性
- text-transform：英文的大小写转换
- capitalize：首字母大写
- uppercase：全部大写
- lowercase：全部小写
- text-align：文本水平对齐left right center（操作文字
- text-indent：文本缩进
- line-height：行高
- height：高度注：高度与行高相同时，可以实现单行文本垂直居中
- width：宽度
- text-decoration：文本修饰：none，underline，overline，line-through（删除线）
- vertical-align：文本垂直对齐：top，bottom，middle注：这个属性只有单元格可以使用，使用display：table-cell
- letter-spacing：设置单词内部的字母间距
- word-spacing：单词之间的距离
- 边框属性
- border-width：
一个值：四边相同
两个值：上、右，没有指定的边，取对边的值
三个值：上、右、下（左取对边的值）
四个值：上、右、下、左 - boder-style：边框样式
solid：实线 等 - border-color：边框颜色red #666
- border：复合属性
顺序：宽、样式、颜色
e.g:border:1px solid red - border-left：1px solid red
- border-right:1px solid red
- 背景
- background-color：
- background-image：背景图片
- background-repeat：背景图片是否重复
- background-position：背景图片的位置
- background-attachment：背景固定
- background：复合属性
background
- 列表
- 文字与图片的对齐：
默认图片与文字以底部对齐
通过给图片设置vertical-align：middle，使用文字与图片居中对齐
通过给图片设置float：left、right，使文字与图片以顶部对齐 - 浮动float
- 文档流：html元素，它的排版方式，从上到下，从左到右
- 浮动的影响浮动后的元素，向上移动了
- 浮动的元素与下面的向上移动的元素，发生了重叠，但是元素内的内容（即内联元素），不会被覆盖，它会见隙插入显示
- 使父元素高度塌陷
- 原理：给元素设置float后，元素脱离标准文档流，进行左右浮动，紧贴当前的位置，浮动元素之后的标准元素就向上填充。
块级元素直接向上，内联元素如果有重叠，不允许重叠显示。
浮动元素也有它的排版方式，称之为浮动流（浮动层）。
注：浮动层只有一层
浮动层排版：从左（右）到右（左），从上到下 - 清除浮动带来的影响
clear：both left right
需要创建一个空的div标签来清除浮动
相当于把浮动元素的高度也算在盒子的高度里
- 扩展盒子的高度（清除浮动的影响）
- clear属性清除浮动
- 为塌陷的父元素设置高度
- 让父元素与子元素一起浮动（不推荐）
- 为父元素设置overflow属性（visible这个属性不行）
- overflow属性：溢出处理（隐藏功能：扩展父元素高度）
hidden（隐藏） visible（显示，默认值） scroll（滚动） - clear和overflow区别
clear：任何时候都可以使用，但是会添加一个新标签
overflow：减少了空标签，提高页面的性能，但是overflow不能用于绝对定位的元素进行高度扩展 - 伪类
超链接伪类的顺序
未点击
已访问
鼠标悬停
激活
注：hover与active其他元素也具有这个伪类 - 浮动的应用
- 布局
- 导航
清除浮动
- clear(必须是块级元素）
- :after(必须是块级元素）
- 在要清除浮动的位置添加
<br>
盒模型
- 盒子属性
border：边框
margin：外边距
值：长度单位 百分比 负值 auto
注：margin左右设置成auto，能实现块级元素居中（必须设置块级元素的宽度）
padding：内边距
一个值
两个值
三个 - 盒子尺寸的计算
标准模式：总宽度=内容宽（设置的宽度） + padding左右+border左右+margin左右
怪异模式：总宽度=设置的宽度（内容宽度+padding左右+border的左右）+margin左右 - margin合并：垂直方向的margin会合并（取最大值）
当子盒子设置margin-top时，如果子盒子与父盒子之间没有任何填充物（padding，border，内容就会出现子盒子的margin-top作用到父盒子的margin-top
解决：父盒子与子盒子之间添加填充物（不好的解决方案）
更好的方案（了解问题是使用margin还是padding）
html元素类型
| 是否独占一行 | 能否设置宽和高 | 垂直方向的外边距 | |
|---|---|---|---|
| 块级元素 | 是 | 能 | 能 |
| – | – | – | – |
| 内联（行内）元素 | 否 | 不能 | 不能 |
| – | – | – | – |
| 行内块级元素 | 否 | 能 | 能 |
行内块级，在一行显示，但可以设置宽高，如：img
注：设置浮动，绝对定位的元素，会变成行内块级元素
定位
position：
四个值
- static：默认值，没有定位
- relative：相对定位（没有脱离标准文档，在原来没有设置定位时的位置，进行偏移，到达新的位置，对于其他的元素不影响，浮动元素也一样。相对与它本身）
- absolute：绝对定位
脱离标准文档流，以离他最近的已经定位“祖先”元素，如果没有找到已经定位的祖先元素，就以当前的窗口，进行定位 - fixed：固定定位（根据浏览器窗口，会脱离文档流）
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
