2-CSS概述

1、CSS概述

　CSS：(Cascading Style sheets）层叠样式表，用于修饰、美化网页的一门语言。

　使用css设置样式，可以将设置样式的css代码和展示数据的html代码进行分离，并实现代码的复用。增强网页的展示能力。

　总结：css就是用于美化、渲染网页的一门技术。

2、在HTML中引入css

　方式1：通过style属性引入css

　　这种是通过标签上的style属性为当前标签设置样式，代码示例：

<div style="border:2px solid red; font-size:26px; background:pink">这是一个div</div>

　　由于这种方式代码无法复用（如果多个元素都需要相同的样式，每个标签上都需要设置一次），而且当样式代码特别多时，容易造成页面结构的混乱，不利于后期的扩展和维护。　

　方式2：通过style标签引入css

　　在head标签内部提供一个style标签，在style标签内部可以选中元素，对元素进行修饰，代码示例：

<head>
    <!-- type="text/css":是指定MIME类型，
    其中text是指对象为网页中的文本；
    css或是javascript是指当前指定的文本类型  -->
    <style type="text/css">  
        span{/* 选中当前html中所有的span元素 */
        border:2px solid green;
        font-size:30px;
        font-weight:bolder;
        }
    </style>      
</head>

　　这种方式是将所有css样式代码集中在一个style标签内部统一管理，初步实现了html代码和css代码分离，实现代码复用。而且并没用造成页面结构的混乱。

　方式3：通过link链接引入外部的css文件

　　在head标签下添加一个link标签，link标签可以引入外部的css文件，代码示例：

<head>    
    <link rel="stylesheet" href="4-demo.css" />
</head>

　　demo.css文件的内容：

@charset "UTF-8";
p{
    border:2px solid blue;
    color:red;
    font-family: "华文琥珀";
    text-indent:50px; /* 首行缩进 */
}

　　这种方式是将所有的css代码集中在一个css文件中统一进行管理，真正的实现了html代码和css代码分离，实现了代码的复用。

 

--------------------------我是结束线----------------------------------

posted @ 2022-05-19 22:19  小吴的日常  阅读(58)  评论(0)    收藏  举报