web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表

最新推荐文章于 2024-04-13 12:25:50 发布

被开发耽误的大厨

最新推荐文章于 2024-04-13 12:25:50 发布

阅读量1.3k

点赞数 2

分类专栏： web前端（H5）

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/104129875

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

一、前言

上几篇我整理一些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>

{

}

</style>

方式三：外部样式表

单独定义一个文件/.css---定义样式

html页面，引入样式文件

优先建议使用“外部样式表”---实现内容和表现分离，从而提高可维护度和可重用性

换皮肤：a.html/b.html/c.html....

s1.css

s2.css

s3.css

2***、重复引入优先级问题（着重注意）

没有冲突的取并集，重复定义的依靠优先级

优先级：就近原则

内联方式 > 内部样式表或者外部样式表

如果优先级别相同，以最后一次定义为准

*** 补充：

1）

内联方式：方便快速演示( 如, Boss演示)

外部样式表：便于维护

被开发耽误的大厨

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表

目录一、前言二、实例演示1.1、内联样式1.2、内联样式-效果演示2.1、内部样式表2.2、内部样式表-效果演示3.1、外部样式表3.2、外部样式表-效果演示三、知识点说明一：CSS 概述二：CSS 基础语法1、如何用？--多种方式，供灵活选择2***、重复引入优先级问题（着重注意）一、前言上几篇我整理一些web-html上的一些基础知识...
复制链接

扫一扫