CSS 创建

CSS 创建

如何创建CSS?

将CSS添加到HTML页面,以根据样式表中的信息来格式化文档。有三种方法可以在HTML文档中插入CSS。

内联CSS
内部CSS
外部CSS

1)内联CSS

内联CSS用于将CSS应用于单个行或元素。
例如:
 <p style="color:blue">Hello CSS</p>
我们可以通过内联CSS技术将CSS应用于单个元素。

内联CSS也是一种在HTML文档中插入样式表的方法。此方法减轻了样式表的某些优点,因此建议谨慎使用此方法。

如果要使用内联CSS,则应对相关标签使用style属性。
语法:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
示例:
<h2 style ="color:red; margin-left:40px;">内联CSS应用于此标题。</h2> 

<p>本段不受影响。</p>
输出:

内联CSS应用于此标题。

本段不受影响。

内联CSS的缺点:

您不能在内联CSS中使用引号,如果使用引号,浏览器会将其解释为样式值的结尾。
这些样式不能在其他任何地方重复使用。
这些样式很难编辑,因为它们没有存储在单个位置。
无法使用内联CSS设置伪代码和伪类的样式。
内联CSS不提供浏览器缓存优势。

2)内部CSS

内部CSS用于将CSS应用于单个文档或页面。它会影响页面的所有元素。它写在html头部的style标签内。
例如:
 <style>
p{color:blue}
</style>

3)外部CSS

当您要在多个页面上进行更改时,通常使用外部样式表。此条件非常理想,因为它可以帮助您仅更改一个文件即可更改整个网站的外观。 它在每个页面上使用<link>标记,并且<link>标记应放在标题部分的内部。
外部CSS用于在多个页面或所有页面上应用CSS。在这里,我们将所有CSS代码写入一个CSS文件中。扩展名必须是.css,例如style.css。
例如:
 p{color:blue}
外部样式表可以在任何文本编辑器中编写,但必须以.css扩展名保存。该文件不应包含HTML元素。让我们以一个名为“ style.css”的样式表文件为例。
文件:style.css
body { 

    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}
注意:请勿在属性值和单位之间使用空格。例如:应该为margin-left:20px而不是margin-left: 20px。
HTML页面中引用外部style.css方式如下:
 <link rel="stylesheet" type="text/css" href="style.css">
必须在html的头部内使用链接标记。