01 认识css

# 1.html的局限性 #

只关注内容语义

-    html满足不了设计者需求
-    操作html属性不方便
-    HTML里面添加样式很臃肿

# 2.css网页美容师 #

html专注去做结构呈现，样式交给css

# 3.css初识 #

概念:css，通常称为css样式表或层叠样式表

作用:主要用于设置HTML中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距）以及版面布局和外观显示样式

# 4.引入CSS样式表（书写位置）

书写css样式

## 4.1 行内式（内联样式） ##

- 概念
    - 称行内样式、行间样式、内嵌样式
    - 通过标签的style来设置元素样式
- 基本语法格式如下

    <标签名 style="color：red;font-size:12px;">内容</标签名>

    <div style="color：red;font-size:12px;">内容</div>

- 注意
    - style其实就是标签属性
    - 属性和值得中间是：
    - 多组属性值用;隔开


任何HTML标签都拥有style属性，用来设置行内式

    <h1 style="color: yellow;font-size: 18px;">内容</h1

行内式的缺陷：结构和样式未分离

## 4.2内部样式表 ##

- 概念
    - 内嵌式
    - css代码集中写在html的head头部文档标签中，并且用style标签定义
- 其基本语法格式如下

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

css

<style>
             div {
                 color: red;
                 font-size: 12px;
             }
</style>

注 type="text/CSS" 可以在html5中不写

## 4.3 外部样式表(外链式) ##

link
rel

- 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

type

- 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略

href

- 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="03 外部样式表\style.css">
    
    </head>
    <body>
        <h3>内容</h3>
    </body>
    </html>

CSS

  h3 {
    color: red;
    }

## 4.4 三种样式表总结 ##

| 样式表   | 优点           | 缺点           | 使用情况    | 控制范围      |
| ----- | ------------ | ------------ | ------- | --------- |
| 行内样式表 | 书写方便，权重高     | 没有实现样式和结构相分离 | 较少      | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离   | 没有彻底分离       | 较多      | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入         | 最多，强烈推荐 | 控制整个站点（多） |

猜你喜欢