CSS中style⽤法详解
css样式表按其所在位置分三种:
1.内嵌样式表
2.内部样式表
3.外部样式表
下⾯详细解释⼀下:
1.内嵌样式表是写在使⽤它的标签(Tag)内的,例如要在<p>标签中使⽤,
其语法为:<p style font-size:20pt>这段⽂字使⽤了内嵌样式表,更改了字体⼤⼩为20</p>
2.内部样式表不同于内嵌样式表,其是写在html⽹页的<head></head>标签之间的,所以它对本⽹页全部有效。应注意的是,因为它不是写在某⼀个标签内的,所以在写的时候要注意,⾃⼰想在那个标签内使⽤这个样式表,再定义的时候也要写清楚,否则会造成整个页⾯的混乱。例如:
<html><head>
<body>
<!--这个样式表只⽤了⼀部分属性,定义是在<style>前⾯的p.mylayout,这⾥⾯的p意思是在<p>这个标签⾥才可以使⽤这个样式表,⽽mylayout是这个样式表的名字,也可以理解为这个样式表的变量名(把⼀个样式表当成⼀个变量),便于以后在<p>标签中调⽤。注意下⾯的调⽤。--->
<p class="mylayout">这段⽂字使⽤了样式表</p>
<p>这段⽂字没有使⽤样式表</p>
</body></html>
可以看到,在定义内部样式表的时候,<style>前⾯声明的时候应该⾸先声明在哪个标签⾥使⽤这个样式表,如果并不想在该⽹页所有的此标签中都使⽤这个样式表则在声明的标签后⾯加上⾃⼰定义的⼀个样式表名称,例如上⾯的p.mylayout,意为只能在该⽹页的<p>标签中使⽤此样式表,在要使⽤这个样式表的<p>标签中声明,声明⽅式为<;标签⾃定义样式表名称>
利⽤样式表选择,你可以⽤同样的HTML标签构成不同的样式。⽐如说,你希望段落<p>有两种样式,⼀种是居中对齐,⼀种是居右对齐。你就可以写如下样式:
p.right {text-align:right}
< {text-align:center}
其中right和center就是两个样式表。然后你就可以引⽤这两个样式表,⽰例代码如下:
<p class="center">这⼀段居中显⽰。</p>
<p class="right">这⼀段是居右显⽰。</p>
也可以不⽤HTML 标签,直接⽤“.”加上样式表名称。⽰例代码如下:
.center {text-align: center}
这种通⽤的样式表名称就没有标签的局限性,可以⽤于不同的标签。⽐如:
<h1 class = "center">这个标题居中显⽰。</h1>
<p class = "center">这个段落居中显⽰。</p>
3.外部样式表
外部样式表就是将样式表的内容单独写到⼀个notepad中,并保存为后缀为.css的⽂件,在你写的想要调⽤的⽹页中加上如下的代码(当然还是加到<head></head>之间):
<link href="你css⽂件所在的⽂件夹" rel="stylesheet" type="text/css">
例如:
先写⼀段代码并存为p.css
cssclass属性然后在你写的⽹页中调⽤这个样式表:
<HTML>
<HEAD>
<link href="p.css所在的相对路径" rel="stylesheet" type="text/css">
</HEAD >
<BODY>
<p class="mylayout"> 这个标题使⽤了Style 。</p>
欢迎光临学⽹,收藏本篇⽂章 [1] [2]
$False$
<p>这个标题没有使⽤Style。</p>
</BODY>
</HTML>
所以⼀个外部样式表可以被很多⽹页调⽤,这就是外部样式表的好处。
样式表也可以串联,即⼀个⽹页⽤多个css,其串联的顺序是:内嵌>内部>外部>浏览器⾃⾝的也就是说当⼀个⽹页有内部css时,它在的调⽤外部css就被覆盖了(即外部css不起作⽤)
css样式表定义时的嵌套说明:
p b {color:blue;}
使⽤时:<p>这段⽂字在b标签中的为<b>蓝⾊</b></p>
cursor:hand 这个属性是将⿏标变成⼿的形状。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论