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 三种样式表总结 ##


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

posted @ 2020-04-22 10:21  xujing123  阅读(152)  评论(0编辑  收藏  举报