概述
目录
一、前言
二、实例演示
1.1、内联样式
1.2、内联样式-效果演示
2.1、内部样式表
2.2、内部样式表-效果演示
3.1、外部样式表
3.2、外部样式表-效果演示
三、知识点说明
一：CSS 概述
二：CSS 基础语法
1、如何用？--多种方式，供灵活选择
2***、重复引入优先级问题（着重注意）
一、前言
上几篇我整理一些web-html上的一些基础知识点，如最近的一篇文章：web快速入门之基础篇-html：13、表单-常用操作：form、input、select、textarea、label、fieldset、iframe 然后从这篇开始整理css样式，在html中引用css样式有3种方式：内联样式、内部样式表、外部样式表，下面我们来通过实例代码和效果图来演示
二、实例演示
1.1、内联样式
内联样式（一般不建议使用），指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。我们来看看代码： 1. 内联样式.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="refresh" content="3" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内联方式</title>
</head>
<body>
<p style="color:red;background-color:gray;font-size:30pt;width:30%;">内联方式</p>
</body>
</html>
1.2、内联样式-效果演示
用谷歌浏览器打开运行，效果如下：
2.1、内部样式表
内部样式表，指在html文件的head标签内声明样式。当单个文档需要特殊的样式时，就引用使用内部样式表。
我们来看看代码： 2. 内部样式表.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="refresh" content="3" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内部样式表</title>
<!--内部样式表-->
<style type="text/css">
/*为h1定义的样式*/
h1
{
color:green;
background-color:red;
width: 30%;
}
</style>
</head>
<body>
<h1>内部样式表</h1>
</body>
</html>
2.2、内部样式表-效果演示
用谷歌浏览器打开运行，效果如下：
3.1、外部样式表
外部样式表，指在html文件的head标签中，使用link引用另一个css文件中定义的样式。如果某个样式表需要被使用许多次，使用外部样式表是最好的选择。我们来看看代码： 3. 外部样式表.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="refresh" content="3" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>外部样式表</title>
<!--
1、link 引入
text/css： 纯文本css代码
2、rel 做什么用
stylesheet:样式表
3、href 引入的是什么？
MyStyle.css
-->
<link type="text/css" rel="stylesheet" href="MyStyle.css"/>
</head>
<body>
<h2>外部样式表</h2>
</body>
</html>
css样式代码：MyStyle.css
h2
{
color:red;
font-size:30pt;
}如图放在同一个目录下即可，有关路径引入在这里就不多讲，
这篇文章有讲到：web快速入门之基础篇-html：4、基本标签之图像、地址链接
3.2、外部样式表-效果演示
用谷歌浏览器打开运行，效果如下：
三、知识点说明
一：CSS 概述
1、CSS 的作用：统一的方式定义外观
相对于原始的html：属性可以用来设置样式，比如 border、width、cols
二：CSS 基础语法
1、如何用？--多种方式，供灵活选择
方式一：内联方式---html 元素有个 style 属性
style="color:red;"
----适用于单个元素
方式二：内部样式表---当前页面里样式重用
head 里添加一个 style，将 CSS 样式定义
<style>
p
{
}
</style>
方式三：外部样式表
单独定义一个文件/.css---定义样式
html页面，引入样式文件
优先建议使用“外部样式表”---实现内容和表现分离，从而提高可维护度和可重用性
换皮肤：a.html/b.html/c.html....
s1.css
s2.css
s3.css
2***、重复引入优先级问题（着重注意）
没有冲突的取并集，重复定义的依靠优先级
优先级：就近原则
内联方式 > 内部样式表或者外部样式表
如果优先级别相同，以最后一次定义为准
*** 补充：
1）
内联方式：方便快速演示( 如, Boss演示)
外部样式表：便于维护
最后
以上就是畅快外套为你收集整理的web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表一、前言二、实例演示三、知识点说明的全部内容，希望文章能够帮你解决web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表一、前言二、实例演示三、知识点说明所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复