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代码的分离。实现了代码的复用。
推荐使用这种方式!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值