1. 1 CSS定义与使用详细篇-几个款式

马肤
这是懒羊羊

温馨提示:这篇文章已超过512天没有更新,请注意相关的内容是否还可用!


内联样式

 1. 1 CSS定义与使用详细篇-几个款式,屏幕截图 2022-12-01 085800.png,html,css,第1张

内联样式就是在元素标签内使用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>

效果图

 1. 1 CSS定义与使用详细篇-几个款式,屏幕截图 2022-12-01 083734.png,html,css,第2张




内部样式图

内部样式表是写在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>

效果图


 1. 1 CSS定义与使用详细篇-几个款式,屏幕截图 2022-12-01 085026.png,html,css,第3张




用<link>标签链接样式表文件


<link>标签必须放到页面的 <head>…</head>标签对内。

其格式为:

<head>

<link  rel= "stylesheet"  href="外部样式表文件名.css "  type="text/css" >

</head>




文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,407人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码