第一种方式:
< div style =" background-color : #00ff00 ; font-size : 20px " > 第一种方式 </ div >
缺点:这种方式暴露的缺点是 代码严重重复。
第二种方式:
< div style =" background-color : #00ff00 ; font-size : 20px " > 第一种方式 </ div >
缺点:这种方式暴露的缺点是 代码严重重复。
第二种方式:
格式:标签名{
属性一:属性值;
属性二:属性值;
...
}
例子:第一步: < style type = "text/css" >
第三种方式:
将 css的代码专门抽取到一个 单独 css文件中去,然后在 html页面中去引入显示样式文件 就可以了, 这样可以实现代码的复用
例子:第一步:Text03.css
属性一:属性值;
属性二:属性值;
...
}
例子:第一步: < style type = "text/css" >
div
{
background-color
:
#00ff00
;
font-s
i
ze:20px;
}
</
style
>
第二步:
<
div
>
第二种方式
</
div
>
缺点: 这种方式中修饰的时候 只适用于单独的某个页面。 那么如果出现多个页面 有相同的 标签,并且实现同样的显示样式的时候,那么 这种方式书写的 css代码又会出现严重的重复。
第三种方式:
将 css的代码专门抽取到一个 单独 css文件中去,然后在 html页面中去引入显示样式文件 就可以了, 这样可以实现代码的复用
例子:第一步:Text03.css
#div03
{
background-color
:
#00ff00
;
font-size
:
20px
;
}
第二步:<
style
type
=
"text/css"
>
第四种方式:
上面第三种方式 通常 看上去不美观, 所以 就出现第四中方式, 使用一个 link标签引入进来. 使用link引入标签引入css代码是开发中最常用的.
例子:第一步:同上
@import
url(css/Text03.css)
;
</
style
>
第三步:
<
div
id
=
"div03"
>
第三种方式
</
div
>
第四种方式:
上面第三种方式 通常 看上去不美观, 所以 就出现第四中方式, 使用一个 link标签引入进来. 使用link引入标签引入css代码是开发中最常用的.
例子:第一步:同上
第二步:
<
link
href
=
"css/Text03.css"
rel
=
"stylesheet"
type
=
"text/css"
>
第三=步:同上