码迷,mamicode.com
首页 > Web开发 > 详细

css属性

时间:2017-04-24 13:19:49      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:下划线   汉字   color   元素   如何   

02.CSS属性

 

 

2.1 文本

作用

用于定义文本的外观,包括文本颜色、行高、对齐方式、字符间距等.

常见属性

属性名

含义

color

设置文本颜色

line-height

设置行高

text-align

设置水平对齐方式,

leftrightcenter

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>-<li>结构实现。要影响列表的样式,最简单的方式是改变其标志类型.

常见属性

属性名

含义

举例

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属性为<li>标签设置背景图像

 

 

2.5超链接伪类

作用

制作超链接动态效果

4

状态

未访问的链接、

已访问的链接、

鼠标指针移动到链接上、

选定的链接.

语法

 

a:link{color:black;}

/*未访问的链接*/(常用)

a:visited{color:blue;}

/*单击访问过后的链接*/

a:hover{color:#red;}

/*鼠标悬停在链接上*/(常用)

a:active{color:#yellow;}

/*鼠标单击但未释放的链接,即鼠标点击的时候*/

 

顺序

(先爱后恨Love Hate) a:linka:visiteda:hovera:active

比较

a:linka设置的都是超链接在没有鼠标指针经过时的效果,

如,一个<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

该元素不会被显示.

 

应用

①块级元素与行内元素的互相转换:

技术分享 

②解决IE6IE7中浮动导致的双倍边距:

在同时设置了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.设置浮动

技术分享 

技术分享 

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

 

03.清除浮动

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

技术分享 

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

技术分享 

 

 

技术分享技术分享 

 

 

w3school官方解释

技术分享技术分享技术分享 

技术分享技术分享技术分享 

2.9 overflow属性

作用

①定义溢出元素内容区的内容会如何处理.

②清除浮动.

规定

规定当内容溢出盒子时发生的事情,

内容不会被修剪,则呈现在盒子之外;如内容会被修剪,则隐藏修剪内容等.

语法

overflow:值;

属性值

visible

默认值。溢出的内容不会被修剪,会呈现在盒子之外.

hidden

溢出的内容会被隐藏.

scroll

溢出的内容会被修剪,

但是浏览器会显示滚动条用于查看修剪的内容.

auto

如果溢出的内容被修剪,

则浏览器会显示滚动条用于查看修剪的内容.

 

比较

overflow属性清除浮动与clear属性清除浮动相比,优点如下:

①代码量大大减少

②减少无意义的HTML标签

③提高了代码的可读性和网页性能

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

技术分享

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

技术分享 

 

2.10定位position属性

含义

CSS的定位属性主要包括绝对定位和相对定位.

技术分享 

绝对定位

含义

相对于已设定非static定位属性的父元素计算偏移量.

特点

脱离文档流,不占据页面空间,因此它可以覆盖页面上的其他元素。

设置绝对定位的元素与文档无关.

语法

position:absolute;

规定

当父容器的position为非static(absolute/relative),子元素的是绝对定位absolute,

,此时子元素就会相对父容器来进行定位.

 

 

相对定位

含义

相对于它原来的位置,通过制定偏移,到达新的位置.

技术分享 

特点

相对定位的元素无论是否进行移动,元素都会占据页面空间.

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

语法

position:relative;

图示

技术分享技术分享 

 

fixed

定位

相对于浏览器固定定位,

(IE6不支持)

z-index属性

作用

用于调整定位时重叠块的上、下位置

图示

技术分享 

技术分享 

Tips

z-index属性,必须和position属性(设置为absoluterelative)结合使用,才能生效.

 

偏移量设置

x:left | right

 y:top | bottom

②可取值:像素/百分比

Eg:

未使用定位前:

技术分享 

技术分享 

 

②使用相对定位

技术分享技术分享 

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

 

③使用绝对定位:

技术分享 

技术分享 

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

 

④使用fixed定位

技术分享 

技术分享技术分享 

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

 

 


css属性

标签:下划线   汉字   color   元素   如何   

原文地址:http://a4seven.blog.51cto.com/11973210/1918772

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!