CSS简介

「1. HTML的局限性」

  • HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。

  • 操作html属性不方便

  • HTML里面添加样式带来的是无尽的臃肿和繁琐

「2. CSS网页的美容师」

  • 让我们的网页更加丰富多彩,布局更加灵活自如。

  • CSS最大的贡献:让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS

「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。

  • 作用

    • 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

    • CSS以HTML为基础,提供了丰富的功能,如字体、样式、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。

CSS语法规范

CSS规则由两个主要的部分构成:选择器以及一条或多条声明。

选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式。

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

CSS选择器作用 

  • 选择器分为基础选择器 和复合选择器两个大类,我们这里先讲解一下基础选择器。

  • 基础选择器是由单个选择器组成的

  • 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

  • 「1. 标签选择器」

  • 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

  • 作用:可以把某一类标签全部选择出来。

  • 优点:快速为网页中同类型的标签统一样式

  • 缺点:不能设计差异化样式。

  • 标签名{
       属性1:属性值1; 
       属性2:属性值2; 
       属性3:属性值3; 
     } 

    「2. 类选择器」

  • 优点:可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

  • 注意:类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

    • 长名称或词组可以使用中横线来为选择器命名。

    • 不要纯数字、中文等命名, 尽量使用英文字母来表示。

    • 多类名选择器:各个类名中间用空格隔开。

    • .类名  {   
          属性1:属性值1; 
          属性2:属性值2; 
          属性3:属性值3;     
      }
      
      <p class='类名'></p>

      「3. id选择器」id选择器使用#进行标识,后面紧跟id名

    • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。

    • #id名 {
           属性1:属性值1; 
           属性2:属性值2; 
           属性3:属性值3; 
      }
      <p id="id名"></p>

      id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。

  • 「4. 通配符选择器」

  • 通配符选择器用*号表示,* 就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

  • 注意:会匹配页面所有的元素,降低页面响应速度,不建议随便使用。

  • * { 
       属性1:属性值1; 
       属性2:属性值2; 
       属性3:属性值3; 
    }

    例如下面代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

  • * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }

    「5. 基础选择器总结」

    选择器作用缺点使用情况用法
    标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p { color:red;}
    类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }
    id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}
    通配符选择器选择所有的标签选择的太多,有部分不需要不推荐使用* {color: red;}

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱编程的小疯子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值