给网页添加样式前的准备-CSS规则 CSS书写的位置,以及相关术语

CSS规则=选择器+声明块

h1{
    color: white;
    border: 1px solid red;
    text-align: center;
    background-color: #008c8c;
}

选择器

1.ID选择器
2.元素选择器
3.类选择器

声明块

生命块里的内容可以叫声明,也可以叫属性,也可以叫样式规则
出现在大括号中,声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式规则

CSS书写的位置

1.内部样式表

把代码写在style元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: white;
            border: 1px solid red;
            text-align: center;
            background-color: #008c8c;
        }
    </style>
</head>
<body>
    <h1>你好</h1>
</body>
</html>

2.内联样式表(元素样式表)

直接书写在元素的style属性中

<h1 style="color: green;background-color: hotpink;">你好世界</h1>

3.外部样式表 [推荐]

将样式书写在独立的css文件中
在工程文件夹里建立一个文件夹:css
需要在head元素里添加link元素,链接到外部样式表

<link rel="stylesheet" href="./css/index.css">
推荐外部样式表的原因

1.外部样式表可以解决多页面样式重复问题
2.有利于浏览器缓存,从而提高页面的响应速度(我深有体会)
3.有利于代码分离(HTML和CSS代码分开),更容易阅读和维护

CSS书写位置怎么选择?

这个涉及到网站性能的优化
1.如果网站css样式不多(一般在200行内),建议使用内部样式表,内部文件有一个好处,少一个css文件,反而能够提高浏览器的响应速度
2.内联样式表,完全不建议使用
3.当然了最推荐的还是外部样式表了,这也是主流写法

CSS的注释写法

p{
   /* color: rgb(0,255,0); */

}

一般的,先加载样式表!!
这就是是为什么无论使用什么样的CSS书写位置,都要写在html的头部位置,因为html在服务器上读取时从上而下的,如果样式表放在网站内容的下面,遇到网络不流畅的时候,可能会先加载文本,然后再加载样式,使得整个网站布局发生巨大的变化。这样就像是一个女生从素颜要画完装的过程

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×