CSS简单学习（一）-CSS介绍和CSS引入方式

CSS作用和发展

CSS（Cascading Style Sheet），称之为层叠样式表

一种专门描述结构文档的变现方式文档，主要用于网页风格设计，包括字体大小，颜色，以及元素的精确定位等。
在传统的网页设计里，使用CSS能让单调的HTML网页更富表现力

作用：

修饰HTML页面
添加样式，布局，定位
比直接利用HTML完成样式更好
功能更强大，可读性好，占用体积小

CSS目前也发展到3.0版本，使用HTML5和CSS3可以很强大

CSS引入方式

内联样式：
1. 直接在元素上加style属性，赋予属性值，通常用于精确控制一个HTML元素的表现
2. eg:
```
<p style="font-size: 20px;color: red;">这是一个段落</p>
```
3. 值里面，可以有多个键值对："key:value;key:value..."
4. 作用范围：当前元素

内部样式：

在head中加入style元素，里面写各种样式

选择器：

选择器{
    key:value;
    key:value;
    ......
}

eg：

<head>
    <!--内部样式-->
    <style type="text/css">
        p{
            background-color: yellow;<!--背景色 -->
        }
        h2{
            color: blue;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
 
    <p>这也是一个段落</p>
</body>

作用范围：可以针对当前页面的多个元素修饰

链接外部样式文件：
1. 在head中使用link标签，引入外部样式文件
2. eg：
```
<link href="style.css" type="text/css" rel="stylesheet"/>
```
3. css样式文件：直接写上述选择器就可以，如style.css文件如下
```
P{
    text-decoration: underline;
}

h2{
    font-size: 24px;
}
```
4. 把样式和页面内容彻底放开
5. 作用范围：可以修饰多个页面
导入外部样式文件（和链接外部样式类似）：
1. eg：
```

<style>
        /*@import "style.css";*/
        @import url(style.css);
</style>
```
2. 把样式和页面内容彻底放开
3. 作用范围：可以修饰多个页面
三四两种方式对比
1. 链接外部样式：把CSS资源加载后，在展示页面内容，显示即有样式的
2. 导入外部样式：把HTML资源加载后，就显示内容，CSS资源加载后再把样式加上
3. （如果网络较快，没什么差别，如果网络较慢，导入外部样式会先显示HTML，然后慢慢显示样式）
总体对比
1. 整体通用样式，放到样式文件中
2. 仅针对当前页面效果，可以使用内联样式
3. 快速有效的改变局部元素，可以使用内联样式
4. 优先级：内联样式优先级最高，
  1. 另外三个，按照前后顺序，相同的属性，后面的覆盖前面的
  2. 不同的属性都生效

示例代码

style.css

P{
    text-decoration: underline;
}

h2{
    font-size: 24px;
}

CssAddMethod.html

<!--CSS的四种引入方式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS四种引入方式</title>
    <!--链接外部样式文件-->
    <link href="style.css" type="text/css" rel="stylesheet"/>
    <!--导入外部样式文件-->
    <style>
        /*@import "style.css";*/
        @import url(style.css);
    </style>
    <!--内部样式-->
    <style type="text/css">
        p{
            background-color: yellow;<!--背景色 -->
        }
        h2{
            color: blue;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <!--内联样式-->
    <p style="font-size: 20px;color: red;">这是一个段落</p>
    <p>这也是一个段落</p>  <!--内联样式只作用于一个标签，所以该标签保持默认效果-->
</body>
</html>

CSS简单学习（一）-CSS介绍和CSS引入方式

CSS作用和发展

CSS引入方式

猜你喜欢