网页的美容师-CSS

最新推荐文章于 2022-05-22 12:55:07 发布

原创最新推荐文章于 2022-05-22 12:55:07 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

CSS的引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。
例如

<hr  color="red"  />

        <p style="color: red">乌鸦坐飞机，龙卷风摧毁停车场</p>

网页效果
在这里插入图片描述

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例

p{
            /* font: font-style  font-weight  font-size/line-height  font-family;*/
            /*font: italic bold 12px/20px arial,sans-serif ;*/
            color: green;
        }

        span{
            font-size: 100px;
        }

        .p{
            color: pink;
        }
        .blue{
            color: blue;
        }
        .red{
            color: red ;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
        .red1{
            color: red;
        }
        
	<p>小鸡炖蘑菇</p>
    <p>托儿所</p>
    <p>鱼尾纹</p>
    <span>儿童劫</span>
    <div class="p">提款姬</div><hr/>


        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red1">e</span><hr>

效果
在这里插入图片描述
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式(推荐)

<link type="text/css"  href="CSS文件路径" />

2、导入式

<style type="text/css">
  @import url("css文件路径");
</style>

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css.css">
    <style type="text/css">
        @import "css.css";
    </style>
</head>
<body>
    <p class="p1">改革春风吹满地</p>
</body>
</html>