CSS基础知识总结之基本概念

基本概念

CSS 指层叠样式表 (Cascading Style Sheets)

为什么要用CSS?

HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体,颜色。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。

使用样式表可以有三种方式:

(1)内联样式

讲样式定义在style属性中,内容和表现形式高度耦合。维护困难,不利于分工合作。

<p style="font-size:24px;color:red;">内联样式的演示</p>

(2)内部样式

在<head>标签中通过<style>标签来定义。

内容和表现形式的耦合程度降低了,但是也在同一个html文件中,没有实现完全分离。定义的样式只能在当前的html文件中使用。

 <style>
        p{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
<p style="font-size: 24px;color: aqua">内部样式1</p>
<p>内部样式2</p>

(3)外部样式

首先需要定义一个样式表文件.css,(.css文件中可以用/* */)

外部样式使得内容和表现形式彻底分离,有利于分工合作及维护,可在多个html文件中使用。尽量使用外部样式。

css样式

/*
 设置字体和颜色
*/
p{
    font-size: 36px;
    color: red;
}

html中使用一个标签来使用定义的CSS样式

<heah>

   <link rel="stylesheet" type="text/css" href=".css路径">

</head>

<body>

<p>CSS样式定义</p>

</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值