css
CSS学习笔记
一 CSS简介
CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。
语法： ①CSS属性和值之间用冒号分隔
②CSS属性之间用分号分隔（建议每个属性后都书写分号）
③CSS的值有多个的时候使用空格分隔
1 什么是CSS（what）
CSS是层叠样式表，不属于编程语言
CSS英文全称：Cascading Style Sheet，
2 CSS的作用是什么？
CSS是HTML的化装品，可以让HTML变的更炫酷，是专门来修饰HTML的
3 CSS在哪儿编写？（where）
CSS代码是嵌入在HTML中的，没有HTML代码，CSS代码是无效的
二 CSS在网页中的使用
1 内嵌式
每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式。如
<p style=""></p>
1
存在问题：①.不方便修改
②结构与显示不能很好的分离
③建议在测试或个别情况下使用
2 嵌入式
CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css
<head>
<style type="text/css"> css样式 </style>
</head>
1
2
3
3 外部引用时
可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变HTML文档。
<head>
<link rel="stylesheet" href="url" type="text/css">
或者
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
1
2
3
4
5
6
7
8
推荐使用第一种方式
三 CSS基本语法规则
选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
1
2
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
1
2
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
1
2
输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
1
猜谜底游戏：
你猜？
命名规范： 见附件（Web前端开发规范手册.doc）
命名是我们通俗约定的，但是没有规定必须用这些常用的命名。
课堂案例：
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
1
2
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
1
2
3
4
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
1
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
1
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
1
2
3
4
5
6
7
注意：
这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
1
链接伪类选择器
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结构(位置)伪类选择器（CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
1
2
3
4
5
6
7
2 选择器优先级
多个CSS选择器同时作用于同一个html时，声明不同的属性具有继承的关系，如果声明的是相同的属性，则以优先级高的为主。
*内嵌式 > 关联选择器(后代，子代，组合(且)) > ID选择器 > 类选择器 > HTML选择器*
同级别的后者覆盖前者 ， *就近原则*
3 样式
样式是零个或多个以分号分割的【属性名：属性值】列表
4 规则集
选择器 样式
选择器{属性名:属性值;属性名:属性值}
5 注释
/* 注释内容 */
四 CSS常见的样式属性和值
1 CSS 尺寸属性
(注意块级元素和行内元素的区别)
height 设置元素高度。
width 设置元素的宽度。
2 字体属性
font-family字体族科
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格（normal 正常;italic 斜体;oblique 倾斜）
font-weight字体加粗（ normal 正常;bold 粗体;bolder 更粗;lighter 更细）
text-decoration 规定添加到文本的修饰 ：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3 颜色
color 设定文本的颜色
opacity 设置透明度（ 所有浏览器都支持 opacity 属性）
注：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 一般两个属性一起写，保证兼容性。 filter:Alpha(opacity=50); opacity:0.5;
4 背景
background-color:#CCC；设置元素的背景颜色。
background-image ： 设置元素的背景图像。属性值url(“1.png”);
background-repeat ： 设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。（属性值：①fixed 固定 ②scroll 滚动）
background-position：设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字： left center right
纵向关键字： top center bottom
百分比：左上角是 0% 0%。右下角是 100% 100%。
background ： 简写属性在一个声明中设置所有的背景属性。如：background:#ff0000 url(‘smiley.gif’) no-repeat;
5 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
dashed 定义虚线。
none 定义无边框
…
如果4个值都给定了，分别应用于上，右，下,左。如：border-style: solid dashed dashed solid;
如果给定1个值，应用于各边; 如：border-style: solid;
如果给定2个值，第一个值应用于上下边，第二个值应用于左右边。如： border-style: solid dashed;
border-width 设置4个边框的宽度
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。如：order:1px solid #ff0000
6 鼠标光标属性
cursor 属性规定要显示的光标的类型（形状）。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
7 列表属性
list-style-image 将图象设置为列表项标记。 如：list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
在Firefox中的查看器中选中ul即可看出区别
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
list-style 在一个声明中设置所有的列表属性。如：list-style: square inside url(’/i/eg_arrow.gif’)
8 表格
优先级： td,th–>tr–>tbody,thead,tfoot–>table (从里向外的规则)
color,font-size
text-align 文字对齐
background
border 边框，只能用于table,th,td
margin 间距，只能用于table,caption
padding 内间距，只能用于th,td
width 宽，只能用于table,td,th
height 高，只能用于table,td,th、可以用于tr并且优先级高于td
caption-side 标题位置：top/left/right/botton
五 盒子模型
网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子
1 盒子模型
margin 外边距，定义区块外边界与上级元素距离的属性，值为长度
padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离
border 边框(注意边框是有内外俩条边界的)
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值：
1个：上下左右都是该值
2个：前者表示上下的值，后者表示左右的值
3个：前者表示上边的值，中间表示左右的值，后者表示下边的值
4个：上右下左，顺时针排序
2 不同浏览器解析盒子模型的差异
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin2+width
盒子占据的高度 = margin2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin2+border2+padding2+width
盒子占据的高度 = margin2+border2+padding2+height
盒子实际的宽度 = border2+padding2+width
盒子实际的高度 = border2+padding2+height
3 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
另外注意 !important 的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候，后者覆盖前者，当加上之后说明第一个,样式优先级更高，采用前者，但是Ie6不支持!important;
4 其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
5 关于填充和边框的常见问题
\1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0
\2. 相邻两个兄弟元素的外边框会发生合并，一般浏览器会自动设定他们的外边距(注意我们可以margin设置为负值)
\3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。(注意边框是有内外俩条边界的)
\4. 设置一个块元素居中： marigin:0 auto; （ 第一个表示top和bottom，第二个表示left和right）
\5. margin可以设置负值，padding不可以设置
\6. 行内元素的margin值，只有左右值，没有上下值
6 行内元素与块级元素
*行内元素*
行内元素不可以设置宽（width）和高（height【但是可以通过line-height设置】），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块级元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
IE6/7及IE8混杂模式中(当IE浏览器识别不了DTD就会显示成混杂模式)，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
改变元素类型：
display
可以将一个行级元素转换为块级元素，但是这种转换并不能改变元素本质，转换的只是CSS的盒子的外观
需要转换盒子类型的情况：
水平的列表菜单，不断行的标题，隐藏元素
none 隐藏元素。不会被显示，不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 兼有块级和行级元素特性，在行内显示但是可以设定宽高
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示。
table-header-group 此元素会作为一个或多个行的分组来显示。
table-footer-group 此元素会作为一个或多个行的分组来显示。
table-row 此元素会作为一个表格行显示。
table-column 此元素会作为一个单元格列显示。
table-cell 此元素会作为一个表格单元格显示。
table-caption 此元素会作为一个表格标题显示。
inherit 规定应该从父元素继承 display 属性的值。
float,position
应用了浮动和绝对定位的元素，变成了块级元素，因此display属性一般被忽略
如果元素应用了display:none，该元素（以及子元素）被隐藏起来，对其再使用float,position将不再有意义
七 定位 position
定位属性：
相对定位 relative: 参照元素原来的位置进行移动，元素原来的空间位不变，元素在移动时会覆盖其他元素。
*固定定位 fixed*: 将元素固定在窗口中的某个位置，绝对定位是相对于元素的，固定定位是相对于窗口的，会随着窗口的一定而移动。在低版本IE中不支持该属性
****绝对定位 absolute:****元素完全脱离文档流，页面中的其他元素视它不存在，绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级有定位属性的元素，如果父级元素没有定位属性，则会参照文档
**默认定位 static：**默认属性，指定了元素按照常规的文档流进行定位，静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素，为其他值时候为定位元素，因为static元素不能自定义元素的位置，而其他可以
top: 层距离页面顶点纵坐标的距离
left: 层距离页面定点横坐标的距离
text-align: 横向排列 left right center
line-height:行高，内容都在行的中间，可以使用这个属性设置内容垂直居中
z-index ： 第三个维度 ，值高的元素会覆盖值低的元素。该属性可以使得元素脱离文档流，可能会覆盖其他元素
浙公网安备 33010602011771号