王楠博客

遇事无难易，而勇于敢为。

0%

CSS--引入方式

发表于 分类于 ， Valine：

CSS–引入方式

css介绍

==css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。==

  • 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
  • 控制页面布局, 比如: 设置浮动、定位等样式。

css基本语法

选择器:是用来选择标签的，选出来以后给标签加样式。

1
2
3
4
5
6
7
8
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
...

css简单实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <!-- 所有css样式最外层需要使用style标签 -->
    <style>
        /* div标签选择器 */
        div {
            /* 设置标签宽度 */
            width: 100px;
            /* 设置标签的高度 */
            height: 100px;
            /* 设置标签的背景 */
            background: gold;
        }
    </style>
</head>
<body>
    <!-- 显示内容的内容 -->
    <div>内容</div>
</body>
</html>

css引入方式– 行内式

==直接在标签的style属性中添加 css 样式==

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
        <div style="width:100px; height:100px; background:red ">hello</div>
</body>
</html>

css引入方式– 内嵌式（内部样式）

==在<head>标签内加入<style>标签，在<style>标签中编写css代码。==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        div {
           /* 宽度 */
           width: 100px;
           /* 高度 */
           height: 200px;
           /* 背景色 */
           background: red; 
           }
     </style>
</head>
<body>
        <div>hello</div>
</body>
</html>

css引入方式– 外链式

==将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。==

css文件的代码

1
2
3
4
5
6
7
8
div {
   /* 宽度 */
   width: 100px;
   /* 高度 */
   height: 200px;
   /* 背景色 */
   background: red;
}

html文件的代码

1
2
<!-- href中指定css文件导入路径 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
  • 优点：
    • 使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
  • 缺点：
    • css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

css引入方式的选择

  • 行内式几乎不用
  • 内嵌式在学习css样式的阶段使用
  • 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。