链接的相关属性

男娘i 2022-06-05 08:27 224阅读 0赞

# media #

![20171122151708714][]

代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>media的用法</title>
    <link href="yanse.css" rel="stylesheet" type="text/css">
    
    <link href="print.css" rel="stylesheet" type="text/css" media="print">
    </head>
    
    <body>
    <body>
    	<h1>春晓</h1>
    	<p>春眠不觉晓</p>
    	<p>处处闻啼鸟</p>
    	<p>夜来风雨声</p>
    	<p>花落知多少</p>
    </body>
    </body>
    </html>

yanse.css

@charset "utf-8";
    /* CSS Document */
    body{background: #238E61;color: azure;}

print.css

@charset "utf-8";
    /* CSS Document */
    body{background: red; color: aliceblue;font-size: 60px;}

结果：

media.html 打印预览

![20171122152229671][] ![20171122152234811][]

# sizes #

![20171122155135454][]

# type #

![20171122155146314][]

# target #

![20171122160051341][]

代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>target的用法</title>
    <base href="http://www.baidu.com" target="_blank">
    </head>
    
    <body>
    <a href="">点我</a>
    <a href="">点你</a>
    </body>
    </html>

不加target="—blank",点击时会覆盖当前窗口，一直都只有一个窗口。

![20171122160346078][]

加target="—blank",点击时会不覆盖当前窗口，多个窗口并存。

![20171122160231240][]

[20171122151708714]: /images/20220605/bbac35e9ea4e4b18820dd59e5913ee53.png
[20171122152229671]: https://img-blog.csdn.net/20171122152229671
[20171122152234811]: /images/20220605/6c33aa2938f0436198e1aa9c3fb6c21f.png
[20171122155135454]: /images/20220605/1e36350eea6440d28c6112d2a8590ba1.png
[20171122155146314]: /images/20220605/3b5e82709e804cb48d992a3a09eecda8.png
[20171122160051341]: /images/20220605/58085f02cc1540f6a74b950019f0d783.png
[20171122160346078]: /images/20220605/f28e24f806774175ac788ab7e303e120.png
[20171122160231240]: /images/20220605/06b5065d4a0847f298c1f4a98bb62947.png