css属性

02.CSS属性

 

 

2.1 文本

作用

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

常见属性

属性名

含义

color

设置文本颜色

line-height

设置行高

text-align

设置水平对齐方式,

left、rightcenter

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:linka:visiteda:hovera:active

    比较

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

    如,一个标签在没有设置跳转地址(即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还是固定不变,因为它是相对于浏览器定位的.)

     

     

    你可能感兴趣的:(前端)