HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScriptHTML 文件路径HTML 颜色HTML 字符(编码)和实体HTML URL(网址)HTML XHTMLHTML - Web服务器HTML表单 HTML 表单HTML 表单属性HTML 表单元素HTML 表单input类型HTML 表单input属性

HTML CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式,简单的说就是让HTML富有色彩更加美观。

案例





你好


CSS代码

CSS 可以通过以下方式添加到HTML中:

内联样式

要定义单个元素时使用,样式属性可以包含任何 CSS 属性。

语法

<元素名称 style="属性:属性值;"></元素名称>

内联样式

内部样式表

外部样式表

<p style="color:blue;">内联样式</p>
<p>内部样式表</p>
<p>外部样式表</p>

内联样式


内部样式表

定义单个HTML文件里的样式时使用,你可以在<head> 部分通过 <style>标签定义内部样式表。

语法

<style>
选择符{属性:属性值;}
</style>
<元素名称 class="类选择符名称"></元素名称>
<元素名称 id="id 类选择符名称"></元素名称>

5`E3UUXL[}R]V@VM4ZYG9T2.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫代码(www.xuandaima.com)</title>
<style type="text/css">
p.hh1 {color:blue;}
</style>
</head>
<body>
<p>内联样式</p>
<p class="hh1">内部样式表</p>
<p>外部样式表</p>
</body>
</html>

内部样式表

外部样式表

只要引入外部样式表,该站点内外的所有文件都可以使用。

语法

<link rel="stylesheet" href="css文件路径" type="text/css"/>
<元素名称 class="类选择符名称"></元素名称>
<元素名称 id="id 类选择符名称"></元素名称>

24)T]QBP(EKVM_}2MG7$A6P.png

wailian.css

p.hh1{color:blue;}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫代码(www.xuandaima.com)</title>
<link rel="stylesheet" type="text/css" href="/Template/Test/css/wailian.css">
</head>
<body>
<p>内联样式</p>
<p>内部样式表</p>
<p class="hh1">外部样式表</p>
</body>
</html>

外部样式表


样式标签
标签描述
<style>定义文本样式
<link>定义资源引用地址

如果想了解更多CSS知识,请看CSS教程。