粉阿吉整理(2)之------CSS
本姑凉已掌握的css基础整理
CSS
层叠样式表，简称为样式表，全称是Cascading Style Sheets
1. CSS样式表应用到HTML的3种方式
-
内部样式表
用插入到HTML文件头部注意：内部样式表必须定义在
之间，页面所有样式都可以写在之间 -
外部样式表
需要创建一个CSS文件，然后通过link链接到HTML文件头部
*link:
<link rel='stylesheet' href='样式表路径及全称' type='text/css' />
注意：
rel=‘stylesheet’ 指这个 link 和其href 之间的关联样式 为 样式表文件
type=‘text/css’ 指文件类型是 样式表文件
@import:
<style type='text/css'>
@import url('样式表路径及全称');
</style>
link和import引入的区别
- 老祖宗的差别，link属于xhtml标签，@import完全是css提供的一种方式，只能加载css，link标签除了能加载css还可以做很多其他的事情，比如定义RSS、定义rel连接属性等
- 加载顺序的差别，当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面被全部下载完再被加载，所以有时候@import加载css的页面时开始会没有样式
- 兼容性的差别，@import是css2.1提出来的，所以老浏览器不支持，@import只在IE5以上的才能识别，而link没有此问题
- 使用dom控制样式时的差别：当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
-
内联样式表 （行间样式、行内样式、嵌入式样式）
语法：
<标签 style="属性:属性值; 属性:属性值"></标签>
例如：
<div style="width:599px; height:208px; background:red"></div>
样式表的作用域
行内样式的作用域是当前标签，
内部样式的作用域是当前文件，
外部样式表的作用域是所有关联的所有文件。
内嵌样式表的优先级别最高。内部样式表和外部样式表的优先级，跟他们的先后顺序有关，谁在后面谁优先。
2. CSS样式语法
CSS样式由两部分组成，分别是选择符和声明。
声明由属性和属性值组成，所以css语法 ：选择符{属性：属性值;}
-1- 选择符
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。大概有十种左右
1. 类型选择符
语法：标签名称 {
属性：属性值;}
用法：CSS:p{
color:red}
说明：使用类型选择符统一页面中某个元素的显示样式时，使用类型选择符
2. Id选择符
语法：#id名 {
属性：属性值；}
用法： CSS: #top{
font-size:12px;color:blue}
HTML: <div id='top'></div>
说明：Id选择符可对元素进行一个ID名称的指派。id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。
3. 类（class）选择符
语法：．类(class)名 {
属性：属性值；}
用法：CSS: .txt{
font-size:12px;color:blue;background:red}
HTML:<div class='txt'>111</div>
<div> 222</div>
<p class='txt'>333</p>
4. 通配符
语法：* {
属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。
用法：常用来重置样式。
*{
margin:0; padding:0} //取消外边界和内填充，css文件先写这个
Margin:0 auto; //使元素居中（谁居中给谁加）
5. 群组选择符
语法：选择符1，选择符2，选择符3… {
属性：属性值；}
说明：对一组元素进行相同的样式指定，
用法：CSS:h1,h2,h3,p{
font-size:12px;color:blue;}
6. 包含选择符
语法：父元素 子元素 …… {
属性：属性值；｝
说明：包含选择符指选择符组合中前一标签包含后一个标签，之间用空格空开。
利用包含选择符可以减少使用class及id的设置,并且直接对所需要设置的元素进行了样式设置。
7. 子选择符
语法：父元素>子元素 {
属性：属性值；｝
说明：不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
用法：
CSS: <style type="text/css">
div span{
color:#C3F;}
div>span{
color:green;}
</style>
HTML： <div>
<p>zhe
<span>li</span></p>
<span>shi</span>
</div>
8. 伪类选择器(伪类选择符)
语法： a:link {
属性：属性值;}超链接的初始状态;
a:visited {
属性：属性值;}超链接被访问后的状态;
a:hover {
属性：属性值;}鼠标划过超链接时的状态;
a:active {
属性：属性值;}即鼠标按下时超链接的状态;
说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，
正常顺序为：`lvha`：a:link,a:visited,a:hover,a:active, 错误的顺序有时会使超链接的样式有些部分失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
常用：表示超链接的三种状态都相同，只有鼠标划过变颜色。
a{
color:red;}
a:hover{
color:green;}
9. 注释
html <!--注释内容-->
css /*注释内容*/
10.伪元素选择符 见文末
-2- CSS属性和作用
CSS组成：选择符+声明(属性+属性值)，选择符上面已经介绍过了，下面看看属性吧
属性：
属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性属性值：
属性值包括法定属性值（颜色英语）及常见的数值加单位，如25px，或颜色值等。
声明语句：
声明语句必须要包含在{ }号之中；
如果一个属性有多个值，则每个属性值之间用空格分隔开。
当有多个属性时，用“；”进行区分；
在书写属性时属性之间使用空格、换行等，并不影响属性的显示；
2.1 字体属性
1. font-size：
设置字体大小： 网页的字体大小默认为16px，即 1em
默认情况：1em=16px,0.75em=12px;
单位还可以是pt，9pt=12px; 常用单位是px
例：body{
font-size:12px;}
//使用绝对大小关键字
// xx-small=9px x-small=10px small=13px medium=16px large=18px x-large=24px xx-large=32px
2. font-style：设置字体正斜风格：设置字体正常/斜体语法： font-style：normal/italic/oblique
3. font-weight：设置字体加粗：设置字体正常/加粗语法： font-weight：normal/100-900/bold/bolder（不加单位）
4. font-family：设置字体样式名称：例如： .nav{
font-family: "幼圆" , "微软雅黑" , "黑体" ;}
1、当你的字体为汉字时，需加双引号。
2、当你的字体为一个单词组成时，不需要加双引号。
3、当你的字体为多个英文单词组成时，需要加双引号。
4、标点符号必须为英文状态。
5、当一段代码已经使用过双(单)引号之后，里面只能使用单(双)引号
6. text-align：设置水平对齐： 语法：text-align：left/right/center/justify
7. line-height：设置行高、设定行距。值为数值或倍数。文字一定会出现行高的（值）最中间
8. 单行文本水平垂直居中：text-align:center;line-height:(容器(父元素)高度）行高=容器高度
9. vertical-align：设置垂直对齐： vertical-align:top/bottom/middle; 只针对内联块元素有用
10. text-decoration：设置文本划线。值有：none/underline/overline/line-through
// none:没有修饰 underline:添加下划线 overline:添加上划线 line-through:添加删除线
11. text-indent：设置文本缩进。值为数值，常用单位有px
// 1）text-indent可以取负值；2）text-indent属性只对第一行起作用。
12. letter-spacing：设置文本字间距，控制英文字母或汉字的字距。
13. word-spacing：控制英文单词词距
14. text-transform 大小写切换 none 默认。定义带有小写字母和大写字母的标准的文本。
15. capitalize 文本中的每个单词以大写字母开头
16. uppercase 定义仅有大写字母 lowercase 定义仅有小写字母
17. font-variant：normal/small-caps/inherit 小型大写字母 规定从父元素继承 font-variant 属性的值
文字属性的缩写
用法：font：weight style size/ line-height family; //粗斜大高体
注意： 文字缩写属性必须要在font-size和font-family同时存在时才会生效
其中font-weight 和font-style没有会使用缺省值。
font-size和line-height必须以"/"(反斜杠)连接。
文字属性的简写必须按照此顺序。粗斜大高体
文本颜色
用法：`color : 颜色值` ; （没有font）
用十六进制表示颜色值：
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#”:#ff0000/#f00
2.2 布局属性
宽度属性（width）: 值为数值，单位为px/%，宽度不写默认为100%；
高度属性（height）: 值为数值，单位为px/%，高度不写就没有高度，其高度是内容撑出来的高度
》如果继承的是body和html, 需要先写上：html,body{
height:100%;}
2.3 列表属性
定义列表符号样式：
1)list-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；
2)使用图片作为列表符号：list-style:url('../img/123.jpg');
3)定义列表符号位置：list-style-position:outside/inside;
》简写： list-style:none;
2.4 背景属性
为元素设定背景色：background-color
为元素设定背景图：background-image
写法：.nav{
background-image:url(背景图片的地址及全称)}
背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。
1.背景重复属性 background-repeat 和背景图搭配使用，设置背景图是否平铺
值有：repeat/repeat-x/repeat-y/no-repeat
2.背景定位属性 ：background-position 和背景图搭配使用，设定背景图片显示的位置
通过方向或者数值来设置： Left top ; 0px 0px
》注意事项： 第一个值是水平位置，第二个值是垂直位置，默认值是左上角 0 0。（50% 50%中心位置）
如果仅规定了一个值，另一个值将是50%。 如果您仅规定了一个关键词，那么第二个值将是"center"。
3.背景附着属性 ：background-attachment 和背景图搭配使用，设定图片是否跟随内容滚动
值：scroll/fixed
4.背景简写属性 background: 背景属性的综合属性
语法：background:背景颜色 背景图像 背景位置 背景重复 背景附着 (空格分开)
例如：background:#f00 url(img/tu.jpg) right no-repeat fixed;
2.5 浮动属性
浮动的框可以向左或向右移动，语法：float:none/left/right 全部浮动会在一行 只有一个浮动就会重叠
清除浮动
规定元素的哪一侧不允许其他浮动元素，语法： clear: left/right/both/none
none：默认值，允许浮动元素出现在两侧
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素。(clear和float浮动方向保持一致 才生效)
both：在左右两侧均不允许浮动元素。
高度塌陷
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（浮动元素父元素高度自适应）
hack1：给父元素添加声明overflow:hidden;(原因 bfc)
hack2：在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3：万能清除浮动法 选择符 :after{content:“.”;display:block; clear:both; height:0; overflow:hidden; visibility:hidden ;}
2.6 盒模型
构成
margin：类似 快递和快递之间的距离
border：类似 快递盒
padding：类似 填充物
content：类似 买的东西
填充属性
内间距\内补丁、内边距
css盒模型属性 — 边距属性 margin
设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。
margin属性值的4种方式：
- 四个值：上、右、下、左
- 三个值：上、左右、下
- 二个值：上下、左右
- 一个值：四个方向
padding加给父元素，margin加给子元素
css盒模型属性 — 内边距属性padding
1.设定元素内容到元素的边缘(边框) 之间的距离
2.设定子元素与父元素的位置关系
说明：
padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的。
padding属性值的4种方式：
- 一个值：上下左右
- 两个值：上下、左右
- 三个值：上、左右、下
- 四个值：上、右、下、左
css盒模型属性 — 边框属性border
-
边框属性 border
语法：border : 边框宽度 边框风格 边框颜色
例如：border : 5px solid #f00; border : solid 1px yellow; -
边框风格 border-style : 风格不写，整个边框不显示。别的不写，会默认缺省值。
值有 : none（无）/solid(实线)/dotted(点划线)/dashed（虚线）/ double双线 -
边框宽度 border-width : 设定边框宽度，数值，单位为px 边框颜色 border-color : 设定边框色
-
边框类型：groove3D凹槽边框、ridge3D垄状边框、inset outset3D边框（都取决于边框颜色）
给父元素下第一个子元素添加margin-top之后，浏览器会默认给父元素，把整个父元素都带下来
//margin-top的三种解决办法
1.给父元素添加 overflow:hidden
2.给父元素添加盒模型相关属性，比如 border:solid 1px
3.给其中一个元素浮动 float:left
可写负值的属性
- text-indent
- background-position
- margin
- z-index
盒模型补充
- margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。
- margin可以定义负值，border和padding不支持负值。
- 如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。
- 每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。
浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看作是最大的盒子。
盒模型尺寸计算
.box{
width:200px;
height:200px;
padding:20px;
border:solid 1px;
margin:20px;
}
/**占空间
*宽=width+左右padding+左右border+左右margin
*高=height+上下padding+上下border+上下margin
* 200+20*2+1*2+20*2=282 真正计算的时候是没有margin的
*/
2.7 CSS权重
4位的数字来表示权重,权重的表达方式：如0,0,0,0
| 选择符 | 权重 | 选择符 | 权重 |
|---|---|---|---|
| 类型选择符 | 0001 | 类(CLASS)选择符 | 0010 |
| ID选择符 | 0100 | 子选择符（E>F） | 0000 |
| 属性选择符 | 0010 | 伪类选择符 | 0010 |
| 伪元素选择符 | 0001 | 包含选择符 | 包含的选择符权重值之和 |
| 内联样式 | 1000 | 继承的样式 | 0000 |
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
!important 作用是提高指定CSS样式规则的应用优先权
- 层叠与权重的关系：
- 层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠；
如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。
2.8 文本溢出
溢出属性（容器的） overflow : visible/hidden(隐藏)/scroll/auto(自动)/inherit
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
Inherit：规定应该从父元素继承;
overflow 属性值(ie浏览器不支持此属性值).
空余空间 white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)；
pre-line:合并空隔符，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)
文本溢出 text-overflow : clip/ellipsis
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记;
text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义。
要实现溢出时显示省略号的效果还需先定义: display:block 再规定：
1.容器宽度： width:value
2.强制文本在一行内显示：white-space:nowrap
3.溢出内容为隐藏： overflow:hidden
4.溢出文本显示省略号：text-overflow：ellipsis
2.9 元素类型
根据css显示分类,HTML元素被分为两种类型 : 块状元素，内联元素。
块元素 (block element)— block
1.默认独占一行
2.没有宽度时，默认撑满一排（块状元素默认宽度为100%）
3.可以定义自己的宽度和高度
4.常见的块状元素有：div ul li h1-h6 p ol dl form table
内联/行内元素 (inline element)— inline
1.多个内联元素可以同一行显示
2.高和宽由内容撑开
3.写不上宽高
4.不支持上下的margin 不支持margin 可以用行高
5.常见的内联元素有：a br strong em span 图片和表单控件
内联/行内块元素
1.内联块元素、行内块元素img, input等。
2.多个元素可以在同一行显示，可以设置width/height属性的这类元素
3.只有这一个元素类型支持vertical-align属性
4.内联块元素他们区别一般inline元素：
常见的img、input、select、textarea(多行文本域)、button等有内在尺寸。
可变元素、替换元素、可替换元素
1.需要根据上下文关系确定该元素是块元素或者内联元素
2.直接写上是没有任何作用的，所显示的内容需要浏览器根据元素的属性去判断：(比如src type）
3.常见的元素：img input textarea audio video
元素类型的转换display
盒子模型可通过display属性来改变默认的显示类型
display：block/inline/inline-block/none/list-item/table-header-group/table-footer-group…
作用：该属性设置或检索对象元素应该生成的盒模型的类型。
各属性值的作用
1)Block 块状显示：使内联元素具备"块属性标签"的特性
2)inline 内联显示：使行块属性标签具备"内联元素"的特性
3)Inline-block 行内块元素显示：元素的内容"以块状显示，并且与行内的其他元素显示在同一行", 支持宽高,
没有宽度的时候由内容撑开宽度, 只有这一个元素类型"支持vertical-align属性（img,input）"
4)none: 此元素不会被显示
5)list-item: 将元素转换成列表, li的默认display类型
6)当"元素设置了float"属性后，就相当于给该元素加了"display:block"属性,且宽度为内容撑出来的宽度。
2.10 透明属性opacity:value
(value的取值范围0-1,0.1,0.2,0.3-----0.9)，缓慢出现缓慢消失必须用这个
2.11 Visibility属性
visibility:hidden/visible 隐藏/可见
visibility:hidden 和 display:none 以及 opacity的****区别
元素消失，不占位置 display:none
元素消失，占位置 visibility:hidden opacity:0
元素显示 display:block visibility:visible opacity:1
-3- Banner扩展
收集了3种banner扩展方法
NO.1
HTML:
<div>
<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>
<div class="partner"></div>
CSS:
.banner{
height:457px;
background:pink;
}
.banner img{
margin-left:-147px;
}
NO2.
HTML:
<div class="wrapbanner">
<div class="banner">
<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>
</div>
CSS:
.wrapbanner{
height:457px;
background:pink;
}
NO3.
HTML:
<div class="banner" style="widt:100%;height:457px" >
<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>
-4- 水平垂直居中
4.1 图片水平垂直居中
1. 水平居中 text-align:center
2. 垂直居中
（1）写一个空标签span当做参照物
（2）span的宽度为0,高度100%,转成inline-block类型
（3）span写上vertical-align：middle以中线对齐
（4）img图片写上vertical-align：middle 以中线对齐
4.2 元素水平垂直居中
1.水平居中 margin:0 auto
2.水平垂直居中
// 四种方法，前两种不用知道宽高，后两种需要知道宽高
-5- 定位属性position
语法：position：static/relative/absolute/fixed／sticky/unset/initial/inherit
检索对象的定位方式
取值：
1、static：默认值，无特殊定位；
2、relative：相对定位 `right:`; `top:`; `left:`; `bottom:`;
// 1.占位置 2.根据原来的位置进行移动 相对自己原来的位置偏移
3、absolute：绝对定位，将对象从文档流中拖离出来，使用`left/right/top/bottom`等属性相对其最接近的一个
并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，
// 1.脱离文档流 2.不占位置 3.根据父元素（参考物）进行位置移动而其层叠通过z-index属性定义；
4、fixed：固定定位
5、sticky(粘性定位)
(1)在sticky元素到达 距离相对定位的元素顶部50px的位置时固定，不再向上移动。
(2)让sticky属性生效的条件有以下两点：1.一个是元素自身在文档流中的位置 2.另一个是该元素的父容器的边缘
6、Inherit： 继承
initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）
7、unset：unset 关键字我们可以简单理解为不设置。
// 其实，它是关键字 initial 和 inherit 的组合。
(1)如果该属性是默认继承属性，该值等同于 inherit
(2)如果该属性是非继承属性，该值等同于 initial
这里罗列一下默认为inherited:Yes的属性
包含块的概念及作用
`包含块是`绝对定位的`基础`，包含块就是为绝对定位元素提供坐标，偏移和显示范围的`参照物`；
1、父元素上面`没有`定位属性，根据html进行位置移动
2、父元素上`有`定位属性，找最近的一个含有定位属性的父元素进行位置的移动 、
`定义`元素为`包含块`： `给绝对定位元素的父元素`添加声明`position：relative`；
如果我们的父元素设置了`position:absolute`;那么子元素也会相对父元素来定义自己的位置。
定位元素 — 层叠属性
z-index : auto | number检索或设置对象的层叠顺序。
auto: 默认值，遵从其父对象
number: 无单位的整数值，可为负数
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。
-6- 命名锚点链接
定义：在同一页面内的不同位置进行跳转。
命名锚点链接的应用：
1)给元素定义命名锚记名 语法：<标签 id="命名锚记名">
2)命名锚记连接 语法：
扩展
flash-7- 补充 — 伪对象/伪元素选择符
1）: after 与content属性一起使用，定义在对象后的内容
div:after{
content:url(logo.jpg);}
div:after{
content:"文本内容";}
2）: before 与content属性一起使用，定义在对象前的内容。
如 div:before{
content:"在其前放内容";}
3）: first-letter 定义对象内第一个字符的样式。
4）: first-line 定义对象内第一行的样式。
说明： *(该伪元素只能用于块级元素。) *ie6以下版本浏览器不支持伪对象选择符。