目的：为了把样式和内容分开，并且使网页元素更加丰富，引入了CSS

CSS页面引入有三种方式：

1）内联式：比较不常用，因为内容和样式仍然在一起，不方便。示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--字体颜色、字体大小、字体类型、行高-->

    <div style="color: hotpink;font-size: 20px;font-family: 'Leelawadee UI Semilight';line-height: 50px">

        传统布局：使用table来做整体页面的布局

        总结：这种方式来制作页面现在也不是很多了，感觉并不是很高效。

        需要先用photoshop量出页面布局具体的尺寸位置，再将其划分为表格，

        对每个格子进行编辑。每个格子可以嵌套表格，这样有时候写着写着还有点迷糊，

        要重新找到编辑位置属于哪一个表格的哪个位置， 通常会将表格的border设置为1，

        方便检查

    </div>

    <div>

        博客园是一个面向开发者的知识分享社区。自创建以来,

        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,

        推动并帮助开发者通过互联网分享知识,从而让更多

    </div>

</body>

</html>

2）嵌入式：由于这种方式速度快，一般用于首页加载。示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>KID</title>

    <style type="text/css">

        div{

            color:hotpink;

            font-size:20px;

            font-family:'Microsoft YaHei UI';

            line-height:50px

        }

    </style>

</head>

<body>

    <div>

        博客园是一个面向开发者的知识分享社区。自创建以来,

        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,

        推动并帮助开发者通过互联网分享知识,从而让更多

    </div>

    <div>

        博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,

        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,

        推动并帮助开发者通过互联网分享知识,从而让更多

    </div>

</body>

</html>

3）外联式：样式单独保存在main.css文件中，样式与内容完全分离，用于大多数网页中。示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>KID</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

    <div>

        博客园是一个面向开发者的知识分享社区。自创建以来,

        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,

        推动并帮助开发者通过互联网分享知识,从而让更多

    </div>

    <div>

        博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,

        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,

        推动并帮助开发者通过互联网分享知识,从而让更多

    </div>

</body>

</html>

main.css:

div{

    color:hotpink;

    font-size:20px;

    font-family:'Microsoft YaHei UI';

    line-height:50px

}

CSS——三种页面引入方法的更多相关文章

  1. [Web 前端] 006 css 三种页面引入的方法

    1. 外链式 用法 step 1: 在 html 文档的 head 头部分写入下方这句话 <link rel="stylesheet" href="./xxx.cs ...

  2. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  3. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  4. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  5. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  6. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  7. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  8. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  9. Asp 6种页面转向方法

    asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...

随机推荐

  1. 2018.3.3 How too much fructose may cause liver damage

    Fructose is the sweetest of the natural sugars. As its name suggests, it is found mainly in fruits. ...

  2. win7 jenkins搭建.Net项目自动构建

    前提:操作系统win7, 确保需要的.NET Framework已经安装 1. 安装插件 Jenkins--系统管理局--管理插件--可选插件,搜索MSBuild Plugin并安装:重启tomcat ...

  3. Unity-2017.2官方实例教程Roll-a-ball（二）

    声明: 本文系转载,由于Unity版本不同,文中有一些小的改动,原文地址:http://www.jianshu.com/p/97b630a23234 上一节Unity-2017.2官方实例教程Roll ...

  4. C++常见错误总结

    1.  error C2871: 'std' : does not exist or is not a namespace 原来 C++有两个不同版本的头文件.引入名字空间这个概念以前编译器用的是#i ...

  5. Ubuntu Hadoop环境搭建（Hadoop2.6.5+jdk1.8.0_121）

    1.JDK的安装 2.配置hosts文件(这个也要拷贝给所有slave机,scp /etc/hosts root@slave1:/etc/hosts) gedit /etc/hosts 添加: 122 ...

  6. bootstrap模版兼容IE浏览器代码嵌入

    1.  bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxc ...

  7. win10 设备摄像头，麦克风，【隐私】权限

    win10 因为隐私问题, 把mic,摄像头, 定位功能关闭,  之后调用USB摄像头的时候,忘了这个, 接口API 一直返回调用失败,[不能创建视频捕捉过滤器 hr=0x80070005] => ...

  8. python中列表元组字符串相互转换

    python中有三个内建函数:列表,元组和字符串,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示: >>> s = "xxxxx ...

  9. selenium 点击页面链接测试

    点击页面链接测试 http://www.51testing.com/html/21/n-862721.html 需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口 ...

  10. python-pprint打印函数

    #!/usr/bin/env python # -*- coding:utf-8 -*- import sys,pprint pprint.pprint(sys.path)