CSS技术特点重点知识归纳总结
1 CSS 入门
CSS是层叠样式表（Cascading Style Sheets）：用来定义网页的显示效果。
作用：把样式添加到HTML中，为了将网页内容与显示相分离。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。
一个HTML元素可以被不同位置的样式进行修饰，多个样式根据一定规则层叠为一个。
div与span的区别：
相同点：都是空元素，即占位符。（空元素：就是单独在页面上插入此元素，不会对页面产
生影响的元素；都能处理任意大小的片断；都没有对标签内的内容进行任何格式化
渲染，主要用于应用样式表。）
不同点：DIV是块元素，可自动换行。（块元素：以另起一行开始渲染的元素）
SPAN是行内元素(也译作内嵌元素) ，不能自动换行。（行内元素：不需另起一行）
注：通过display:block可以使任意元素变成块元素
小结：
块级标签：div h1-h6 dl ol ul li table tr
行内标签：span font a td input
2 CSS与HTML的结合方式
2.1 内部关联
内联样式、style属性的方式：利用标签中style属性来改变每个标签的显示样式。
即在stytle 属性中写css代码。
如：<div style="css代码">黑马</div>
<pstyle="background-color:#FF0000;color:#FFFFFF">
p标签段落内容。
</p>
特点：该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2.2 内嵌的方式
内嵌方式：在head标签中加入style标签，在style标签中书写css代码。对多个标签进行统一修改。
格式：
<head>
<style type=”text/css”>
/* 注释 */
p { color:#FF0000;}
</style>
</head>
特点：该方式可以对页面的样式进行统一设置，但对于局部不够灵活。
如果多个页面样式相同，代码也不复用。
2.3 链接外部样式表
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
格式：<linkrel="stylesheet" type="text/css" href="url" />
例：
<linkrel="stylesheet" type="text/css" href="css_3.css"/>
<linkrel="stylesheet" type="text/css"href="http://www.itheima.com/css_3.css" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
也可以用来联接互联网上的样式文件。
2.4 CSS样式引用优先级
1 内联样式（在 HTML 元素内部style属性）
2 内嵌样式表（位于 <style> 标签内部）
3 外部样式表（用<link 联接外部样式表）
4 浏览器缺省设置
样式引用优先级： 1> 2 > 3 > 4
优先级总结：由下到上，由外到内。优先级由低到高。
3 CSS选择器
3.1 标签名选择器
标签名选择器：CSS通过标签名称设置样式——定义通用属性
例如：
body{
color: blue;
}
3.2 类选择器
class选择器：选择器的名称需要. 开头，名称应用在标签的的class属性中——类别区分
例如：
css样式
.hello { ...}
html代码
<h1 class="hello"> ... </h1>
特点：可以让不同的标签显示相同的效果，也可以让相同的标签显示不同的效果。
3.3 ID选择器
id选择器：选择器的名称需要 # 开头，名称应用在标签的id属性中——针对元素
例如：
css样式
#itcast { ... }
html代码
<span id="itcast"> ... </span>
3.4 选择器扩展
1 派生选择器----->层层递进关系，更深入
派生选择器：依据元素在其位置的上下文关系来定义样式。
上下文关系及父子标签，使用空格分隔
通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁
例如：
html代码
<ul>
<li>
css样式
ul li { ...} 给标签<ul>下面的<li>标签设置样式
2 组合选择器----->并列关系
组合选择器：对多个不同选择器使用相同样式
例如：
css样式
p,div { color:#FF0000;}
html代码
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
3 伪元素选择器
伪元素选择器：其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。主要针对a标签。
格式：标签名：伪元素。类名|标签名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H – A
值得一提： 伪元素 :hover 在css1中只对a标签有效，在css2中对所有标签有效。
4 CSS样式属性
4.1 字体
font 简写属性。作用是把所有针对字体的属性设置在一个声明中
格式：{font ： 风格 异体 粗细 尺寸/行间距字体系列}
例如：
p { font: italicsmall-caps bolder 12px/18px 宋体; }
按顺序设置如下属性：
font-style 风格（italic斜体、oblique 倾斜）
font-variant 异体
font-weight 粗细
font-size/line-height 尺寸/行间距
font-family 字体系列
4.2 文本
通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。
<1> color设置文本颜色
值：①颜色名称：red ②十六进制颜色：#FF9900 ③RGB代码：color :rgb(0,100,255);
<2> text-align元素中的文本的水平对齐方式
值：①left ②right ③center ④justify 两端对齐
<3> text-decoration向文本添加修饰
值：①none 默认 ②underline③overline ④line-through ⑤blink
<4> direction设置文本方向
值：①ltr 默认 (Left-to-right) ②rtl
<5> text-indent 首行文本缩进
<6> line-height设置行高(行间距)
<7> letter-spacing设置中文字符的间距
<8> word-spacing设置英文单词的间距
<9> text-transform控制文本的大小写
值：①none 默认 ②capitalize每个单词以大写字母开头 ③uppercase仅有大写字母 ④lowercase定义无大写字母，仅有小写字母
<10>white-space 设置元素中空白的处理方式。
4.3 背景样式
background 复合属性，作用是将背景属性设置在一个声明中。
格式：{background:颜色 url(图片路径) 重复滚动 位置}
按顺序设置属性：background-color、background-image、background-repeat、background-attachment、background-position
例如：background:#00FF00 url(bgimage.gif) no-repeat fixed top;
<1> background-color设置元素的背景颜色
值：transparent默认 透明，其他 ①名称②十六进制③RGB
<2> background-image把图像设置为背景
值：url("imageURL"):图片路径
<3> background-repeat设置背景图像是否及如何重复
<4> background-attachment背景图像是否固定或者随着页面的其余部分滚动。
值：scroll 默认值滚动、fixed 不移动
<5> background-position设置背景图像的起始位置。
格式：{background-position ：参数1 参数2}
固定单词：
参数1：取值，top、center、bottom
参数2：取值，left、center、right ，默认值center
百分比：
参数1表示水平位置；参数2表示垂直位置，参数2的默认值为50%
左上角是 0% 0%。右下角是 100% 100%。
像素：
参数1表示水平位置；参数2表示垂直位置，参数2的默认值为50%
左上角是 0 0
5 CSS框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 外边距 的方式。
5.1 边框属性
元素的边框 (border)是围绕元素内容和内边距的一条或多条线。
border 复合属性，用于设置四个边的样式、宽度和颜色
格式：{border: width style color}
具体来说，各属性详解如下：
<1> border-width 简写属性，用于设置元素边框宽度
格式：{border-width : top right bottom left}
<2> border-style 简写属性，用于设置元素边框样式
格式：{border-style : top right bottom left}
<3> border-color 简写属性，用于设置元素边框颜色
格式：{border-color : top right bottom left}
类似的，更细来讲，可以通过下面的属性来确定每条框线的样式，用法同上：
border-top border-right border-bottom border-left
5.2 CSS外边距
margin 简写属性。用于设置所有外边距属性，依次是上、右、下、左。
格式：{margin : top right bottom left}
例如：p {margin:2cm 4cm 3cm 4cm; }
规律：
下边没有，找上边。
右边没有，找上边。
左边没有，找右边。
5.3 CSS内边距
元素的内边距在边框和内容区之间
padding 复合属性。作用是在一个声明中设置元素的所有内边距属性
格式{padding:top right bottom left}，分别设置上、右、下、左内边距
例如：h1{padding: 10px 20px 30px 40px;}
规律同上。
6 列表样式
<1> list-style简写属性。用于设置列表的属性
格式：{list-style : type position image}
例如：{list-style : square inside url('/i/arrow.gif')}
<2> list-style-type设置列表项标志的类型。
值：none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。 ....等
<3> list-style-position设置列表中列表项标志的位置。
值：inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环
绕文本不根据标记对齐。
<4> list-style-image将图象设置为列表项标志。
如：list-style-image:url("li.gif");
7 分类样式
7.1 鼠标样式
cursor 规定当指向某元素之上时显示的指针类型。
格式：{cursor : 参数}
例如：{cursor :pointer}
取值：
default 默认光标（通常是一个箭头）
pointer 光标呈现为指示链接的指针（一只手）
crosshair 光标呈现为十字线。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球） ....
注意：如果使用URL定义图片，请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
7.2 显示样式
<1> display设置是否及如何显示元素。
值：none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
<2> visibility设置元素是否可见或不可见。
值：visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的
布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，
会呈现为 “hidden”。
对比：
visibility 不可见元素，但会占据页面上的空间
display 不可见元素，不占据页面空间
7.3 浮动样式
float 定义元素在哪个方向浮动。
值：left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
7.4 取消浮动
clear 设置一个元素的侧面是否允许其他的浮动元素。
格式：{clear : 参数 }
例如：{clear :both }
取值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
7.5 定位样式
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中
取值：
① absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。
② fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。
③ relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
④ static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者
z-index 声明）。
left、top、right、bottom 设置元素的位置
z-index 设置层叠的次序，较大的值会覆盖在较小的上面
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
