📜  行 css (1)

📅  最后修改于: 2023-12-03 15:41:32.479000             🧑  作者: Mango

行 CSS

CSS(Cascading Style Sheets,级联样式表)是一种用于描述网页上元素样式的语言。行 CSS 是指在 HTML 文件中直接添加样式以改变元素的表现形式。行 CSS 非常方便,在开发小型网页或调试元素样式时非常有用。

行 CSS 基本语法

行 CSS 写在 HTML 标签的 style 属性中,它的基本语法如下所示:

<tagname style="property: value;"></tagname>

其中,tagname 是要设置样式的标签名称,而 property 和 value 分别代表要更改的元素的属性和属性值。

例如,要将段落的文本颜色设置为红色,则可以编写以下行 CSS:

<p style="color: red;">我是红色的文本。</p>
行 CSS 常用属性
color 属性

color 属性用于设置元素的文本颜色。它可以接受各种不同的值,比如颜色名称、RGB 值、十六进制值等等。

<p style="color: red;">我是红色的文本。</p>
<p style="color: #00ff00;">我是绿色的文本。</p>
<p style="color: rgb(255, 0, 255);">我是洋红色的文本。</p>
font-family 属性

font-family 属性用于设置元素的字体系列。它接受一个或多个字体名称,以逗号分隔。如果指定的字体不存在,则浏览器会依次使用后备字体。

<p style="font-family: Arial, Helvetica, sans-serif;">我有一个可靠的字体系列。</p>
font-size 属性

font-size 属性用于设置元素的字体大小。它接受各种度量单位,比如像素、EM、百分比等等。

<p style="font-size: 24px;">我是大字体。</p>
<p style="font-size: 16px;">我是小字体。</p>
background-color 属性

background-color 属性用于设置元素的背景颜色。它可以接受各种颜色值,例如颜色名称、RGB 值、十六进制值等等。

<p style="background-color: yellow;">我有一个黄色的背景。</p>
text-align 属性

text-align 属性用于控制元素中文本的对齐方式。

<p style="text-align: center;">我居中显示。</p>
<p style="text-align: right;">我右对齐显示。</p>
行 CSS 的优缺点
优点
  • 行 CSS 编写方便,可以方便地对某个元素对样式进行更改和调整,不必到 CSS 文件中移到找到对应的选择器。
  • 行 CSS 可读性良好,不需要大量的 CSS 语句嵌套在文档之外。
缺点
  • 行 CSS 增加网页的体积,不利于网页加载速度。
  • 行 CSS 可能会覆盖全局样式,导致网页整体样式不一致。