1.CSS背景
• CSS的背景
• background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
• background-color 设置元素的背景颜色。
• background-image 设置元素的背景图像。
• background-position 设置背景图像的开始位置。
• background-repeat 设置是否及如何重复背景图像。
• background 合写：在一个声明中设置所有的背景属性。
2.背景图片
background-image
• 可以设置盒子的背景图片：
• background-image: url(bgimage.gif);
• 注意url指向一个相对路径，url后面紧跟的是一对括号，括号内的是路径，路径可以用引号，也可以
省略，建议省略。
• 背景图片会盖住背景颜色。
• 也就是说：背景图片的优先级要高于背景色
background-attachment
• background-attachment属性设置背景图像是
• scroll： 默认值。背景图像会随着页面其余部分的滚动而移动。否固定或者随着页面的其余部分滚动。
• fixed：固定显示，相对于body固定。一般只用于body的背景设置。
• background-attachment: fixed;
background-position
• background-position 属性设置背景图像的起始位置,如下图:
background-position.png
background-repeat
• background-repeat 属性定义了图像的平铺模式。
background-repeat.png
background合写
• background合写的顺序： 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。
• background: #00FF00 url(bgimage.gif) no-repeat fixed top;
• 建议：背景都以合写的形式存在，CSS的字节更少。
3.CSS规避脱标
标准流（常规流） 是及其稳定的写法，很多地方，我们尽量使用标准流.
优先选择标准，其次使用float，最后选择定位。
1. margin-left:auto; 左侧外边距自动
不用浮动块级元素也可以到右侧
2. vertical-align 和 inline-block 的使用
怎么让一个 盒子和文字对齐？
实现方式： 可以使用浮动，也可以使用inline-block和 vertial-align
4.CSS元素可见性
单词 作用
overflow：hidden 隐藏超出的那部分
display：none 不显示元素 同时也不占位置
visibility:hidden; 不显示元素 但是占有位置
5.CSS标签包含
常用标签嵌套
1.内联元素却不能包含块元素，它只能包含其他的内联元素
span> div
div> div>ul>li>div
2.有些块级元素不能放其他块级元素。
标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；
段落标记的<p>； p>div
分隔线<hr>和<dt>
3、a标签不能嵌套 a和input标签，能嵌套的标签像,<b><strong>等等。
6.CSS内容移除某个区域
常用于logo 优化
1. 利用text-indent:-2000em;
2. 利用padding 挤开盒子 并且overflow 切割。
3.利用margin拉动盒子配合overflow切割
7. CSS精灵技术
精灵技术原理图.png
− 上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要
经过一次请求才能展现给用户。
− 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接
受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的
加载速度，出现了CSS精灵技术（也称CSS Sprites）。
−简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一
张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的
背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所
示为搜狗网站中的一个精灵图。
搜狗精灵图.png
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要
精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的
background-image、background-repeat和backgroundposition属性进行背景定位，其中最关键的是使
用backgroundposition属性精确地定位。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）
腾讯精灵图.png
8.小图跟文字进行水平对齐技术
• 第一种方式：通过调整文字背景图的位置。
通过padding+背景图的position配合产生对齐效果。
注意精灵图（长条适合）
• 第二种方式：将背景图设置到一个s标签上，让s标签跟文本对齐。精灵图可以做的非常紧凑。
关键点：文本的对齐到middle，可以通过设置图片的margin-top、left、right等控制图片的显示位置。
• 第三种方式：
可以同浮动的形式实现
文字小图对齐.png
.arrow-d {
width: 9px;
height: 6px;
background:
url(../imgs/bg.fw.png) no-repeat
0 -80px;
display: inline-block;
vertical-align: middle;
margin-top: -2px;
}
9.拓展学习
• 淘宝的小图，已经部分font-face在线字体化。
• 研究一下font-face？
10.• css滑动门技术
滑动门.png
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，
如下图所示，即为设置了圆角背景的导航。
圆角背景导航条.png
−如果使用传统的CSS思想，要想为列表项“技术联盟”设置上图所示的圆角背景，可以对其所在的<li>标记
应用大圆角背景。这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就
需要重新对<li>定义背景图像，以适应文本内容的多少。
需求分析:
−为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构
建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
11.margin负值运用
制作网页时，为了拉开元素之间的距离，常常给元素设置大于0的外边距margin。其实，在实际工作中，为
了实现一些特殊的效果，经常需要将元素的margin设置为负值，如下图所示的元素重叠效果。
margin负值元素重叠.png
12.消除inline-block中的空隙
行内块之间会有缝隙，去掉的方法
1. 去除空格，把代码放在一行上。
2. 使用margin负值。
3.给父级添加font-size:0；
4.使用letter-spacing或者 word-spacing
5、使用float的方式
13.CSS圆角
图片简单，但是写起来要复杂多。但是也有自己意外的一部分。
圆角练习.png
用CSS实现 三角
背景图实现三角
在线字体三角
文字三角
14.ico图标
1. www.bitbug.net 进行转换 生成的是： favicon.ico 的小图标
2. <link rel="shortcut icon" href="favicon.ico" />
15.导入式补充:
导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记内
的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下：
<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";
/* 在此还可以存放其他CSS样式*/
</style>
需要位于其他内嵌样式的上面。
样式表总结.png
15.关于表格
表格.png
16.CSS的选择器解析顺序
• CSS解析顺序：从最右选择器进行筛选，然后依次向左进行过滤。
• #aside div .tit { color: red; }
• 先解析：.tit进行过滤，然后过滤 div，然后最后过滤#aside元素
• 选择器层级嵌套不要超过3层。
17.CSS选择器优化效率
CSS选择器的性能排序：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover,li:nth-child）
18.有思想的CSS
• OOCSS
• ACSS
• BEM
网友评论