前端必知必会-html与css样式

编程流年

于 2024-07-22 09:00:00 发布

阅读量409

点赞数 15

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_24018193/article/details/140571037

版权

文章目录

HTML 样式 - CSS
什么是 CSS？
CSS的使用
CSS 颜色、字体和大小
CSS 边框
CSS 填充
CSS 边距
链接到外部 CSS
总结

HTML 样式 - CSS

CSS 代表层叠样式表。

CSS 节省了大量工作。它可以同时控制多个网页的布局。

什么是 CSS？

层叠样式表 (CSS) 用于格式化网页的布局。使用CSS可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等！

提示：层叠一词意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，如果您将正文的颜色设置为“蓝色”，则正文中的所有标题、段落和其他文本元素也将获得相同的颜色（除非您指定其他颜色）！

CSS的使用

CSS 可以通过 3 种方式添加到 HTML 文档中：

内联 - 使用 HTML 元素内的 style 属性
内部 - 使用 <head> 部分中的 <style> 元素
外部 - 使用 <link> 元素链接到外部 CSS 文件

添加 CSS 的最常见方法是将样式保留在外部 CSS 文件中。

内联 CSS

内联 CSS 用于将唯一样式应用于单个 HTML 元素。
内联 CSS 使用 HTML 元素的 style 属性。
以下示例将 <h1> 元素的文本颜色设置为蓝色，将 <p> 元素的文本颜色设置为红色：
示例

<h1 style="color:blue;">蓝色标题</h1>

<p style="color:red;">红色段落。</p>

内部 CSS

内部 CSS 用于定义单个 HTML 页面的样式。
内部 CSS 在 HTML 页面的部分中的

以下示例将所有 <h1> 元素（该页面上）的文本颜色设置为蓝色，将所有 <p> 元素的文本颜色设置为红色。此外，页面将显示“powderblue”背景颜色：

示例

<!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

外部样式表用于定义许多 HTML 页面的样式。
要使用外部样式表，请在每个 HTML 页面的部分添加指向它的链接：

示例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>

外部样式表可以在任何文本编辑器中编写。该文件不得包含任何 HTML 代码，并且必须使用 .css 扩展名保存。
“styles.css”文件如下所示：
“styles.css”：

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

提示：使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！

CSS 颜色、字体和大小

color 属性定义要使用的文本颜色。
font-family 属性定义要使用的字体。
font-size 属性定义要使用的文本大小。

示例
color、font-family 和 font-size 属性的使用：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

CSS 边框

CSS border 属性定义 HTML 元素周围的边框。
可以为几乎所有 HTML 元素定义边框。

示例
CSS 边框属性的使用：

p {
border: 2px solid powderblue;
}

CSS 填充

CSS 填充属性定义文本和边框之间的填充（空间）。

示例
CSS 边框和填充属性的使用：

p {
border: 2px solid powderblue;
padding: 30px;
}

CSS 边距

CSS 边距属性定义边框外的边距（空间）。

示例
CSS 边框和边距属性的使用：

p {
border: 2px solid powderblue;
margin: 50px;
}

链接到外部 CSS

可以使用完整 URL 或相对于当前网页的路径引用外部样式表。

示例
使用完整 URL 链接到样式表：

<link rel="stylesheet" href="https://xxxx.com/xx.css">

示例
链接到位于当前网站 html 文件夹中的样式表：

<link rel="stylesheet" href="/html/styles.css">

示例
链接到位于当前页面同一文件夹中的样式表：

<link rel="stylesheet" href="styles.css">

总结

本文介绍了的html使用，如有问题欢迎私信和评论

编程流年

关注

15
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知必会-html与css样式

层叠样式表 (CSS) 用于格式化网页的布局。使用CSS可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等！提示：层叠一词意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，如果您将正文的颜色设置为“蓝色”，则正文中的所有标题、段落和其他文本元素也将获得相同的颜色（除非您指定其他颜色）！本文介绍了的html使用，如有问题欢迎私信和评论。
复制链接

扫一扫