CSS——三种页面引入方法
目的：为了把样式和内容分开，并且使网页元素更加丰富，引入了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——三种页面引入方法的更多相关文章
- [Web 前端] 006 css 三种页面引入的方法
1. 外链式 用法 step 1: 在 html 文档的 head 头部分写入下方这句话 <link rel="stylesheet" href="./xxx.cs ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- HTML三种样式引入方式
HTML三种样式引入方式 HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...
- Asp 6种页面转向方法
asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...
随机推荐
- 岭回归与Lasso回归
线性回归的一般形式 过拟合问题及其解决方法 问题:以下面一张图片展示过拟合问题 解决方法:(1):丢弃一些对我们最终预测结果影响不大的特征,具体哪些特征需要丢弃可以通过PCA算法来实现:(2):使用正 ...
- listen 80
Facebook Quietly Created New Email Addresses For a company that made its name by building one of the ...
- linux命令学习：echo详解，格式化输出，不换行输出
shell脚本不换行刷新数据 #!/bin/bash ] do a=$(ifconfig eth0 | grep 'RX pac' | awk '{print $2}' | awk -F: '{pri ...
- linux网络编程 ntohs, ntohl, htons,htonl inet_aton等详解
ntohs =net to host short int 16位 htons=host to net short int 16位 ntohs =net to host long int 32位 hto ...
- resEdit
resEdit:一个图形界面编辑工具,它不但可以用来编写程序所图形界面(如修改图标.菜单.鼠标.版本信息等),还支持了对exe.dll等执行文件内的资源(图标.菜单.鼠标指针.位图.版本信息)等进行修 ...
- python打印字体颜色
格式:\033[显示方式;前景色;背景色m 显示方式 意义-------------------------0 终端默认设置1 ...
- 12 Vue学习 项目技术栈
vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 1:vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理 ...
- Excel中导入到oracle使用merge into 差异性更新数据库
merge into temp1 ausing (select ID from (Select ID from temp1 ...
- C# 测试代码#if DEBUG使用
代码示例: #if DEBUG Console.WriteLine("DEBUG:11111111111"); #else Console.WriteLine ...
- URL辅助方法
URL辅助方法则负责用来产生url地址,那什么时候需要呢,以输出超链接来说,使用Html.ActionLink()辅助方法一定会产生超链接的a标签,如果只是想单纯的输出asp.net mvc的某个网址 ...