css的四种书写方式-html tutorial-php.cn

css的四种书写方式

WBOY

Lepaskan： 2016-10-20 10:09:25

asal

1385 orang telah melayarinya

优先级：外部样式

优先级，即：同名的选择器右边的会覆盖左边

1.内部样式表

<span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span>
        <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">内部样式表，一般用于覆盖公用样式</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
        ＃headTip </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0xff5</span><span style="background-color: #f5f5f5; color: #000000">;</span>
         <span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span></span></span>

Salin selepas log masuk

2.使用link标签，在文档中声明使用外接资源，最常用的一种方式。

css外部样式表指定编码的@CHARSET="utf-8"; 需要放在第一行。

<span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">link </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="./my-common.css"</span><span style="color: #ff0000"> rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> media</span><span style="color: #0000ff">="screen"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">><br></span></span></span>

Salin selepas log masuk

3.@方式，引入css,注意这个是异步加载的，在整个html加载之后才加载，会导致页面闪烁。不推荐使用。

<span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        @import 'my-common.css';
    </span><span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span></span></span>

Salin selepas log masuk

4.内联样式表,优先级最高最直白，但不能复用不容易维护。

<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="color:0x550;font-size:30px;"</span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span>

Salin selepas log masuk