目的：为了把样式和内容分开，并且使网页元素更加丰富，引入了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. [原创]Java给word中的table赋值

    一.准备工作: 下载PageOffice for  Java:http://www.zhuozhengsoft.com/dowm/ 二. 实现方法: 要调用PageOffice操作Word中的tabl ...

  2. spring2.5整合struts2

    首先第一步: 导入jar包: 我的做法: 导入你的基本使用的spring的jar包 和基本使用的struts2的jar包 然后struts2中有一个和spring整合的jar包一定要导入,不然会抛异常 ...

  3. linux ssh 命令使用解析

    前一阵远程维护Linux服务器,使用的是SSH,传说中的secure shell. 登陆:ssh [hostname] -u user 输入密码:***** 登 陆以后就可以像控制自己的机器一样控制它 ...

  4. 微信小程序module.exports 模块化

    //common.js var studentList = [     {         name: "xiaoming",         age: "22" ...

  5. MYSQL_与excel结合在excel中用&连接符快速创建表头_20161125

    excel &连接符快速创建表头 复制c列内容 CREATE TABLE A0001restaurant ( #用户明细表 城市 ), 区块 ), 用户ID ), 用户名称 ), 用户地址 ) ...

  6. MySQL活动期间制定月份注册用户下单情况_20161029

    在10.29到10.31号期间 10月新注册的用户订单金额满600元赠与优惠券 #3天内订单满600元且10月注册的用户订单明细 SELECT a.城市,a.用户ID,b.用户名称,DATE(b.注册 ...

  7. 「LOJ#10045」「一本通 2.2 练习 1」Radio Transmission （KMP

    题目描述 原题来自:BalticOI 2009 给你一个字符串,它是由某个字符串不断自我连接形成的.但是这个字符串是不确定的,现在只想知道它的最短长度是多少. 输入格式 第一行给出字符串的长度 L,第 ...

  8. 【Lintcode】087.Remove Node in Binary Search Tree

    题目: Given a root of Binary Search Tree with unique value for each node. Remove the node with given v ...

  9. WPF架构分析

    1.DisptcherObject提供了线程和并发模型,实现了消息系统. 2.DependencyObject提供了更改通知,实现了绑定,样式. 3.Visual是托管API和非托管API(milco ...

  10. java 放射机制简介

    放射,说白了就是通过名字加载相应的类,以及类的方法和属性,是为了解决开发中不知道别人会写什么类而采取的一种顺利开发的东东. package com.io; //学生业务类 不知道别人写的 这个是别人写 ...