css属性

02.CSS属性

 

 

2.1 文本

作用	用于定义文本的外观,包括文本颜色、行高、对齐方式、字符间距等.
常见属性	属性名 含义 color 设置文本颜色 line-height 设置行高 text-align 设置水平对齐方式， left、right、center text-indent :2em 段首缩进2个字符(汉字). letter-spacing 设置字符间距 text-decoration 设置文本修饰(下划线/删除线)， none(无下划线) underline (有下划线) over line line-through(删除线) blink inherit white-space 规定如何处理空白，如规定是否换行等 no wrap (不换行）
tips	”行高”与”高度”相等,即可实现元素”垂直居中”.

 

2.2字体

作用	用于定义字体类型、字号大小、字体加粗等，
常见属性	属性名 含义 font 在一个声明中设置字体的所有样式属性 如:font: bold 12px “宋体”;(意思是:粗体,12号,宋体)   可以按顺序设置如下属性： font-style font-variant(忽略+) font-weight font-size/line-height font-family   Tips: 使用”font属性”时,字体必须写在最后,中间用空格隔开; font-family 定义字体类型 font-size 定义字体大小 font-weight 定义字体的粗细 bold 粗体 font-style 设置字体风格 italic 斜体(有些浏览器不支持) oblique 倾斜
tips	font-family属性的值， ①比如设置”微软雅黑”,则系统里面必须得有这个字体才是.如果CSS文件设置font-family属性不起作用,则需要把CSS样式设置为”UTF-8”. ②字体类型由多个英文单词组成时，需要使用双引号引起来，例如：字体类型-Times New Roman，应写作"Times New Roman"，中文字体也需要使用双引号引起来，例如：宋体，应写作"宋体“ ③同时设置中英文两种字体时，必须先设置英文字体，后设置中文字体，如果中文字体设置与英文字体之前,英文字体设置将不起作用(∵中文字体不仅可以显示中文，还能显示英文).即,     font-family:Verdana,”宋体”; ④同时设置两种字体时，默认会先在本地机查找第一种字体，如果第一种字体存在，即使用第一种字体显示，否则，继续查找第二种字体。

 

 

 

2.3背景

@2.3.1属性

作用

通过颜色为页面元素设置背景,也可以使用图像创建相当复杂的背景.

常见属性

属性名 含义 background 合写形式(可以不按顺序写) background:#ccc url(images/bp.png)repeat-x 20px 100px background-color 设置背景颜色 transparent :透明色(默认) background-image:url(路径) 背景图片 background-image:url(images/bg.png) background-repeat 设置图片的平铺方式 repeat-x 沿x轴平铺,即横平铺 rpeat-y 沿y轴平铺,即竖平铺 no-repeat 不平铺 background-position 背景图片开始位置,包括水平x轴和垂直y轴设置 x轴(水平)取值:left|center|right|像素值|百分比 (负数向左) y轴(垂直)取值:top|center|bottom|像素值|百分比 (负数向上) background-position:20px center;

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>- 结构实现。要影响列表的样式，最简单的方式是改变其标志类型.
常见属性	属性名 含义 举例 list-style 合写属性，设置所有分量样式    list-style:square inside url("arr.gif”); list-style-type 设置列表项标志的类型   disc(实心圆)   circle(空心圆)   square(正方形)   none(去掉前面的黑点) list-style-type:circle; (详见手册) list-style-image 将图片设置为列表项标志 list-style-image: url("arr.gif”) list-style-position 设置列表中列表项标志的位置 Iist-style-position: inside;   列表属性中的list-style-image属性和list-style-position属性，在实际制作网页中，很少使用，因为它们设置不够灵活，且会产生浏览器兼容性问题，因此，只需了解即可.
Tips	使用list-style-image属性设置列表项图标，会产生浏览器兼容性问题，解决方法如下： ①将list-style-type属性的值设为none ②使用background属性为 标签设置背景图像

 

 

2.5超链接伪类

作用	制作超链接动态效果
4种 状态	未访问的链接、 已访问的链接、 鼠标指针移动到链接上、 选定的链接.
语法	a:link{color:black;} /*未访问时的链接*/(常用) a:visited{color:blue;} /*单击访问过后的链接*/ a:hover{color:#red;} /*鼠标悬停在链接上*/(常用) a:active{color:#yellow;} /*鼠标单击但未释放的链接,即鼠标点击的时候*/
顺序	(先爱后恨Love Hate) a:link—a:visited—a:hover—a:active。
比较	a:link和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个 block 元素显示为块级元素，即元素转换为块级元素; 该元素前后会带有换行符 inline 默认。 元素会被显示为行内元素，即元素转换为内联元素; 该元素前后没有换行符 none 该元素不会被显示.
应用	①块级元素与行内元素的互相转换:   ②解决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 属性	必要性 浮动后的网页元素会影响同级元素. 作用 用于确定元素的哪一侧不允许其他浮动元素。 清除浮动影响，扩展盒子高度. 步骤       在所有的浮动元素后面,再加上一个空白的div,这个div什么都不做,只是专门用来清除浮动,这样之后,后面的网页元素就会正常的显示了. 语法 clear:属性值 属性值 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧均不允许浮动元素,即 表明容器框的两边都不挨着浮动框.(常用) none 默认值，允许浮动元素出现在两侧 inherit 规定应该从父元素继承clear属性的值，IE浏览器不支持，不推荐使用。
应用	使用float属性结合列表制作横向导航、商品列表、相册等。
Tips	使用浮动后,要及时清除,以免影响其后的网页元素.

 

Eg:

1.未设置浮动前

 

 

 

02.设置浮动

 

 

(设置浮动后,div1和div2就脱离了文档流,高于文档流,然而父div还是在原来的位置,所以父div就会被挤成一条线了.因此,需要清除浮动)

 

03.清除浮动

(或者用overflow属性,也可以清除浮动,见下例.)

 

(在所有的浮动元素后面,再加上一个空白的div,这个div什么都不做,只是专门用来清除浮动,这样之后,后面的网页元素就会正常的显示了.)

 

 

 

 

 

 

w3school官方解释

 

 

2.9 overflow属性

作用	①定义溢出元素内容区的内容会如何处理. ②清除浮动.
规定	规定当内容溢出盒子时发生的事情， 如果内容不会被修剪，则呈现在盒子之外；如果内容会被修剪，则隐藏修剪内容等.
语法	overflow:值；
属性值	visible 默认值。溢出的内容不会被修剪，会呈现在盒子之外. hidden 溢出的内容会被隐藏. scroll 溢出的内容会被修剪， 但是浏览器会显示滚动条用于查看修剪的内容. auto 如果溢出的内容被修剪， 则浏览器会显示滚动条用于查看修剪的内容.
比较	overflow属性清除浮动与clear属性清除浮动相比，优点如下： ①代码量大大减少 ②减少无意义的HTML标签 ③提高了代码的可读性和网页性能

Eg:使用overflow属性,清除上例的浮动

(加了overflow属性的父div,它的文档流会被抬高,抬高以后,会和刚才脱离文档流的div1和div2位于同一层级,这样,它的高度就可以被这两个div撑开了)

 

 

2.10定位position属性

含义	CSS的定位属性主要包括绝对定位和相对定位.
绝对定位	含义 相对于已设定非static定位属性的父元素计算偏移量. 特点 脱离文档流,不占据页面空间，因此它可以覆盖页面上的其他元素。 设置绝对定位的元素与文档无关. 语法 position:absolute; 规定 当父容器的position为非static值(即absolute/relative),子元素的是绝对定位absolute, 则,此时子元素就会相对父容器来进行定位.
相对定位	含义 相对于它原来的位置,通过制定偏移,到达新的位置.   特点 ①相对定位的元素无论是否进行移动，元素都会占据页面空间. ②仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 语法 position:relative; 图示
fixed 定位	相对于浏览器固定定位, (IE6不支持)
z-index属性	作用 用于调整定位时重叠块的上、下位置 图示     Tips z-index属性，必须和position属性（设置为absolute或relative）结合使用，才能生效.
偏移量设置	①x轴:left | right  y轴:top | bottom ②可取值:像素/百分比

Eg:

未使用定位前:

 

 

 

②使用相对定位

 

(仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响.)

 

③使用绝对定位:

 

 

(当父容器的position为非static值,子元素的是绝对定位absolute,则,此时子元素就会相对父容器来进行定位.容器1脱离了文档流,则剩下的元素就会往上挤.)

 

④使用fixed定位

 

 

(当滚动条向下拉动的时候,容器1还是固定不变,因为它是相对于浏览器定位的.)