CSS概述、引入css的三种方式

什么是CSS CSS: (Cascading Style sheets) 层叠样式表,用于修饰、美化网页的一门语言。 使用css设置样式,可以将设置样式的css代码和展示数据的html代码进行分离,并且可以实现代码的服用。增强网页的展示能力。 总结:css就是用于美化、渲染网页的一门技术 在HTML中引入CSS 这种是通过标签上的style属性为当前标签设置样式,代码示例

<!--
    1.通过标签上的style属性给div设置样式
    边框:2px solid red
    字体大小:26px
    背景颜色为:pink
-->
<div style="border: 2px solid red; font-size: 26px; background: pink; ">
    这是一个div...
</div>

方式2:通过style标签引入css 在head标签内部提供一个style标签,在style标签内部可以选中元素,对元素进行修饰,代码示例

<!-- 2.通过style标签给span设置样式如下:
    边框: 2px solid green
    字体大小: 30px
    字体加粗
-->

<style type="text/css">
    /* ****** CSS样式 ****** */
    span{
           
     /* 选中当前html中所有的span元素 */
        border: 2px solid green;
        font-size: 30px;
        font-weight: bolder;
    }
</style>

方式3:通过link链接引入外部的css文件 在head标签下添加一个link标签,link标签可以引入外部的css文件。代码如下: 在html中引入css文件

<!-- 引入demo.css文件 -->
<link rel="stylesheet"  href="demo.css"/>

demo.css文件的内容:

@charset "UTF-8";

p{
          
   
    border: 2px solid blue;
    color: red;
    font-family: "华文琥珀";
    text-indent: 50px;
}

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

经验分享 程序员 微信小程序 职场和发展