“HTML CSS样式”的版本间差异
本页内容
第75行: | 第75行: | ||
<html> | <html> | ||
<head> | <head> | ||
<link href=" | <link href="styles.css" type="text/css" rel="stylesheet" /> | ||
</head> | </head> | ||
<body> | <body> | ||
第81行: | 第81行: | ||
<h1>标题</h1> | <h1>标题</h1> | ||
<p>段落</p> | <p>段落</p> | ||
</body> | |||
</html> | |||
</sample> | |||
外部样式表可以用任何文本编辑器编写。该文件不得包含任何 HTML 代码,并且必须以 .css 扩展名保存。 | |||
<sample title="style.css" desc="" > | |||
body { | |||
background-color: powderblue; | |||
} | |||
h1 { | |||
color: blue; | |||
} | |||
p { | |||
color: red; | |||
} | |||
</sample> | |||
<blockquote> | |||
提示:使用外部样式表,可以通过更改一个文件来更改整个网站的外观! | |||
</blockquote> | |||
== CSS 例子 == | |||
* CSS color 属性定义要使用的文本颜色。 | |||
* CSS font-family 属性定义要使用的字体。 | |||
* CSS font-size 属性定义要使用的文本大小。 | |||
* CSS border 属性定义 HTML 元素周围的边框。 | |||
* CSS padding 属性定义文本和边框之间的填充。 | |||
* CSS margin 属性定义了边框外的边距。 | |||
<sample title="" desc="" hererun="s"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
h1 { | |||
color: blue; | |||
font-family: verdana; | |||
font-size: 300%; | |||
} | |||
p { | |||
color: red; | |||
font-family: courier; | |||
font-size: 160%; | |||
border: 2px solid powderblue; | |||
padding: 30px; | |||
margin: 50px; | |||
background:#ccc; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h1>This is a heading</h1> | |||
<p>This is a paragraph.</p> | |||
</body> | </body> |
2022年8月4日 (四) 11:53的版本
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>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>标题</h1>
<p>文本</p>
</body>
</html>
外部 CSS 文件
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。 外部CSS文件通过link进行添加。
示例
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
外部样式表可以用任何文本编辑器编写。该文件不得包含任何 HTML 代码,并且必须以 .css 扩展名保存。
style.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
提示:使用外部样式表,可以通过更改一个文件来更改整个网站的外观!
CSS 例子
- CSS color 属性定义要使用的文本颜色。
- CSS font-family 属性定义要使用的字体。
- CSS font-size 属性定义要使用的文本大小。
- CSS border 属性定义 HTML 元素周围的边框。
- CSS padding 属性定义文本和边框之间的填充。
- CSS margin 属性定义了边框外的边距。
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
background:#ccc;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>