CSS之初学入门

目录

什么是CSS?

CSS的注释

CSS的语法

CSS的书写位置

第一种方式:内联样式(行内样式)

第二种方式:内部样式表

第三种方式:外部样式表


什么是CSS?

        CSS的全称是层叠样式表,可以用来设置网页中元素的样式。网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式,而最终我们能看到的只有最上边的一层。

CSS的注释

       CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中。

( 快捷键为输入法英文状态下:Shift+! )

CSS的语法

<head>
<style type="text/CSS">
 标签名/选择器 {
    属性1:属性值1;
     属性2:属性值2;
      属性3:属性值3;
		.....
}
</style>
</head>

       CSS的语法:选择器/标签名{属性:属性值;}

CSS的书写位置

第一种方式:内联样式(行内样式)

<body>
    <div>
   <em style="color: red; background-color: pink; font-size: 36px">便罪学法当,婵而生。</em> 
    </div>
</body>

       写在开始标签里面,写一个style属性,将一组一组的样式写在style属性值里面。可以写多组样式,但一定要用;隔开。

  • 优点:优先级高,不易被其他样式覆盖;书写方便;
  • 缺点:一次只能设置一个元素;容易出现重复代码使代码繁琐

第二种方式:内部样式表

<head>
    <style>
         p {color: red;font-size: 50px;}
    </style>
</head>

       写在head标签内部,先写一个子元素style标签,再通过选择器选中对应的要设置的元素/标签,在{}里设置一组样式或多组样式,同样也需要用;隔开。

  • 优点:结构和样式分离,一次可以设置多个元素,使编写简洁明了
  • 缺点:编写不太方便,需要上下翻找确定样式;优先级相对内联样式低,较容易被覆盖

第三种方式:外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./00.css">
</head>
<body>
    <h1>沁园春·雪</h1>
</body>
</html>

    图示:.CSS    

         在html文件的外部新建一个.css文件,在css文件里写样式,然后通过在head标签内部写子标签link标签,将html文件和css文件联系在一起。(link标签里有href属性,在href里写下引入css文件的路径。)

  • 优点:实现结构样式分离,更改一个的同时可以更改多个,大大提升效率;可重复使用
  • 缺点:需要引入,编写和查找不便;需要链接才可使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值