“HTML CSS样式”的版本间差异
本页内容
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
CSS 代表层叠样式表。英文Cascading Style Sheets。 | CSS 代表层叠样式表。英文Cascading Style Sheets。 | ||
掌握CSS后可以通过CSS文件控制多个网页样式，减少代码重复减少维护成本，增加网页打开速度。 | |||
<html> | <html> | ||
| 第12行： | 第14行： | ||
</div> | </div> | ||
</div> | </div> | ||
</html> | |||
== 什么是 CSS？ == | |||
使用 CSS，可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等。 | |||
== 使用 CSS == | |||
CSS 可以通过 3 种方式添加到 HTML 中： | |||
* 内联- 通过使用HTML元素的style属性 | |||
* 内部- <nowiki>通过使用<head>中的<style>标签</nowiki> | |||
* 外部- <nowiki>通过使用<link> 链接到外部 CSS 文件</nowiki>， 最常见的方式，推荐使用。 | |||
== 内联 CSS == | |||
* 内联 CSS 用于将独特的样式应用于单个 HTML 元素。 | |||
* 内联 CSS 使用style属性进行设置。 | |||
<nowiki>以下示例将元素的文本颜色设置<h1>为蓝色，将元素的文本颜色设置<p>为红色： | |||
</nowiki> | |||
<sample title="" desc="" hererun="s"> | |||
<h1 style="color:blue;">蓝色标题</h1> | |||
<p style="color:red;">红色文本</p> | |||
</sample> | |||
== 内部 CSS == | |||
* 内部 CSS 用于定义单个 HTML 页面的样式。 | |||
* 内部 CSS 定义在<nowiki><head>的<style>元素内。</nowiki> | |||
<nowiki>以下示例将所有<h1>元素（在该页面上）的文本颜色设置为蓝色，并将所有<p>元素的文本颜色设置为红色。此外，页面将显示为“粉蓝色”背景色：</nowiki> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
body {background-color: powderblue;} | |||
h1 {color: blue;} | |||
p {color: red;} | |||
</style> | |||
</head> | |||
<body> | |||
<h1>标题</h1> | |||
<p>文本</p> | |||
</body> | |||
</html> | </html> | ||
2022年8月4日 (四) 11:38的版本
CSS 代表层叠样式表。英文Cascading Style Sheets。
掌握CSS后可以通过CSS文件控制多个网页样式，减少代码重复减少维护成本，增加网页打开速度。
CSS = 样式和颜色
小白教程xiaobai.wang
颜色，
盒子
什么是 CSS？
使用 CSS，可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等。
使用 CSS
CSS 可以通过 3 种方式添加到 HTML 中：
- 内联- 通过使用HTML元素的style属性
- 内部- 通过使用<head>中的<style>标签
- 外部- 通过使用<link> 链接到外部 CSS 文件， 最常见的方式，推荐使用。
内联 CSS
- 内联 CSS 用于将独特的样式应用于单个 HTML 元素。
- 内联 CSS 使用style属性进行设置。
以下示例将元素的文本颜色设置<h1>为蓝色，将元素的文本颜色设置<p>为红色：
示例
<h1 style="color:blue;">蓝色标题</h1>
<p style="color:red;">红色文本</p>内部 CSS
- 内部 CSS 用于定义单个 HTML 页面的样式。
- 内部 CSS 定义在<head>的<style>元素内。
以下示例将所有<h1>元素（在该页面上）的文本颜色设置为蓝色，并将所有<p>元素的文本颜色设置为红色。此外，页面将显示为“粉蓝色”背景色：
<!DOCTYPE html>
标题
文本