引用CSS

引用CSS

• 使用外部样式表
• 使用内部样式表
• 使用行内样式表

使用外部样式表

CSS代码在一个独立的文件中，HTML通过link元素引入到页面

例：

    <link rel="stylesheet"href="main.css">
    其中 rel="stylesheet" 资源的类型是样式表
    href="main.css" 资源的位置是当前目录下的main.css文件

• 使用外部样式表的特点：

  1.实现了内容结构和表现形式代码分离，方便复用和维护

  2.使HTML代码更加纯净，有利于程序员和搜索引擎的阅读

  3.是开发页面的常用做法

使用内部样式表

将css代码写到style元素内容中

特点：

• 没有了样式表文件，在某些时候可以提升效率
• 多个页面难以共享样式，不利于代码复用
• HTML和CSS代码混杂，不利程序员和搜索引擎阅读，不利于维护
• 在某些对效率要求苛刻或测试的场景下使用
• 一个样式表可以引用多个HTML页面，一个页面也可以引用多个样式表

使用行内样式表

css代码写在某个元素开始标记的style属性中，行内样式不写选择器

特点：

• 没有了样式表文件，在某些时候可以提升效率
• 多个页面难以共享样式，不利于代码复用
• HTML和CSS代码混杂，不利程序员和搜索引擎阅读，不利于维护
• JavaScript操作的是行内样式
• 在测试的场景下使用

css注释

css注释的书写格式为：/* 注释内容 */

作用是方便开发者和维护人员，主要用于描述代码功能

css规则

css代码是由一个一个规则组成

每个规则指定了对哪些元素应该用什么样式

        h1{color:red;test-align:center}
        选择器             声明块
        选择器表示该样式规则应用到哪些元素上
        声明块表示有哪些样式规则

csc选择器决定了样式规则运用哪些元素

• 元素选择器 格式为：标记名{/* 声明块 */}
• 类选择器 格式为：.类名{/* 声明块 */}
• ID选择器 格式为：#ID值{/* 声明块 */}

1.元素选择器：所有与该标记名匹配的元素，都将应用声明块中的规则

2.类选择器：所有class属性为指定类名的元素，都将应用声明块的规则，如果HTML对同一个标签取多个类名的话，不同类名之间用空格号隔开

    多个类名是帮助我们代码复用

3.ID选择器：属性id为指定的元素，将应用声明块中的规则，在同一个HTML文档中，元素的id值必须唯一

css重置结构

由于浏览器有个默认的HTML样式，不同的浏览器默认样式会有差异，为了让页面获得跨浏览器的兼容性，需要用一些css代码覆盖浏览器的默认样式

超链接

超链接的格式：

        <a href"目标">内容</a>
        href"目标"为链接的目标，就是页面的地址（路径），锚点，功能链接

锚点的格式： 1.id属性的元素

2.a中href的值是#加上1的属性值

• 在新窗口打开：

  <a target="_blank"href="目标">内容</a>
  _blank 为新窗口打开