02.CSS属性
2.1 文本
| 作用 | 用于定义文本的外观,包括文本颜色、行高、对齐方式、字符间距等. | ||||||||||||||||
| 常见属性 |
| ||||||||||||||||
| tips | ”行高”与”高度”相等,即可实现元素”垂直居中”.
|
2.2字体
| 作用 | 用于定义字体类型、字号大小、字体加粗等， | ||||||||||||
| 常见属性 |
| ||||||||||||
| tips | ①比如设置”微软雅黑”,则系统里面必须得有这个字体才是.如果CSS文件设置font-family属性不起作用,则需要把CSS样式设置为”UTF-8”. ②字体类型由多个英文单词组成时，需要使用双引号引起来，例如：字体类型-Times New Roman，应写作"Times New Roman"，中文字体也需要使用双引号引起来，例如：宋体，应写作"宋体“ ③同时设置中英文两种字体时，必须先设置英文字体，后设置中文字体，如果中文字体设置与英文字体之前,英文字体设置将不起作用(∵中文字体不仅可以显示中文，还能显示英文).即, font-family:Verdana,”宋体”; ④同时设置两种字体时，默认会先在本地机查找第一种字体，如果第一种字体存在，即使用第一种字体显示，否则，继续查找第二种字体。 |
2.3背景
@2.3.1属性
| 作用 | 通过颜色为页面元素设置背景,也可以使用图像创建相当复杂的背景. | ||||||||||||
| 常见属性 |
|
Tips:
①在CSS中，背景的background-repeat属性和background-position属性，只有在设置了background-image属性之后，才能生效.
②background-image背景图片会覆盖background-color背景颜色.
但使用”合写background属性”就不会,即,
合写background属性可以同时设置”background-image背景图片”和”background-color背景颜色”
③在背景属性中，有5个属性，除了合写（简写）属性background属性（可同时设置多个分量属性）外，其余4个属性，称为分量属性，即background-color属性,background-image属性,background-position属性,background-repeat属性（有分量属性的css属性，还有边框border属性，font属性等）
@2.3.2 background-position详解
|
| 图片左上角 |
| X坐标为正 | 向右平移 |
| X坐标为负 | 向左平移 |
| Y坐标为正 | 向下平移 |
| Y坐标为负 | 向上平移 |
1.原点位置:即外层块元素的左上角
2.background-position 位置设定,指图片与坐标原点的偏移量
3.移动原理
4.百分比计算
X轴( container宽度 – 图片宽度 )*含符号百分比
Y轴( container高度 – 图片高度)*含符号百分比
5.原点是不会动的，移动的是图片,
Eg1:background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如：
效果如下图1：
Eg2、该属性定位不受对象的补丁属性( padding )设置影响。
例如，我们给容器元素增加padding值，背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。
效果如图2:
Eg3、background-position:-70px -40px;
图片以容器左上角为参考向左偏移70px，向上偏移 40px，示例：
Eg4、background-position:70px 40px;
图片以容器左上角为参考向右偏移70px，向下偏移 40px，示例：
效果如图4：
图 4
Eg5、background-position:50% 50%;
图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x：{容器(container)的宽度-背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度-背景图片的高度}*y百分比，超出的部分隐藏。
例如：
其x=(300-210)*50%=45px;
y=(150-120)*50%=15px;
效果如图5：
由于超出部分别往两端延伸，所以我们可以先制作一张宽度足够宽图片设置水平值为50%，这样可以用来适应不同的浏览器，使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。
Eg6、background-position:-50% -50%;
等同于x：-{容器(container)的宽度-背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：-{容器(container)的高度-背景图片的高度}*y百分比，超出的部分隐藏。
效果如图6:
图 6
Eg7、background-position:100% 100%;
图片处于容器元素的右下角，与 background-position:right bottom;效果等同。
示例：
效果如图7：
现在我们来看background-position背景负值定位
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
在浏览器中看到的效果：
从上图可以看到：当为background-position:0 0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px -50px;时发现图片向左上，移动了，也就以DIV的左上角为中心，图向左移动了50PX，向右也移动了50PX．第三个示例就是上值的情况图移动的效果．这个应该是好理解的．
总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴，图向左，上都为负，向右，下为正值．
好
在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了
实例代码
2.4列表
| 作用 | 常见的各类商品分类列表或导航菜单，一般都使用<ul>-<li>结构实现。要影响列表的样式，最简单的方式是改变其标志类型. | |||||||||||||||
| 常见属性 |
列表属性中的list-style-image属性和list-style-position属性，在实际制作网页中，很少使用，因为它们设置不够灵活，且会产生浏览器兼容性问题，因此，只需了解即可. | |||||||||||||||
| Tips | 使用list-style-image属性设置列表项图标，会产生浏览器兼容性问题，解决方法如下： ①将list-style-type属性的值设为none ②使用background属性为<li>标签设置背景图像 |
2.5超链接伪类
| 作用 | 制作超链接动态效果 | ||||||||
| 4种 状态 | 未访问的链接、 已访问的链接、 鼠标指针移动到链接上、 选定的链接. | ||||||||
| 语法 |
| ||||||||
| 顺序 | (先爱后恨Love Hate) a:link—a:visited—a:hover—a:active。 | ||||||||
| 比较 | a:link和a设置的都是超链接在没有鼠标指针经过时的效果, 如，一个<a>标签在没有设置跳转地址（即href属性）时，如果设置a:link则无效，而设置a则仍然有效。因此,可以用a代替a:link. | ||||||||
| tips | 当前激活状态“a:active”一般被显示的情况非常少，因此很少使用因为当浏览者单击一个超链接之后，焦点很容易就会从这个超链接上转移到其他地方，例如新打开的窗口等，此时该超链接就不再是“当前激活”状态了。所以，通常不需要设置a:active的样式。 | ||||||||
| 常用写法 |
|
2.6 cursor属性
| 作用 | 用来设置光标的形状. |
| 语法 | cursor:属性值; |
| 属性值 |
|
2.7 display属性
| 组成 | 标准文档流由 块级元素(block) 行内元素(inline) 组成 | ||||||
| 作用 | 指定HTML标签的显示方式(即,块级元素/内联元素相互转换) | ||||||
| 语法 | display:值； | ||||||
| 属性值 | 在CSS中，display属性用于指定HTML标签的显示方式，它的可能值有19个，常用的有3个
| ||||||
| 应用 | ①块级元素与行内元素的互相转换:
②解决IE6、IE7中浮动导致的双倍边距: 在同时设置了float属性和margin属性（仅左右边距）的元素中，设置display:inline; |
2.8浮动float属性
| 含义 |
①用table实现也可以,但是有很多缺点,结构会造成更加繁琐; ②做法:让下面的div2向左浮动即可.如果向右浮动,则变成了div3. | ||||||||||||||||||||
| 作用 | ①使块级元素统一在一行内横排显示,一般用于排版/分栏显示.(∵块级元素默认是独占一行) ②定位网页元素; | ||||||||||||||||||||
| 原理 | 设置浮动后,元素脱离了文档流,不占网页空间,就可以向左向右漂浮. | ||||||||||||||||||||
| 前提 | 脱离文档流,向指定的左或右边浮动对齐,直到父元素的边界或浮动的元素. | ||||||||||||||||||||
| 步骤 | ①设置浮动 float; ②清除浮动 clear; | ||||||||||||||||||||
| 语法 | float:值；
Tips: 值：表示元素浮动的方向，有4个值： left:元素向左浮动,直到接触到左边的容器为止. right:元素向右浮动,直到接触到右边的容器为止. none:默认值.元素不浮动. inherit:规定应该从父元素继承float属性的值,IE浏览器不支持该属性的值,不推荐使用. | ||||||||||||||||||||
| 特点 | ①左浮动: 与之相邻的元素，会紧挨着其右侧排列; (相邻的元素,特指排列在浮动元素之后的相邻，如与盒子2相邻的元素有盒子1和盒子3，而排列在盒子2之后相邻的元素，就只有盒子3)
②右浮动: 与之相邻的元素，会紧挨着其左侧排列;
③同时有左浮动和右浮动的元素: 与之相邻的元素，会填满两者之间的间隙;
④未设置尺寸的块级元素，设置了浮动之后，其尺寸会根据其内部元素大小自适应.
| ||||||||||||||||||||
| 浮动法布局 | ①运用float属性创建横向多列布局的特性 ②width属性结合overflow属性清除浮动 ③增加子层内容，结构不受影响
Tips: #container为#left和#right的包裹层 如:实现横向两列布局，#right除了可使用代码中的设置方法，还可使用#right{float:right;}，使用该方式，可以避免产生IE6,IE7中的双倍边距bug，减少代码量，但如果不及时清除浮动，会导致与#right相邻的元素上移，填满#left和#right之间的间隙. | ||||||||||||||||||||
| clear 属性 |
| ||||||||||||||||||||
| 应用 | 使用float属性结合列表制作横向导航、商品列表、相册等。 | ||||||||||||||||||||
| Tips | 使用浮动后,要及时清除,以免影响其后的网页元素. |
Eg:
1.未设置浮动前
02.设置浮动
(设置浮动后,div1和div2就脱离了文档流,高于文档流,然而父div还是在原来的位置,所以父div就会被挤成一条线了.因此,需要清除浮动)
03.清除浮动
(或者用overflow属性,也可以清除浮动,见下例.)
(在所有的浮动元素后面,再加上一个空白的div,这个div什么都不做,只是专门用来清除浮动,这样之后,后面的网页元素就会正常的显示了.)
w3school官方解释
2.9 overflow属性
| 作用 | ①定义溢出元素内容区的内容会如何处理. ②清除浮动. | ||||||||
| 规定 | 如果内容不会被修剪，则呈现在盒子之外；如果内容会被修剪，则隐藏修剪内容等. | ||||||||
| 语法 | overflow:值； | ||||||||
| 属性值 |
| ||||||||
| 比较 | overflow属性清除浮动与clear属性清除浮动相比，优点如下： ①代码量大大减少 ②减少无意义的HTML标签 ③提高了代码的可读性和网页性能 |
Eg:使用overflow属性,清除上例的浮动
(加了overflow属性的父div,它的文档流会被抬高,抬高以后,会和刚才脱离文档流的div1和div2位于同一层级,这样,它的高度就可以被这两个div撑开了)
2.10定位position属性
| 含义 | CSS的定位属性主要包括绝对定位和相对定位.
| ||||||||
| 绝对定位 |
| ||||||||
| 相对定位 |
| ||||||||
| fixed 定位 | 相对于浏览器固定定位, (IE6不支持) | ||||||||
| z-index属性 |
| ||||||||
| 偏移量设置 | ①x轴:left | right y轴:top | bottom ②可取值:像素/百分比 |
Eg:
未使用定位前:
②使用相对定位
(仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响.)
③使用绝对定位:
(当父容器的position为非static值,子元素的是绝对定位absolute,则,此时子元素就会相对父容器来进行定位.容器1脱离了文档流,则剩下的元素就会往上挤.)
④使用fixed定位
(当滚动条向下拉动的时候,容器1还是固定不变,因为它是相对于浏览器定位的.)
3314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
