初学HTML5－－CSS样式（一）

最新推荐文章于 2021-12-31 16:47:07 发布

Summer_shining

最新推荐文章于 2021-12-31 16:47:07 发布

阅读量908

点赞数 1

分类专栏： HTML5 文章标签： html5 CSS 行内样式业内样式外部样式

本文链接：https://blog.csdn.net/Summer_shining/article/details/52155466

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

－什么是CSS

CSS的全称是Cascading Style Sheets 层叠样式表

它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

－CSS的编写格式是键值对形式的比如：

color：red

background－color：blue

font－size：20px

冒号：左边是属性名，冒号：右边是属性值

－CSS的3种书写形式

1.行内样式：（内联样式）直接在标签的style属性中书写

<body style="background-color: paleturquoise;">
    <div style="color: blue; font-size: 28px; background-color:
    antiquewhite">我是容器标签
    </div>
    <!--style设置了字体颜色color: 字体大小font-size: 边框border: -->
    <!--边框boder:设置了宽度 样式:(solid 实线 dashed:虚线 double: 双线) 颜色-->
    <p style="color: pink; font-size: 20px; border: 5px dashed
    mediumpurple">我是段落标签</p>

</body>

2.业内样式：在本网页的style标签中书写

<!DOCTYPE html>
<!--<html lang="en">-->
<head>
    <meta charset="UTF-8">
    <title>CSS页内样式</title>
    <!--
    css的规律:
    1.就近原则
    2.叠加原则
    -->
    <!--设置样式-->
    <style>
        div{
            /*设置div标签内的字体颜色为红色*/
            color: red;
            /*字体大小为30px*/
            font-size: 30px;
            /*边框:宽度:2px 实线 灰色*/
            border: 2px solid gray;
        }
        p{
            /*设置p标签内的字体颜色为蓝色*/
            color: blue;
            /*字体大小18px*/
            font-size: 18px;
            /*背景颜色粉色*/
            background-color: pink;
        }
    </style>
    <!--
    网站 = N个网页 + 服务器 + 数据库 + ...
    -->
</head>
<body>

    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>

</body>
</html>

3.外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

index.css文件中设置样式，代码如下：

div
{
    color: aqua;
    font-size: 30px;
    background: plum;
}
p{
    color: gold;
    font-size: 9px;
    border: 2px dashed greenyellow;
}

.html文件中编写网页内容及引用index.css文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的外部样式</title>
    <!--引用外部的样式-->
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>
    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <div>我也是容器标签</div>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
    <p>我也是段落标签</p>
</body>
</html>

href 用来链接一个文件 rel：关系