CSS 属性大全

   2023-03-08 学习力0
核心提示:1. 文字属性「字体族科」(font-family),设按时,需推敲浏览器中有无该字体。 「字体大小」(font-size),重视怀抱单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数) 「字体加粗」(font-weight),除了 normal(正常)、bold(粗

1. 文字属性

「字体族科」(font-family),设按时,需推敲浏览器中有无该字体。 
「字体大小」(font-size),重视怀抱单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数) 
「字体加粗」(font-weight),除了 normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外,还有9种以像素为怀抱为单位的设置体式格式(100,200,300,400,500,600,700,800,900)。 
「字体风格」(font-style),也就是字型。

normal : 正常的字体
italic : 斜体。对于没有斜体变量的特别字体,将应用oblique
oblique : 倾斜的字体

) 

「字体变形」(font-variant),字体变形属性决意了字体显示是normal (通俗) ,还是

                           Small-caps(小型大写字母)当文字中所有字母都是大写的时辰,小型大写字母(值)会显示比小写字母稍大的大写字符。

「字体」(font),《字体风格》|《字体变形》|《字体加粗》|《字体大小》|《行高》|《字体族科》

2. 文本属性

「文字间距」(word-spacing),首要用于把握文字间相隔的间隔。有正常(normal)和值(自定义间隔值)两种选择体式格式。
「字母间距」(letter-spacing),其感化与字符间距类似,也有正常 (normal)和值(自定义间隔值)两种选择体式格式。 
「垂直对齐」(vertical-align),把握 文字或图像相对于其母体元素的垂直地位。如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对齐,则该GIF图像将在该行文字的顶部显示。共有基 线(baseline,将元素的基准线同母体元素的基准线对齐)、下标(sub,将元素以下标的情势显示),上标(super,将元素以上标的情势显 示)、顶部(top ,将元素顶部同最高的母体元素对齐)、文本顶对齐(text-top,将元素的顶部同母体元素文字的顶部对齐)、中线对齐(middle,将元素的中点同 母体元素的中点对齐)、底部(bottom,将元素的底部同最低的母体元素对齐)及值(自定义)等9种选择。 
「文本分列」(text-align),设置块的程度对齐体式格式。共有左对齐(left)、右对齐(right)、居中(center)和均分 (justify)等4种选择。 

「行 高」(line-height),就是 行距。Normal | <数字> | <长度> | <百分比>

                       当&#20540;为数字时,行高由元素字体大小的量与该数字相乘所得。

                       百分比的&#20540;相对于元素的字体大小而定。

                        不容许应用负&#20540;。 

「文本转换」(text-transform),这项属机能易如反掌地把握字母大小写,有首字大写(capitalize、大写(uppercase)、小写(lowercase)和无(none,使所有持续文字和变形参数被 忽视,文字将以正常情势显示)等4种。 
「文字缩进」(text-indent),把握块的缩进程度。<长度> | <百分比> 
「空白间距」(white-space),在HTML中,空&#26684;是被省略的;在CSS中则应用属性(white-space)把握空&#26684;的输 入。共有正常(normal)、保存(pre)和不换行(nowrap)等3种选择。

「修 饰」(text-decoration),用于把握链接文本的显 示形态,有下划线(underline)、无下划线(overline)、删除线(line-through)、闪烁(blink)和无(none ,使上述结果均不会产生)等5种润饰体式格式。但IE4不支撑文字闪烁。

3色彩及靠山属性

[颜 色」(color),设置色彩。Color:blure color:#00080 color:#0c0

「靠山色彩」(background-color),设置靠山色彩。background-color:blure background-color:#00080 background-color:#0c0
「靠山图像」(background-image),设置网页靠山图像。background-image:url(/images/xx.gif) 
「靠山反复」(background- repeat),把握靠山图像的平铺体式格式,有不反复(no-repeat)、反复(repeat,沿程度、垂直标的目标平铺)、横向反复 (repeat-X,图像沿程度标的目标平铺)和纵向反复(repeat-Y,沿图像垂直标的目标平铺)等4种选择。 
「靠山附件」(background-attachment),用于把握靠山图像是否会随页面的迁移转变而一路迁移转变。有固定(fixd,文字迁移转变 时,靠山图像保质固定)和迁移转变(scroll,靠山图像随文字内容一路迁移转变)两种选择。 
「程度地位」/「垂直地位」(background-position),断定靠山图像的程度、垂直地位 
。共有左对齐(left)、右对齐 (right)、顶部(top)、底部(bottom)、居中(center)和&#20540;(自定义靠山图像的出发点地位,可应用户对靠山图像的地位做出更正确的控 制)等6种选择。

[靠山] (background),《靠山色彩》||《靠山图像》||《靠山反复》||《靠山附件》||《靠山地位》

4.文字连接属性

a /*所有超链接*/ 
a:link /*超链接文字&#26684;式*/  

a:visited /*浏览过的链接文字&#26684;式*/ 
a:active /*按下链接的&#26684;式*/ 
a:hover /*鼠标转到链接*/ 
鼠标光标 样式:
链接办指cursor:pointer
十字体 cursor:crosshair 
箭头朝下 cursor:s-resize 
十字箭头 cursor:move 
箭头朝右 cursor:move 
加一问号 cursor:help 
箭头朝左 cursor:w-resize 
箭头朝上 cursor:n-resize 
箭头朝右上 cursor:ne-resize 
箭头朝左上 cursor:nw-resize 
文字I型 cursor:text 
箭头斜 右下 cursor:se-resize 
箭头斜左下 cursor:sw-resize 
漏斗 cursor:wait

5. 边框

「边框宽度」(border-width),把握边框的宽度,此平分为4个属性:border-top-width顶边框的 宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左 边框的宽度。 
「边框色彩」(border-color),设置各边框的色彩。若要使边框的四边显示不合的色彩, 可在设置平分别列出。如, 
p{: #ff0000 #009900 #0000ff #55cc00} 
浏览器将四种色彩依次懂得为: 上边框、右边框、底边框和左边框(自上开端顺时针)。 
「边框样式」(border-style),设定边框的样 式,共有无(none)、虚线(dotted)、点划线线(dotted)、点划线(dashed)、实线(solid)、双线(double )、槽状(grove)、脊状(ridge)、凹陷(inset)和凸起(outset)等9种。

「边框样式」(border),<边框宽度> | <边框样式> | <边框色彩>

6.「盒子」属性


「宽」(width),断定盒子本身的宽度,可以使盒子的宽度不依附它所包含的内容几许。 <长度> | <百分比> | <auto>
「高」(height),断定盒子本身的高度。<长度> | <auto>
「浮 动」(float),设置块元素的浮动结果。(left)|(right)|(none) 
「清 除」(clear),用于清除设置的浮动结果。(left)|(right)|(none)|(both)
「边 距」 (margin),把握环绕边框的边距大小。此中包含4个属 性:margin-top把握上边距的宽度、margin-right把握右边距的宽度、margin-bottom把握下边距的宽度、margin- left把握左边距的宽度。 
「补 白」(padding),断定环绕块元素的空&#26684;填充数量,此中包含4个属性 「padding-top把握上留白的宽度、padding-right把握右留白的宽度、padding-bottom把握下留白宽度、 padding-left把握左留白的宽度。 

7.列表

1. 列表元素:

ol 有序列表。

<ol>

<li>项目1</li>

<li>项目2</li>

<li>项目3</li>

</ol>

发挥解析为:

1.项目1 

2.项目2 

3.项目3

ul 无序列表,发挥解析为li前面是大圆点而不是123

<ul>

<li>项目1</li>

<li>项目2</li>

<li>项目3</li>

</ul>

发挥解析为:

·项目1 

·项目2 

·项目3 

很多人轻易忽视 dl dt dd的用法

dl 内容块

dt 内容块的题目

dd 内容

可以这么写:

<dl>

<dt>题目title</dt>

<dd>内容content1</dd>

<dd>内容content2</dd>

</dl>

发挥解析为:

题目 

内容 

  内容

(内容是缩进的!)

8. 定位

「类 型」(position),用于断定定位的类型,共有绝对(absolute)、相对(relative)和静态 (static)等3种选择。 
「Z 轴」(z-index),用于把握网页中块元素的叠放次序,可为元素设置 重叠结果。该属性的参数&#20540;应用纯整数,&#20540;为0时,元素在最基层,实用于绝对定位或相对定位的元素。 
「显 示」(visibility)应用该属性可将网页中的元素隐蔽,共有持续(inherit,持续母体要素的可视性设置)、可见 (visible)和隐蔽(hidden)等3种选择。 
「溢 出」(overflow),在断定了元素的高度 和宽度后,若是元素的面积不克不及全部显示元素中的内容时,该属性做一日和尚撞一天钟起感化了。此有可见(visible,扩大面积以显示所有内容)、隐 藏(hidden,隐蔽超出局限的内容)、迁移转变(scroll,在元素的右边显示一个迁移转变条)和主动(auto,当内容超出元素面积时,显示迁移转变条)等4 种选择。 
「定 位」,当为元素断定了绝对定位类型后,该组属性决意元素在网页中的具体地位。该组属性包含4个 子属性,分别是「左」(属性名为「left」,把握元素左边的肇端地位)、「上」(属性名为「top」,把握元素上方的肇端地位)、 「宽」或「高」(与「盒子」类属性面板中「宽」或「高」的属化雷同)。 
「剪 辑」(clip),当元素被 指定为绝对定位类型后,该属性可以把元素区域切成各类外形,但今朝供给的只有方形一种。属性&#20540;为rect(top right bottom left),即: 
rect(top right bottom left),属性&#20540;的单位为任何一种长度单位。

 

9. [display] 

&#20540;              描述

none          此元素不会被显示。

block          此元素将显示为块级元素,此元素前后会带有换行符。

inline          默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block     行内块元素。(CSS2.1 新增的&#20540;)

*display:inline; *zoom:1;

list-item          此元素会作为列表显示。

run-in          此元素会按照高低文作为块级元素或内联元素显示。

table          此元素会作为块级表&#26684;来显示(类&#20284; <table>),表&#26684;前后带有换行符。

inline-table      此元素会作为内联表&#26684;来显示(类&#20284; <table>),表&#26684;前后没有换行符。

table-row-group  此元素会作为一个或多个行的分组来显示(类&#20284; <tbody>)。

table-header-group 此元素会作为一个或多个行的分组来显示(类&#20284; <thead>)。

table-footer-group  此元素会作为一个或多个行的分组来显示(类&#20284; <tfoot>)。

table-row      此元素会作为一个表&#26684;行显示(类&#20284; <tr>)。

table-column-group此元素会作为一个或多个列的分组来显示(类&#20284; <colgroup>)。

table-column      此元素会作为一个单位&#26684;列显示(类&#20284; <col>)

table-cell      此元素会作为一个表&#26684;单位&#26684;显示(类&#20284; <td> 和 <th>)

table-caption      此元素会作为一个表&#26684;题目显示(类&#20284; <caption>)

inherit          规定应当从父元素持续 display 属性的&#20540;。

10.[分类属性]

「空白」(white-space),用于决意元素内的空&#26684;

Normal(将多个空&#26684;折叠成一个)

Pre(不折叠成空&#26684;)

Nowrap(不容许换行,除非碰到<br/>标识表记标帜)

「目次样式类型」(list-style-type),带有显示&#20540;目次项元素

                                

「目次样式图像」(list-style-image),带有显示&#20540;目次项元素

                                 list-style-image:url(地址)

「目次样式地位」(list-style-position),带有显示&#20540;目次项元素

                                   Inside (内部) | outside(外部—初始&#20540;)

「目次样式」(list-style),带有显示&#20540;目次项元素

                        《目次样式类型》| 《目次样式类型》| 《目次样式图像》

11.css 单位

  [长度单位]

        有效的相对单位

  em(元素字体的高度)

               ex(x-height,字母“x”的高度)

px(像素,相对于屏幕的辨别率)

          有效的绝对单位

  in(英寸,1英寸=2.54厘米)

               cm(厘米,1厘米=10毫米)

mm(米)

pt(点,1点=1/72英寸)

pc(帕,1帕=12点)

[百分比单位]

    百分比&#20540;是相对于其他数&#20540;,同样地用于定义每个属性,最经常应用

的百分比&#20540;是相对于元素的字体大小。

[色彩单位]

      色彩&#20540;是一个关键字或一个RGB&#26684;式的数字

      #rrggbb | #rgb | rgb(x,x,x)x是一个介乎0到255之间的整数(如,rgb(0,204,0))

      Rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如,rgb(0%,80%,0%))

      这例子指定的是同一个色彩

12.css hack

因为不合的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析熟悉不一样,是以会导致生成的页面结果不一样,得不到我们所须要的页面结果。

  这个时辰我们就须要针对不合的浏览器去写不合的CSS,让它可以或许同时兼容不合的浏览器,能在不 同的浏览器中也能获得我们想要的页面结果。

这个针对不合的浏览器写不合的CSS code的过程,就叫CSS hack,也叫写CSS hack。

CSS Hack的道理是什么?

  因为不合的浏览器对CSS的支撑及解析成果不一样,还因为CSS中的优先级的关 系。我们就可以按照这个来针对不合的浏览器来写不合的CSS。

  比如 IE6能辨认下划线"_"和星号" * ",IE7能辨认星号" * ",但不克不及辨认下划线"_",而firefox两个都不克不及熟悉。等等

书写次序,一般是将辨认才能强的浏览器的CSS写在后面。

CSS Hack的写法!

比如要辨别IEfirefox两种浏览器,可以如许写: 

  <style> 

  div{ 

  background:green; /* for firefox */ 

  *background:red; /* for IE6 */ 

  } 

  </style> 

  我在IE6中看到是红色的,在firefox中看到是绿色的。

  申明一下:

  上方的css在firefox中,它是熟悉不了后面的那个带星号的东东是什么的,于是将它过滤 掉,不予理睬,解析获得的成果是:div{background:green},于是理所当然这个div的靠山是绿色的。

  在IE6中呢,它两个background都能辨认出来,它解析获得的成果 是:div{background:green;background:red;},于是按照优先级别,处在后面的red的优先级高,于是当然这个div 的靠山色彩就是红色的了。

  CSS hack:区分IE6,IE7,firefox

  差别不合浏览器,CSS hack写法:

  差别IE6与FF:

  background:orange;*background:blue;

  差别IE6与IE7:

  background:green !important;background:blue;

  差别IE7与FF:

  background:orange; *background:green;

  差别FF,IE7,IE6:

   background:orange;*background:green;_background:blue; 

  background:orange;*background:green !important;*background:blue;

  注:IE都能辨认*;标准浏览器(如FF)不克不及辨认*;

  IE6能辨认*,某些景象下不克不及辨认 !important,

   -----------------------------------------------------------------------------------------------

  IE6支稳重定义中的!important,例如:

  .yuanxin {color:#e00!important;}

  .yuanxin {color:#000;}

  你将会发明定义了样式class="yuanxin"时,在IE下,字体显示为红色 (#e00)。

  但不支撑同必然义中的!important。例如:

  .yuanxin {color:#e00!important;color:#000}

  此时在IE6下不支撑,你将会发明定义了样式class="yuanxin"时,字体显示为黑 色(#000)。

   -----------------------------------------------------------------------------------------------

  IE7能辨认*,也能辨认!important;

  FF不克不及辨认*,但能辨认!important;

             IE6 IE7 FF 

  *           √ √ × 

  !important  × √ √ 

  浏览器优先级别:FF<IE7<IE6,CSS hack书写次序一般为FF IE7 IE6 

  以: " #demo {width:100px;} "为例; 

  #demo {width:100px;} /*被FIREFOX,IE6,IE7履行.*/ 

  *html #demo {width:120px;} /*会被IE6履行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */ 

  *&#43;html #demo {width:130px;} /*会被IE7履行*/ 

  --------------- 

  所以最后,#demo的宽度在三个浏览器的申明为: 

  FIREFOX:100px; 

  ie6:120px; 

  ie7:130px; 

  IE8 最新css hack:

  "9" 例:"border:1px 9;".这里的"9"可以差别所有IE和FireFox.

  "*" IE6、IE7可以辨认.IE8、FireFox不克不及.

  "_" IE6可以辨认"_",IE7、IE8、FireFox不克不及.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

在法度里加上这句话的意思就是:IE8里显示的布局和IE7里一样!

常用的css属性大全

一、html标签

<pre>...</pre>文字&#26684;式化

<div>......</div>列块容器

字体大小变更 <font size=?>想输入的字</font>

字体色彩 <font color="...">想输入的字</font>

字体变粗 <b>想输入的字</b>

字体变斜 <i>想输入的字</i>

字体加下划线 <u>想输入的字</u>

对正中心ㄉ语法 <p align="center">内容</p>

对正左边ㄉ语法 <p align="left">内容</p>

对正右边ㄉ语法 <p align="right">内容 </p>

字体删除线 <s>想输入的字</s>

字体设置 <font">字体名称">想输入的字</font>

打字机字体 <tt>想输入的字</tt>

上标字 <sup>想输入的字</sup>

下标字 <sub>想输入的字</sub>

程度线 <hr color="...">

换行输入 想输入的字<br>想输入的字

超链接 <a href="想链接网址">链接地的名称</a>

<a href="mailto:填入email">要显示的字打这里</a>收集邮寄标签

贴图 <img src="图形的网址">

跑马灯(轮回) <marquee behavior=scroll>想输入的字</marquee>

外部文件导入&#26684;式标签

CSS外部导入&#26684;式:

<link rel="stylesheet" type="text/css" href="/css.css" />

直接引用:

<style type="text/css">

<!--

id{...}

-->

</style>

javascript - 加载外部.js自力文件:

<script type="text/javascript" src="/script.js"></script>

二、CSS文字属性:

color : #999999; /*文字色彩*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间间隔*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration:overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分离对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

三、CSS符号属性:

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*式符号*/

list-style-position:outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS靠山样式:

background-color:#F5E2EC; /*靠山色彩*/

background:transparent; /*靠山*/

background-image : url(/image/bg.gif); /*靠山*/

background-attachment : fixed; /*浮水印固定靠山*/

background-repeat : repeat; /*反复分列-网页默认*/

background-repeat : no-repeat; /*不反复分列*/

background-repeat : repeat-x; /*在x轴反复分列*/

background-repeat : repeat-y; /*在y轴反复分列*/

指定靠山地位

background-position : 90% 90%; /*靠山x与y轴的地位*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性:

a /*所有超链接*/

a:link /*超链接文字&#26684;式*/

a:visited /*浏览过的链接文字&#26684;式*/

a:active /*按下链接的&#26684;式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接办指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表:

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写体式格式,但也可以应用常规的体式格式 如下:

border-top-color : #369 /*设置上框线top色彩*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单应用:

文字方块 <input type="text" name="T1" size="15">

按钮 <input type="submit" value="submit" name="B1">

复选框 <input type="checkbox" name="C1">

选择钮 <input type="radio" value="V1" checked name="R1">

多行文字方块 <textarea rows="1" name="S1" cols="15"></textarea>

下拉式菜单 < size="1" name="D1"><option>选项1</option>

<option>选项2</option></>

八、CSS鸿沟样式:

margin-top:10px; /*上鸿沟*/

margin-right:10px; /*右鸿沟&#20540;*/

margin-bottom:10px; /*下鸿沟&#20540;*/

margin-left:10px; /*左鸿沟&#20540;*/

九、CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白*/

根蒂根基语法

 规矩

选择符

任何HTML元素都可所以一个CSS1的选择符。选择符仅仅是指向希罕样式的元素。例如, P { text-indent: 3em }

傍边的选择符是P。

类选择符

单一个选择符能有不合的CLASS(类),因而容许同一元素有不合样式。例如,一个网页建造者也许视其说话而定,用不合的色彩显示代码 :

code.html { color: #191970 }

code.css { color: #4b0082 }

 以上的例子建树了两个类,css和html,供HTML的CODE元素应用。CLASS属性是用于在HTML中以指明元素的类,例如,

<P

例如,code.html.proprietary是无效的。</p>

类的声明也可以无须相干的元素:

.note { font-size: small }

在这个例子,名为note的类可以被用于任何元素。

一个杰出的习惯是在定名类的时辰,按照它们的功能而不是按照它们的外观。上述例子中的note类也可以定名为small,但若是网页建造者决意改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

ID 选择符

ID 选择符个别地定义每个元素的成分。这种选择符应当尽量罕用,因为他具有必然的局限。一个ID选择符的指定要有指导符"#"在名字前面。例如,ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

 <P ID=svp94O>文本缩进3em</P>

接洽关系选择符

接洽关系选择符只不过是一个用空&#26684;隔开的两个或更多的单一选择符构成的字符串。这些选择符可以指定一般属性,并且因为层叠次序的规矩,它们的优先权比单一的选择符大。例如, 以下的高低文选择符

P EM { background: yellow }

是P EM。这个&#20540;默示段落中的夸大文本会是靠山;而题目标夸大文本则不受影响。

 声明

属性

一个属性被指定到选择符是为了应用它的样式。属性的例子包含色彩、鸿沟和字体。

&#20540;

声明的&#20540;是一个属性接管的指定。例如,属彩能接管&#20540;red。

组合

为了削减样式表的反复声明,组合的选择符声明是容许的。例如,文档中所有的题目可以经由过程组合给出雷同的声明:

H1, H2, H3, H4, H5, H6 {

color: red;

"" class=MsoNormal> 持续 

实际上,所有在选择符中嵌套的选择符都邑持续外层选择符指定的属性&#20540;,除非别的更改。例如,一个BODY定义了的色彩&#20540;也会应用到段落的文本中。

有些景象是内部选择符不持续四周的选择符的&#20540;,但理论上这些都是特别的。例如,上鸿沟属性是不会持续的;直觉上,一个段落不会有同文档BODY一样的上鸿沟&#20540;。

  注解

样式表里面的注解应用C说话编程中一样的商定办法去指定。CSS1注解的例子如以下&#26684;式:

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素

伪类和伪元素是特别的类和元素,能主动地被支撑CSS的浏览器所辨认。伪类差别开不合种类的元素(例如,visited links(已接见的连 接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一项目组,例如段落的第一个字母。

伪类或伪元素规矩的情势如

选择符:伪类 { 属性: &#20540; }

选择符:伪元素 { 属性: &#20540; }

伪类和伪元素不该用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一路应用,如下:

选择符.类: 伪类 { 属性: &#20540; }

选择符.类: 伪元素 { 属性: &#20540; }

定位锚伪类

 伪类可以指定A元素以不合的体式格式显示连接(links)、已接见连接(visited links)和可激活连接 (active links)。定位锚元素可给出伪类link、visited或active。一个已接见连接可以定义为不合色彩的显示,甚至不合字体大 小和风&#26684;。

一个有趣的结果是使当前(或“可激活”)连接以不合色彩、更大的字体显示。然后,当网页的已接见连接被重选时,又以不合色彩、更小字体显示。这个样式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行伪元素

凡是在报纸上的文章,例如Wall Street Journal中的,文本的首行都邑以粗印体并且全部大写地显现。CSS1包含了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

 P:first-line {

 font-variant: small-caps;

 font-weight: bold }

首个字母伪元素

首个字母伪元素用于加大(drop caps)和其他结果。含有已指定&#20540;选择符的文本的首个字母会遵守指定的&#20540;显现。一个首个字母伪元素可以用于任何块级元素。例如:

 P:first-letter { font-size: 300%; float: left }

会比通俗字体加大三倍。

 层叠次序

当应用了多个样式表,样式表须要争夺特定选择符的把握权。在这些景象下,总会有样式表的规矩能获得把握权。以下的特点将决意互相对立的样式表的成果。

 ! important

规矩可以用指定的! important 特指为首要的。一个特指为首要的样式会赶过于与之对立的其它雷同权重的样式。同样地,当网页建造者和读者都指定了首要规矩时,网页建造者的规矩会超出读者的。以下是! important 声明的例子:

BODY { background: url(bar.gif) white;

 background-repeat: repeat-x ! important }

 Origin of Rules (Author""s vs. Reader""s)

正如以前所说起的,网页建造者和读者都有才能去指定样式表。当两者的规矩产生冲突,网页建造者的规矩会赶过于读者的其它雷同权重的规矩。而网页建造者和读者的样式表都超出浏览器的内置样式表。

网页建造者应当警惕地应用! important 规矩,因为它们会超出用户任何的! important 规矩。例如,一个用户因为视觉关系,会 请求大字体或指定的色彩,并且如许的用户会有可能声明白定的样式规矩为! important,因为这些样式对于用户浏览网页是极为首要的。任何 的! important 规矩会超出一般的规矩,所以建议网页建造者应用一般的规矩以确保有特别样式须要的用户能浏览网页。

 选择符规矩: 策画特点

基于它们的特点级别,样式表也可以超出与之冲突的样式表,一个较高特点的样式永远都赶过于一个较低特点的样式。这只不过是策画选择符的指定个数的一个统计游戏。

统计选择符中的ID属性个数。

统计选择符中的CLASS属性个数。

统计选择符中的HTML标识表记标帜名&#26684;式。

最后,按正确的次序写出三个数字,不要加空&#26684;或逗号,获得一个三位数。( 重视,你须要将数字转换成一个以三个数字结尾的更大的数。)响应于选择符的终极数字列表可以很轻易断定较高数字特点赶过于较低数字的。以下是一个按特点分类的选择符的列表:

#id1 {xxx} /* a=1 b=0 c=0 --> 特点 = 100 */

UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特点 = 013 */

LI.red {xxx} /* a=0 b=1 c=1 --> 特点 = 011 */

LI {xxx} /* a=0 b=0 c=1 --> 特点 = 001 */

特点的次序

为了便利应用,当两个规矩具同样权重时,取后面

有很多办法将样式表参加到HTML中,每个都带有本身的长处和毛病。新的HTML元素和属性已被参加以容许样式表与HTML文档更简略单纯地组合起来。

 连接到一个外部的样式表

 嵌入一个样式表

 输入一个样式表

 内联样式

CLASS属性

ID属性

SPAN元素

DIV元素

关于认证的备注

  -------------------------------------------------------------------------------

连接到一个外部的样式表

 一个外部的样式表可以经由过程HTML的LINK元素连接到HTML文档中:

 <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">

<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">

<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

<LINK>标识表记标帜是放置在文档的HEAD项目组。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表 --容许浏览器忽视它们不支撑的样式表类型。为CSS文件设备办事器而将text/css算作Content-type内容发送出去也是一个好重视。

外部样式表不克不及含有任何像<HEAD>或<STYLE>如许的HTML的标识表记标帜。样式表仅仅由样式规矩或声明构成。一个零丁由

P { margin: 2em }

构成的文件就可以用作外部样式表了。

<LINK>标识表记标帜也有一个可选的MEDIA属性,用于指定样式表被接管的介质或媒体。容许的&#20540;有

screen (缺省&#20540;),提交到策画机屏幕;

多样的媒体经由过程用逗号隔开的列表或&#20540;all指定。

Netscape Navigator 4.x 错误地忽视除了screen&#20540;外的任何应用 MEDIA&#20540;声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被 Navigator 4.x忽视,尽管显现的设备是策画机的屏幕。Navigator 4.x 也忽视应用MEDIA=all声明的样式表。

REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而 REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺乏的TITLE属性,就像例子中的第一个& lt;LINK>标识表记标帜,定义一个固定样式。

一个首选样式会主动被应用,就像例子中的第二个<LINK>标识表记标帜。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页建造者不克不及指定多于一个的首选样式。

交互样式经由过程REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标识表记标帜定义一个交互样式,用户可以选择用来庖代首选样式表。

 重视如今的浏览器一般都缺乏选择交互样式的才能。

单一的样式也可以经由过程多个样式表给出

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中应用雷同TITLE。

当样式被应用到很多的网页时,一个外部样式表是幻想的。网页建造者应用外部样式表可以改变全部网站的外观而仅仅经由过程改变一个文件。同样的,大多半浏览器会保存外部样式表在缓冲区,从而若是样式表在缓冲区就避免了在显现网页时的延迟。

 Microsoft Internet Explorer 3 for Windows 95/NT4并不支撑来自连接的样式表中的BODY 靠 山图象或色彩。若是推敲到这个错误,网页建造者不妨供给别的的包含一个靠山图象或色彩的布局,例如嵌入或内联样式,或应用BODY元素的 BACKGROUND属性。

-------------------------------------------------------------------------------

嵌入一个样式表

一个样式表可以应用STYLE元素在文档中嵌入:

 <STYLE TYPE="text/css" MEDIA=screen>

<!--

 BODY { background: url(foo.gif) red; color: black }

P EM { background: yellow; color: black }

.note { margin-left: 5em; margin-right: 5em }

 -->

 </STYLE>

STYLE元素放在文档的HEAD项目组。必须的TYPE属性用于指定媒体类型,LINK元素也一样。同样地,TITLE和MEDIA属性也可以用STYLE指定。

 旧版本的浏览器,并不克不及辨认STYLE元素,会将其算作BODY的一项目组照常显现其内容,从而使这些样式表对用户是可见的。要防止如许做,STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面,像上述例子那样。

嵌入的样式表可用于当一个文档具有独一无二的样式的时辰。若是多个文档都应用同一样式表,那么外部样式表会更实用。

 -------------------------------------------------------------------------------

输入一个样式表

 一个样式表可以应用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:

<STYLE TYPE="text/css" MEDIA="screen, projection">

 <!--

@import url(http://www.htmlhelp.com/style.css);

@import url(/stylesheets/punk.css);

DT { background: yellow; color: black }

-->

</STYLE>

 重视其它的CSS规矩应当仍然包含在STYLE元素中,但所有的@import 声明必须放在样式表的开端项目组。随便率性在样式表中指定了的规 矩,其自身超出在输入样式表中对立的规矩。例如上例,即使一个输入的样式表包含DT { background: aqua },定义项 (definition terms)依然会是的靠山。

被输入的样式表的次序对于它们如何层叠是很首要的。在上述的例子中,若是style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为的话,那么后面的规矩会获胜,而STRONG元素会显示为。

输入的样式表对于模块性结果很有效处。例如,一个网站可以经由过程应用了的选择符分类样式表。一个simple.css样式表给出公共的元素像 BODY、P、H1和H2。此外,一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css 样式表可以用于定义变更元素的规矩。这三个样式表在须要的时辰可以应用@import 声明包含在HTML中。三个样式表也可以经由过程LINK元素组 合。

 -------------------------------------------------------------------------------

 内联样式

样式可以应用STYLE属性内联。STYLE属性可以应用于随便率性BODY元素(包含BODY本身),除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明算作本身的&#20540;,而每个声明用分号隔开。以下是一个例子:

 <P STYLE="color: red;"> 这段的样式是红色的New Century Schoolbook字,若是字体可用的话。</P>

 重视在STYLE中New Century Schoolbook包含在单引号中,因为双引号被用作包含样式声明。

内联的样式比其他办法加倍灵活。要应用内联样式,必须应用Content-Style-Type HTTP页眉扩大对全部文档进行零丁的样式表说话 声明。应用内联CSS的网页建造者必须将text/css作为Content-Style-Type HTTP页眉,或在HEAD项目组包含以下标识表记 标帜:

 <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

因为和须要显现的内容混淆在一路,内联样式会落空一些样式表的长处。同样地,内联样式默认地接管所有媒体,因为没有任何的为内联样式指定明白的媒体 的语句。这种办法应当尽量罕用,如当一个样式会应用在所有媒体到一个元素的个别景象。若是样式会被应用到单一元素的场合,但只能应用确认的媒体的话,应用 ID属性庖代STYLE属性。

 -------------------------------------------------------------------------------

CLASS属性

 CLASS属性用于指定元素属于何种样式的类。例如,样式表可以参加punk和warning类:

 .punk { color: lime; background: #ff80c0 }

 P.warning { font-weight: bolder; color: red; background: white }

 这些类可以应用CLASS属性在HTML中引用:

 <H1

 <P

在这个例子中,punk类可以用于任何BODY元素因为它在样式表中没有HTML元素接洽关系。而在这个例子的样式表,warning类只能用于P元素。

 一个杰出的习惯是在定名类的时辰,按照它们的功能而不是按照它们的外观。上述例子中的warning类也可以定名为red,但若是网页建造者决意改变这个类的样式为此外色彩,或为那些应用PC喇叭的人定义为aural(听觉)样式的话,那么这个名字就变得毫无意义了。

 类会是应用样式到HTML文档中在布局上一样的项目组的有效的办法。例如,本页应用类给CSS源代码和HTML源代码应用不合的样式。

-------------------------------------------------------------------------------

ID属性

 ID属性用于定义一个元素的独特的样式。一个CSS规矩如

#wdg97 { font-size: larger }

可以经由过程ID属性应用到HTML中:

<P ID=wdg97>迎接接见Web Design Group及TV water 168!</P>

 全部文档傍边的每个ID属性的&#20540;都必须是独一的。其&#20540;必须是一个以字母开首紧接字母、识字或连字符。字母限于A-Z和a-z。

重视HTML 4.0容许在ID属性中有句号,但CSS1不容许在ID选择符中有句号。也要重视CSS1容许Unicode字符161-255并且忽视Unicode字符为一个数字代码,但HTML 4.0不容许这些字符在一个ID属性&#20540;傍边。

当一个样式只须要在任何文档中应用一次时,应用ID是很合适的。 ID与STYLE属性比拟,在于ID容许指定媒体的样式,并且也可以被应用于多个文档(固然每个文档只用一次)。

 -------------------------------------------------------------------------------

SPAN元素

SPAN元素被参加到HTML中以容许网页建造者给出样式但无须附加在一个HTML的布局元素上。SPAN在样式表中作为一个选择符应用,并且它也能接管STYLE、CLASS和ID属性。

SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG应用。最首要的差别在于固然EM和STRONG带有布局的意义,但SPAN就没有如许的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的感化。

 一些SPAN例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 <HTML>

<HEAD>

<TITLE>SPAN的例子</TITLE>

 <STYLE TYPE="text/css" MEDIA="screen, print, projection">

<!--

 .firstwords { font-variant: small-caps }

 -->

 </STYLE>

 </HEAD>

<BODY>

 <P><SPAN first few words</SPAN>前面是

  段落中少数的文字,会是小型大写字母。样式也可以内联,如改变文

  字的样式为<SPAN>Arial</SPAN>.</P>

  -------------------------------------------------------------------------------

  DIV元素

  DIV元素在功能上与SPAN元素相&#20284;,最首要的差别在于DIV ("division","项目组"的简称)是一个块 级元素。DIV可以包含段落、题目、表&#26684;甚至其它项目组。这使DIV便于建树不合集成的类,如章节、择要或备注。例如:

  <DIV

  <H1>Divisions/项目组</H1>

  <P>DIV元素在HTML 3.2中有定义,但HTML 3.2中只有ALIGN属机能兼容。HTML 4.0在属性中参加CLASS、STYLE、和ID属性。</P>

  <P>因为DIV可以包含其他块级集成,在用于建树文档的大型章节例如本备注是很有效的。</P>

  <P>请求封闭标识表记标帜。</P>

  </DIV>

  -------------------------------------------------------------------------------

  关于认证的备注

  少数应用了CSS样式的文档能在HTML3.2 (Wilbur)层(在WDG网站,译者注)获得认证。HTML3.2不会申明SPAN元素,也不申明CLASS、STYLE或ID属性,并且在LINK和STYLE元素中也很少支撑TYPE和MEDIA属性。

  这些有关的样式元素和属性对不支撑的浏览器不会有害,因为它们能安然地忽视。文档应用这些元素和属性可以被认证防御于HTML 4.0。

  地痞报-地痞人生活生计的故事!地痞人的家园 !地痞人本身的报刊!http://www.t128qq.bokee.com/

显示

  语法: display: <&#20540;>

  容许&#20540;: block | inline | list-item | none

  初始&#20540;: block

  实用于: 所有对象

  向下兼容: 否

  显示属性容许应用四个&#20540;中的一个来定义一个元素:

  block (在元素的前和后都邑有换行)

  inline (在元素的前和后都不会有换行)

  list-item (与block雷同, 但增长了目次项标识表记标帜)

  none (没有显示)

  每个元素都典范地由浏览器基于HTML规&#26684;建议的显现情势给出一个缺省的显示&#20540;。

  显示属性可能并不安然,因为它应用别的的不合适的&#26684;式显示元素。应用&#20540;none将封闭指定元素及其子元素的显示!

  -------------------------------------------------------------------------------

  空白

  语法: white-space: <&#20540;>

  容许&#20540;: normal | pre | nowrap

  初始&#20540;: normal

  实用于: 块级元素

  向下兼容: 是

  空白属性将决意如何处理惩罚元素内的空&#26684;. 该属性的&#20540;取以下三个中的一个:

  normal (将多个空&#26684;折叠成一个)

  pre (不折叠空&#26684;)

  nowrap (不容许换行,除非碰到<BR>标识表记标帜)

  -------------------------------------------------------------------------------

  目次样式类型

  语法: list-style-type: <&#20540;>

  容许&#20540;: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

  初始&#20540;: disc

  实用于: 带有显示&#20540;的目次项元素

  向下兼容: 是

  目次样式项属性指定目次项标识表记标帜的类型,当目次样式图象&#20540;为none或当图象载入选项被封闭时应用。

  例如:

  LI.square { list-style-type: square }

  UL.plain { list-style-type: none }

  OL { list-style-type: upper-alpha } /* A B C D E etc. */

  OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */

  OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

  -------------------------------------------------------------------------------

  目次样式图象

  语法: list-style-image: <&#20540;>

  容许&#20540;: <url> | none

  初始&#20540;: none

  实用于: 带有显示&#20540;的目次项元素

  向下兼容: 是

  当图象载入选项打开时,目次样式图象属性在指定目次项标识表记标帜应用哪个图象庖代由目次样式类型属性指定的标识表记标帜。

  例如:

  UL.check { list-style-image: url(/LI-markers/checkmark.gif) }

  UL LI.x { list-style-image: url(x.png) }

  -------------------------------------------------------------------------------

  目次样式地位

  语法: list-style-position: <&#20540;>

  容许&#20540;: inside | outside

  初始&#20540;: outside

  实用于: 带有显示&#20540;的目次项元素

  向下兼容: 是

  目次样式地位属性可以取&#20540;inside(内部) or outside(外部),此中outside是缺 省&#20540;。全部属性决意关于目次项的标识表记标帜应放在那边。若是应用inside&#20540;,换行会移到标识表记标帜 下,而不是缩进。应用的例子如下:

  Outside rendering:

  * List item 1

  second line of list item

  Inside rendering:

  * List item 1

  second line of list item

  -------------------------------------------------------------------------------

  目次样式

  语法: list-style: <&#20540;>

  容许&#20540;: <目次样式类型> || <目次样式地位> || <url>

  初始&#20540;: 不决义

  实用于: 带有显示&#20540;的目次项元素

  向下兼容: 是

  目次样式属性是目次样式类型、目次样式地位,和目次样式图象属性的略写。

  例如:

  LI.square { list-style: square inside }

  UL.plain { list-style: none }

  UL.check { list-style: url(/LI-markers/checkmark.gif) circle }

  OL { list-style: upper-alpha }

  OL OL { list-style: lower-roman inside }

上鸿沟

  语法: margin-top: <&#20540;>

  容许&#20540;: <长度> | <百分比> | auto

  初始&#20540;: 0

  实用于: 所有元素

  向下兼容: 否

  上鸿沟属性用一个指定的长度或百分比&#20540;来设置元素的上鸿沟。百分比&#20540;参考上级元素的宽度。容许应用负&#20540;边际。

  例如,以下的规矩将打消文件的上鸿沟。

  BODY { margin-top: 0 }

  重视若是鸿沟在垂直标的目标邻接(重叠)了,会改用此中最大的那个鸿沟&#20540;。

  -------------------------------------------------------------------------------

  右鸿沟

  语法: margin-right: <&#20540;>

  容许&#20540;: <长度> | <百分比> | auto

  初始&#20540;: 0

  实用于: 所有元素

  向下兼容: 否

  右鸿沟属性用一个指定的长度或百分比&#20540;来设置元素的右鸿沟。百分比&#20540;参考上级元素的宽度。容许应用负&#20540;边际。

  例如:

  P.narrow { margin-right: 50% }

  重视若是鸿沟在程度标的目标邻接(重叠)了,不会改用其它鸿沟&#20540;。

  -------------------------------------------------------------------------------

  下鸿沟

  语法: margin-bottom: <&#20540;>

  容许&#20540;: <长度> | <百分比> | auto

  初始&#20540;: 0

  实用于: 所有元素

  向下兼容: 否

  下鸿沟属性用一个指定的长度或百分比&#20540;来设置元素的下鸿沟。百分比&#20540;参考上级元素的宽度。容许应用负&#20540;边际。

  例如:

  DT { margin-bottom: 3em }

  重视若是鸿沟在垂直标的目标邻接(重叠)了,会改用此中最大的那个鸿沟&#20540;。

  -------------------------------------------------------------------------------

  左鸿沟

  语法: margin-left: <&#20540;>

  容许&#20540;: <长度> | <百分比> | auto

  初始&#20540;: 0

  实用于: 所有元素

  向下兼容: 否

  左鸿沟属性用一个指定的长度或百分比&#20540;来设置元素的左鸿沟。百分比&#20540;参考上级元素的宽度。容许应用负&#20540;边际。

  例如:

  ADDRESS { margin-left: 50% }

  重视若是鸿沟在程度标的目标邻接(重叠)了,不会改用其它鸿沟&#20540;。

  -------------------------------------------------------------------------------

  鸿沟

  语法: margin: <&#20540;>

  容许&#20540;: [ <长度> | <百分比> | auto ]{1,4}

  初始&#20540;: 不决义

  实用于: 所有元素

  向下兼容: 否

  鸿沟属性用一到四个&#20540;来设置元素的鸿沟,每个&#20540;都是长度、百分比或者主动。百分比&#20540;参考上级元素的宽度。容许应用负&#20540;边际。

  若是四个&#20540;都给出了,它们分别被应用于上、右、下和左鸿沟。若是只给出一个&#20540;,它被应用于所有鸿沟。若是两个或三个&#20540;给出了,省略了的&#20540;与对边相等。

  鸿沟声明包含以下例子:

  BODY { margin: 5em } /* 所有鸿沟设为5em */

  P { margin: 2em 4em } /* 上和下鸿沟为2em,左和右鸿沟为4em */

  DIV { margin: 1em 2em 3em 4em } /* 上鸿沟为1em,右鸿沟为2em,下鸿沟为3em,左鸿沟为4em */

  重视若是鸿沟在垂直标的目标邻接(重叠)了,会改用此中最大的那个鸿沟&#20540;。而程度标的目标则不会。

  应用鸿沟属性可以一次性地设置所有鸿沟;也可以选择应用上鸿沟、下鸿沟、左鸿沟和右鸿沟属性。

  -------------------------------------------------------------------------------

  上补白

  语法: padding-top: <&#20540;>

  容许&#20540;: <长度> | <百分比>

  初始&#20540;: 0

  实用于: 所有对象

  向下兼容: 否

  上补白属性描述上边框和选择符的内容之间有几许间隔。该&#20540;可所以一个长度或百分比。百分比的&#20540;参考上级元素的宽度。不克不及应用负&#20540;。

  -------------------------------------------------------------------------------

  右补白

  语法: padding-right: <&#20540;>

  容许&#20540;: <长度> | <百分比>

  初始&#20540;: 0

  实用于: 所有对象

  向下兼容: 否

  右补白属性描述右边框和选择符的内容之间有几许间隔。该&#20540;可所以一个长度或百分比。百分比的&#20540;参考上级元素的宽度。不克不及应用负&#20540;。

  -------------------------------------------------------------------------------

  下补白

  语法: padding-bottom: <&#20540;>

  容许&#20540;: <长度> | <百分比>

  初始&#20540;: 0

  实用于: 所有对象

  向下兼容: 否

  下补白属性描述下边框和选择符的内容之间有几许间隔。该&#20540;可所以一个长度或百分比。百分比的&#20540;参考上级元素的宽度。不克不及应用负&#20540;。

  -------------------------------------------------------------------------------

  左补白

  语法: padding-left: <&#20540;>

  容许&#20540;: <长度> | <百分比>

  初始&#20540;: 0

  实用于: 所有对象

  向下兼容: 否

  左补白属性描述左边框和选择符的内容之间有几许间隔。该&#20540;可所以一个长度或百分比。百分比的&#20540;参考上级元素的宽度。不克不及应用负&#20540;。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • css实现弹出框 css弹出菜单
    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的。其实就是用到了css里面的一个:target选择器+visibility属性。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标
    03-08
  • jfinal框架页面找不到相关css,js文件404
    在JFinalConfig中添加配置: @Overridepublic void configHandler(Handlers handlers) {handlers.add(new ContextPathHandler());}页面中添加:base href="${CONTEXT_PATH}/"/之前页面找不到资源,把tomcat工程路径去掉了(path=""),这样暂时解决了问题推荐
    03-08
  • 纯CSS3实现的一些酷炫效果 css实现炫酷背景
    纯CSS3实现的一些酷炫效果 css实现炫酷背景
      之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下:这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整。1.先看下页面结构:bodydiv class="container"!-- 脸 --div
    03-08
  • 移动端CSS底部固定和fixed定位在ios上的bug
    fixed定位在ios上的bugcss三栏布局假设我们页面的 HTML 结构是这样: div class="wrapper"div class="content"!-- 页面主体内容区域 --/divdiv class="footer"!-- 需要做到 Sticky Footer 效果的页脚 --/div/div方法1.:absolute通过绝对定位处理应该是常见的
    03-08
  • css实现图片翻转 css使图片旋转
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/h
    03-08
  • css3 渐变gradient
    css3 渐变gradient
           CSS3引入了背景渐变、background-origin、background-clip、background-size、遮罩等多个属性。这里将记录我从网上和书上学习的笔记和心得体会。   首先是渐变,我这里讲述的渐变不仅仅是背景色的渐变还将包括透明度渐变。以前做这种背景色渐
    03-08
  • CSS3中的px,em,rem,vh,vw辨析 css3 vw
    1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端          em换算工具:http://www.runoob.com/tags/ref-pxtoemconversion.html3、rem:与em类似,
    03-08
  • gulp自动化构建工具--自动编译less为css--学习
     1.安装      命令:npm install gulp-less 或者 cnpm install gulp-less2.编写文件 //获取gulpvar gulp = require('gulp')//获取gulp-less模块var less = require("gulp-less")//编译less//在命令行输入gulp less启动此任务gulp.task('less',function(){
    03-08
  • 关于动画Animate.css的使用方法
        首先贴个官网:https://daneden.github.io/animate.css/  1、引入animate css文件 1 head2 link rel="stylesheet" href="animate.min.css"3 /head   2、给指定的元素加上指定的动画样式名div class="animated bounceOutLeft"/div    这里包
    03-08
  • selenium Firefox禁用js,css.falsh,缓存,设置
    1 profile = FirefoxProfile() 2 #请求头 3 #profile.set_preference("general.useragent.override", util.http_agent_insert(xinhuaUtil.agent_path)) 4 # 激活手动代理配置(对应着在 profile(配置文件)中设置首选项) 5 profile.set_preference("network
    03-08
点击排行