Web前端学习—基础篇(10)_CSS的语法、CSS的三大引入方式分别是什么、样式优先级

前端学习——基础篇

四、CSS 学习

? CSS即层叠样式表(cascading style sheets)
? 用于美化web页面的外观

4.1、css语法

  • 组成
    选择器{ 属性名1: 属性值; 属性名2: 属性值; }
    声明语句1 ; 声明语句2
  • css注释
    /* css注释内容 */

4.2、css引入方式

4.2.1、行间样式

  • 位置:开始标签内部
  • 语法:使用style属性
<div style="width: 100px; height: 100px; background-color: red"></div>
  • 应用场景
    适用于单个HTML标签设置特殊样式

  • 特点
    优点:比较直观
    缺点:相同样式多次定义,造成代码冗余,难于修改,作用范围小,代码不能复用,尽量不用;

    ? 结构和表现不分离

4.2.2、内部样式

  • 位置:在head标签内部
  • 语法:使用style标签对
    <head>
        <style type="text/css"> 
            选择器{ 属性:属性值; }
        </style>
    </head>
  • 应用场景:
    适用于单个HTML文档设置特殊样式
  • 特点
    相对于行间样式来说,代码可以复用,作用范围比行间样式大;
    结构和表现处于半分离状态

4.2.3、外部样式

  • 位置:放在外部的css文件中,在head标签内部使用link标签引入
  • 语法:
    <head>
        <link   rel="stylesheet"  href="css文件路径"   type="text/css">
    </head>
- 新建一个css文件夹,并在文件夹内新建一个后缀名为.css的文件
- 在css文件中,输入:   @charset   "utf-8";
- 回到HTML文件,在head标签内使用link标签引入外部css文件
  • 应用场景
    适用于多个HTML文档具有相同样式时
  • 特点
    便于修改、维护,适用范围广,可以复用
    实现了结构和表现彻底分离

4.2.4、样式引入方式优先级

  • 内部样式和外部样式就近原则
  • 行间样式优于内部和外部

Web前端学习—基础篇(10)_CSS的语法、CSS的三大引入方式分别是什么、样式优先级

上一篇:异步上传webUploader


下一篇:mariadb是替代MySQL的好方式