美文网首页
Html添加Css样式的方式

Html添加Css样式的方式

作者: 寂寞的雪 | 来源:发表于2015-06-28 21:15 被阅读194次

思考?

我们如何将自己定义的样式应用到页面呢?(直白一点就是: 怎么把Css样式添加到html文档中)

添加方式

1. inline 模式

直接在需要应用样式的html tag当中的style属性中添加,

<p style="color: red">I should be red </p>

2. internal 模式

在<head>标签内部通过在<style>标签内定义:

<pre>
<!DOCTYPE html>
<html>
<head>
<title>css import demo</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> This should be red ! </p>
</body>
</html>
</pre>

3. external模式

将Css样式定义在单独的文件, 需要该样式的时候,只需要引入该样式文件即可.
例如:
3.1 创建名 example.css样式文件

3.2对example.css文件进行编辑,添加如下内容:

p { color: red; }

3.3 在html文件中引入该样式文件;

<pre>
<!DOCTYPE html>
<html>
<head>
<title> css import demo</title>
<link rel="stylesheet" href="example.css">
</style>
</head>
<body>
<p> This should be red ! </p>
</body>
</html>
</pre>

相关文章

  • CSS学习

    一、三种方式添加CSS 外部样式(1)CSS在.css文件中(2)在html中用 方式引入 内部样式(1)将CSS...

  • Html添加Css样式的方式

    思考? 我们如何将自己定义的样式应用到页面呢?(直白一点就是: 怎么把Css样式添加到html文档中) 添加方式 ...

  • 样式- CSS

    CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性内部样式表 -在H...

  • CSS

    css css全称:Cascading Style Sheets层叠样式表,用于给网页添加样式。(html式结构;...

  • 2020-01-15-易锦大学04-网页前端三兄弟html,cs

    01,html,css,js html--内容层。里面添加内容的。css--样式层。能控制网页呈现出的样式,布局之...

  • javaweb-day02

    CSS 简介:全称,层叠样式表,主要为HTML网页添加美化的成分,处理HTML的各个标签的细节问题。 引入方式:行...

  • HTML&CSS入门

    HTML&CSS入门 标签(空格分隔): html css [toc] 一、使用 css 控制页面样式的方式 二、...

  • CSS引入方式及选择器

    CSS层叠样式表 HTML结构和CSS样式如何关键到一起(CSS的引入方式) CSS的引入方式 CSS常用属性 C...

  • 爬虫_030_在HTML中如何使用css样式

    在HTML中如何使用css样式1、内联方式(行内样式)就是在HTML的标签中使用style属性来设置css样式格式...

  • 51-CSS介绍

    一、什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式...

网友评论

      本文标题:Html添加Css样式的方式

      本文链接:https://www.haomeiwen.com/subject/gwmeqttx.html