HTML基础-03-CSS概述（常用属性、内联样式、内部样式、外部样式）

玄德公笔记

已于 2022-11-18 23:40:37 修改

阅读量403

点赞数

分类专栏： # HTML基础教程文章标签： css html 内联样式内部样式外部样式

于 2022-03-16 09:45:25 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123497352

版权

HTML基础教程专栏收录该内容

10 篇文章 3 订阅

订阅专栏

前言

CSS的详细内容将在CSS文集中介绍

1.概述

1.1 作用

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。

1.2 添加方式

内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 < head > 区域使用< style > 元素来包含CSS
外部引用：使用外部 CSS 文件

2. 几个常用属性

2.1 前景色（color:）

style="color:blue"

2.2 背景色（background-color:）

style="background-color:yellow"

2.3 字体大小（font-size:）

style="font-size:20px"

2.4 对齐（text-align）

style="text-align:center;"

左对齐：默认
居中：center
右对齐：right

3. 引用方式

3.1 内联样式

使用说明

作用
当个别元素需要使用特殊样式时
使用方法
在相关标签中加入样式属性，（可以是任意CSS）
语法示例

<h1 style="xxxxx;"></h1>

完整示例1（前景/背景色）

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body style="background-color:red;">
  <h2 style="background-color:yellow;color:blue">黄底蓝字的标题</h2>
  <p style="background-color:green;">绿底黑字的段落</p>
</body>

</html>

结果显示

在这里插入图片描述

完整示例2（对齐）

代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
	<h1 style="text-align:center;">居中对齐</h1>
	<h1 style="text-align:right;">右对齐</h1>
	<h1>左对齐（默认）</h1>
</body>
</html>

结果显示

在这里插入图片描述

3.2 内部样式表

使用说明

使用方法

在head中定义CSS表

语法示例

<head>
  <style type="text/css">
    body {
      属性: 值;
    }
  </style>

</head>

完整示例

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      background-color: yellow;
    }

    p {
      color: blue;
    }
  </style>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>
  <h1 style="text-align:center;">标题</h1>
  <p>段落内容和body是head中style定义的</p>
</body>

</html>

结果显示

3.3 外部样式表

使用说明

指定外部文件定义CSS表

语法示例

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

说明：

rel 是链接的类型，此处说明是 style sheet
type 是外联文件的类型
href 是外联文件的位置

在这里插入图片描述

玄德公笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础-03-CSS概述（常用属性、内联样式、内部样式、外部样式）

1.概述1.1 作用1.2 添加方式2. 几个常用属性2.1 前景色（color:）2.2 背景色（background-color:）2.3 字体大小（font-size:）2.4 对齐（text-align）3. 引用方式3.1 内联样式完整示例1（前景/背景色）完整示例2（对齐）3.2 内部样式表3.3 外部样式表......
复制链接

扫一扫