css常用属性解释及案例
.center{text-align:center}
this heading will be center-aligned
this paragraph wil slso be center-aligned
.fancy td{
color:#f60;
background:#666;}
td.fancy{color:#f60;
background:#666;}
hr{color:sienna;}
p{margin-left:20PX;}
body{background-image:url("images/back40.gif");}
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/back40.gif");}
this is a paragraph
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3{color:red;
text-align:left;
font-size:8pt;}
而内部样式表拥有针对 h3 选择器的两个属性:
h3{text-align:right;
font-size:20pt;}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
fontsize:20PT;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
P{background-color:gray;}
p{background-color:gray; padding:20px;}
body{background-image:url(/i/eg_bg_04.gif);}
一个段落
p.flower{background-image:url(/i/eg_bg_03.gif);}
行内元素
a.radio{background-image:url(/i/eg_bg_03.gif);}
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body{background-image:url(/i/eg_bg_03.gif);
background-repeat:repeat-y;}
可以利用 background-position 属性改变图像在背景中的位置。
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
body{background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p{background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;}
单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left
body{background-image:url('i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50% ;}
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body{background-image:url(/i/02.gif);
background-repeat:no-reeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
background简写属性,作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
p{text-indent:5em;}
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
p{text-inent:-5em;}
p{text-indent:-5em;padding-left:5em;}
在下例中,缩进值是父元素的 20%,即 100 个像素:
div{width:500px;}
p{text-indent:20%;}
this is a paragragh
继承
text-indent 属性可以继承,请考虑如下标记:
div#outer {width:500px;}
div#inner{text-indent:10%;}
p{width:200px;}
some text.some text.some text.
this is a paragragh.
以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平对齐
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
text-align:center 与
您可能会认为 text-align:center 与 元素的作用一样,但实际上二者大不相同。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
字间隔
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
p.spread{word-spacing:30px;}
p.tight{word-spacing:-0.5em;}
this is a pargraphh.the spaces between words will be inceased.
this is a paragraph. the spaces between words wil be increased.
字母间隔
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
h1{leter-spacing:-0.5em}
h4{letter-spacig:20px}
this is header 1
this is header 4
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值:
none
uppercase 全大写
lowercase 全小写
capitalize 首字母大写
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:
h1 {text-transform: uppercase}
使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。
文本装饰
接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
none
underline 下划线
overline 上划线
line-through 贯穿线
blink 文本闪烁
none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:
a{text-decoration:none;}
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited{text-decoration:underline overline;}
不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来。
总结
下面的表格总结了 white-space 属性的行为:
值空白符换行符自动换行
pre-line合并保留允许
normal合并忽略允许
nowrap合并忽略不允许
pre保留保留不允许
pre-wrap保留保留允许
如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明
body{font-family:sans-serif;}
h1{font-family:georgia;}
h1 {font-family: Georgia, serif;}延续下一个字体
要修改用于列表项的标志类型,可以使用属性 list-style-type:
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。
ul li {list-style-image:url(xxx.gif)}
只需要简单地使用一个 url() 值,就可以使用图像作为标志。
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
术语翻译
element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。
在 w3school,我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距,边框外的空白是外边距,很容易记吧:)
h1{padding:10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1{padding:10px 0.25em 2ex 20%}
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
padding-top
padding-right
padding-bottom
padding-left
h1{padding-top:10xp;
padding-right:0.25em;
padding-bottom:2ex;
padding-left:20%;}
下面这条规则把段落的内边距设置为父元素 width 的 10%:
p {padding: 10%;}
例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。
This paragragh is contained within a DIV that has a width of 200 pixels.
注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
a:link img{border-style:oust;}
p.aside{border-style:solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
border-top-style
border-right-style
border-bottom-style
border-left-style
p{border-style:solid solid solid none;}
p{border-style:solid;border-left-style:none;}
注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。
所以,我们可以这样设置边框的宽度:
p{border-style:solid;border-width:5px;}
p{border-style:solid;border-width:thick;}
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框:
p{bordr-style:solid;border-width:15px 5px 15px 5px;}
p{border-style:solid; border-width:15px5px;}
您也可以通过下列属性分别设置边框各边的宽度:
border-top-width
border-right-width
border-bottom-width
border-left-width
P{order-style:solid;
border-top-width:15px;
border-right-width:5px;
border-bottom-width:15px;
border-left-width:5px;
}
如果希望显示某种边框,就必须设置边框样式,比如 solid 或 outset。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值。
p{border-style:solid;
border-color:blue rgb(25%,35%,45%) #9099090 red;}
如果颜色值小于 4 个,值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色,左右边框是红色:
p{border-style:solid;
border-color:blue red;}
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:
border-top-color
border-right-color
border-bottom-color
border-left-color
要为 h1 元素指定实线黑色边框,而右边框为实线红色,可以这样指定:
h1{border-style:solid;
border-color:black;
border-right-color:red;}
透明边框
我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:
我们为上面的链接定义了如下样式:
a:link,a:visited{border-style:solid;
border-width:5px;
border-color:transparent;}
a:hover{border-colo:gray;}
设置外边距的最简单的方法就是使用 margin 属性。
h1{maigin:0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
h1{margin:10px 0px 15px 5px;}
与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:
margin: top right bottom left
另外,还可以为 margin 设置一个百分比数值:
p {margin : 10%;}
利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:
h1 {margin: 0.25em 1em 0.5em;}/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}/* 等价于 1px 1px 1px 1px */
再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):
p {margin: auto auto auto 20px;}
单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:
一个规则中可以使用多个这种单边属性
当然,对于这种情况,使用 margin 可能更容易一些:
p {margin: 20px 30px 30px 20px;}
p {margin-left: 20px;}
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联
some text
some more text.
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
请把鼠标移动到这些链接上,以查看效果:
模版解析
顶部填充为0px
宽度980px 左浮动 边缘上下为5 左右为0
背景图不复制 上 右
Tag:cssdebug诊断信息需要在index.php文件中开启开发者模式才能查看
-
用微信 “扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
本文版权归原作者所有,转载请注明原文来源出处,学技巧网站制作感谢您的支持!
发表评论:
最新建站教程
猜你也喜欢看这些