CSS学习（一）---使用CSS的四种方式
1. 行内样式
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Example inline</title>
</head>
<body bgcolor="#e0f1ff">
<p style="color: #0000FF; font-size: 18px; font-weight: bold;">CSS内容1</p>
<!--字体颜色为蓝色；字号大小为18px；粗体字-->
<p style="color: #000000; text-decoration: underline; font-style: italic;">正文CSS2</p>
<!--字体颜色为黑色；斜体；下划线-->
<P style="color: #FF33CC; font-size: 28px; font-weight: bold;">CSS正文内容3</P>
<!--字体颜色为紫红色；字号大小为28px；粗体字-->
</body>
</html>
运行效果：
总结：行内样式是最简单的CSS使用方法，但由于需要每一个标记设置style属性，后期维护维护成本很高，而且网页体积容易过胖，因此现在很多项目都不再使用该方式。
2. 内嵌式
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>内嵌CSS</title>
<style type="text/css">
<!--
p{
color: #FF00FF;
text-decoration: underline;
font-weight: bold;
font-size: 25px;
}
-->
</style>
</head>
<body>
<p>紫色、下划线、粗体、字号25px的效果</p>
<p>紫色、下划线、粗体、字号25px的效果</p>
<p>紫色、下划线、粗体、字号25px的效果</p>
</body>
</html>
运行效果：
总结：相对于行内样式来讲，CSS的代码部分被集中在了一个区域，方便后期维护，页面也大大瘦身了。但如果同一个网站有很多页面，对于不同页面上的<p>标记都采用相同风格时，内嵌式的样式也显得略微麻烦，维护成本也是不低。因此内嵌式的方法仅适用于对于特殊页面设置单独的样式风格时使用。
知识点：可以看到上面的代码，<style>标签中间的代码部分使用了注释标记<!-- -->，这是因为在一些比较老的浏览器中，无法识别<style>标签，但它有可能会把<style>标签里面的部分当做正常的文本显示在页面上，所以为了防止这种情况发生，将<style>标签里面的内容用注释标记括起来。
3. 链接式
例：
Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>链接式</title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
</head>
<body>
<h2>第一行标题</h2>
<p>紫红色、斜体、下划线、28px的效果1</p>
<h2>第二行标题</h2>
<p>紫红色、斜体、下划线、28px的效果2</p>
</body>
</html>
CSS代码：
/*css样式，仅做读书练习使用*/
h2{
color: #0000FF;
}
p{
color: #FF33CC;
text-decoration: underline;
font-style: italic;
font-size: 28px;
}
运行效果：
总结：链接式是项目中最常用的一种方式，它最大的优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的格式风格，如果后续需要更改网站的设计，则只需更改CSS文件即可。
4. 导入样式
与链接样式表的功能基本相同，只是语法和运作方式略有不同。运作区别：import方式导入的样式表会在HTML初始化时，被导入到HTML文件内，作为其中的一部分，类似于内嵌式的效果；而链接式则是在HTML的标记需要格式时才以链接的方式引入。语法区别：import的使用方法如下：
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>导入样式</title>
<style type="text/css">
<!--
@import url(../css/1.css);
-->
</style>
</head>
<body>
<h2>第一行标题</h2>
<p>紫红色、斜体、下划线、28px的效果1</p>
<h2>第二行标题</h2>
<p>紫红色、斜体、下划线、28px的效果2</p>
<h3>浏览器默认效果</h3>
<p>紫红色、斜体、下划线、28px的效果3</p>
</body>
</html>
运行效果：
总结：@import方式其实和链接式在使用上还是有很大区别的，相比较而言，链接式更节省带宽，用时才会下载样式表，而@import则是只要启用了html文件，就会直接下载样式表。
知识点：由于样式表CSS文件中不能包含任何文档标记，如果有一个外部样式表1需要使用另外一个样式表2中的样式，那么我就可以在表1的顶部，也就是其他规则之前使用@import引入这个样式表2，直接写@import url(2.css);即可。
CSS学习（一）---使用CSS的四种方式的更多相关文章
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- sess文件编译输出css的四种方式以及使用
sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...
- HTML与CSS结合的四种方式
HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- 从零学习Fluter(八):Flutter的四种运行模式--Debug、Release、Profile和test以及命名规范
从零学习Fluter(八):Flutter的四种运行模式--Debug.Release.Profile和test以及命名规范 好几天没有跟新我的这个系列文章,一是因为这两天我又在之前的基础上,重新认识 ...
- 你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- 【Java EE 学习 80 下】【调用WebService服务的四种方式】【WebService中的注解】
不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jd ...
- jQuery绑定事件的四种方式：bind、live、delegate、on
1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...
- ASP.NET MVC之下拉框绑定四种方式（十）
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
随机推荐
- [国嵌笔记][024][ARM汇编编程概述]
汇编程序用途 1.在bootloader与内核初始化时,还没有建立C语言运行环境,需要用到汇编程序 2.在对访问效率要求很高的情况下,需要用到汇编程序 ARM汇编分类 1.ARM标准汇编:适合于Win ...
- Git的简单的基本使用
前言: 接触了Android Studio,自然是知道了Github这个网站,这个网站有许多大神们做的开源库,我们只需要简单地引入就是可以使用到这些开源库从而实现酷炫的效果,最近也是刚接触到Git的使 ...
- 【自制工具类】Java删除字符串中的元素
这几天做项目需要把多个item的id存储到一个字符串中,保存进数据库.保存倒是简单,只需要判断之前是否为空,如果空就直接添加,非空则拼接个"," 所以这个字符串的数据结构是这样的 ...
- 短时间内多个请求状态更新，导致react 不能及时响应问题总结
个人总结 这段时间项目中遇到这样一个问题,旧项目中增加了一个聊天对话的模块,这是其他同学负责的部分,因为要有消息提醒,所以做了个轮询.消息提示因为是页头部分,所以每个模块都会引用到.这是背景. 现象 ...
- P2045 方格取数加强版
P2045 方格取数加强版 题目描述 给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= 1000)现在从(1,1)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格 ...
- WebP 图片实践之路
我们会从三部分来聊聊webp这个话题. 什么是webp,它有什么用? 使用webp的常规方法以及优劣. 我们是如何用上webp的. PS:如果是对webp有一定了解的朋友,建议直接看第三部分.因为是讲 ...
- Linux实践篇--crontab定时任务
原文出处:http://www.cnblogs.com/tracy/archive/2011/12/27/2303788.html.感谢作者的无私分享 一. Crontab 介绍 ...
- Tomcat--startup.bat文件
Tomcat--startup.bat文件 如何启动tomcat,如何关闭tomcat等常规操作,我们应该都很清楚了,但是实际中我们经常会遇到一些恶心的情景,比如说正在我们撸码撸的很高兴的时候,ecl ...
- 查阅API文档
Java的API文档:就一句话:应用程序接口 •API (Application Programming Interface,应用程序编程接口)是 Java 提供的基本编程接口. •Java语言提供了 ...
- php与HTML交互问题
1.将表单中的action属性值设为PHP路径,则网页会跳转到这个网址 <html> <body> <form action="welcome.php" ...