内联样式
内联样式就是在元素标签内使用style属性,style属性值可以包含任何CSS样式声明。
内联样式的格式为:
<标签 stle= "属性:属性值; 属性:属性值…"> 只要按照这个格式去写我们的css其实就好啦
需要说明的是,内联样式由于将表现和内容混在一起,不符合Web标准,所以要慎用这种方法,
当样式仅需要在一个元素上应用一次时可以使用内联样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS样式</title>
</head>
<body>
<p style="font-size:18px; color:red">此行文字被style属性定义为红色显示</p>
<p>此行文字没有被style属性定义</p>
</body>
</html>
<html>
效果图
内部样式图
内部样式表是写在HTML的<head></head>里面的,只对所在的网页有效。
(1)内部样式表的格式为:
<style type="text/ess">
选择符1{属性:属性值;属性:属性值…} /*注释内容*/
选择符2{属性:属性值;属性:属性值…}
选择符n{属性:属性值;属性:属性值…}
</style>
我们按照这个思路去写就好了,写代码就像是一个家你往里面装饰,搬东西,不合适的再替换掉,
组合选择符格式
除了在<syle>…<syle>
内分别定义各种选择符的样式外,
如果多个选择符具有相同的样式,可以采用组合选择符,以减少重复定义的麻烦,
其格式为:
<style type="text/ess">
选择符1,选择符2,…,选择符n
{属性:属性值;属性:属性值…}
</style>
直接上代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定义内部样式表vps857</title>
<style text="text/css">
.text1{font-size:18px; color:red;}
</style>
</head>
<body>
<p class="text1">此行文字被内部样式定义为红色显示</p>
<p>此行文字没有被内部的样式定义</p>
</body>
<html>
效果图
用<link>标签链接样式表文件
<link>标签必须放到页面的 <head>…</head>标签对内。
其格式为:
<head>
…
<link rel= "stylesheet" href="外部样式表文件名.css " type="text/css" >
…
</head>
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...