前端CSS基础1(CSS编写位置,样示表的优先级,CSS语法规范)

发布于:2024-04-20 ⋅ 阅读:(21) ⋅ 点赞:(0)

前端CSS基础(CSS编写位置,样示表的优先级,CSS语法规范)

CSS简介

CSS可以美化HTML,让HTML更漂亮。HTML搭建结构,CSS添加样式,实现了结构和样式的分离。

CSS的编写位置

位置1-行内样式

    <h1 style="color:red;font-size: 60px;">我要学成CSS</h1>

注意style的用法。

位置2-内部样式

<!--内部样式表:将CSS样式定义在HTML文档的<head>部分
使用<style>标签包裹起来。例如以下代码:-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
     <meta charset="UTF-8">
     <title>欧买噶的CSS学习</title>
     <style>
        h2
        {
            color: green;
            font-size: 80px;
        }
        h3
        {
            color: blue;
            font-size: 70px;
        }
     </style>
</head>
<body>
    <!--行内样式-->
    <h1 style="color:red;font-size: 60px;">我要学成CSS</h1>
    <!--内部样式-->
    <h2>欧买噶</h2>
    <h3>身体健康</h3>
</body>
</html>

位置3-外部样式

外部样式表:将CSS样式保存在一个单独的文件中,然后在HTML文档中使用标签将其链接到HTML文件。例如,在当前目录下建立一个名为styles.css的外部样式表文件,把所有的CSS代码都放入此文件中,你可以这样链接它:
styles.css文件中的代码为:

h4
{
    color: black;
    font-size: 80px;
}
h5
{
    color: yellow;
    font-size: 70px;
}

在HTML文件中引入.css文件,利用link标签,注意link标签一般写在head标签里。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
     <meta charset="UTF-8">
     <title>欧买噶的CSS学习</title>
     <style>
        h2
        {
            color: green;
            font-size: 80px;
        }
        h3
        {
            color: blue;
            font-size: 70px;
        }
     </style>
     <link rel="stylesheet" href="./positon.css">
</head>
<body>
    <!--行内样式-->
    <h1 style="color:red;font-size: 60px;">我要学成CSS</h1>
    <!--内部样式-->
    <h2>欧买噶</h2>
    <h3>身体健康</h3>
    <!--外部样式-->
    <link rel="stylesheet" href="./positon.css">
    <h4>欧买噶</h4>
    <h5>身体健康</h5>
</body>
</html>

样式表的优先级

在CSS中,样式的优先级是由多个因素决定的,以下是一些主要规则:
优先级规则:行内样式>内部样式=外部样式。
1、内部样式,外部样式,这二者的优先级相同,而且后面的会覆盖前面的。(以后面的为主)
2、同一个样式表中,优先级也和编写的顺序有关,而且后面的会覆盖前面的。

  1. 最近祖先样式:如果一个元素嵌套在另一个元素内,那么内部元素的样式(直接样式)将优先于外部元素的样式(祖先样式)。例如,如果有一个类名为sondiv,它的颜色被设置为蓝色,而它的祖先div的颜色被设置为红色,那么son这个div的颜色将是蓝色。
  2. 权重:权重是决定CSS规则如何被浏览器解析并最终显示的关键。权重越高的样式优先级越高。每个选择器都有一个特定的权重值,当多个样式被应用到同一个元素上时,权重决定了哪种样式将被采用。
  3. 特殊性:CSS选择器的特殊性由选择器本身的组成部分决定,如类型选择器、类选择器、ID选择器等。特殊性越高的选择器,其定义的样式优先级越高。
  4. 顺序:如果两个样式规则具有相同的权重和特殊性,那么后声明的规则将会覆盖先声明的规则。
  5. 继承:有些样式属性是从父元素继承而来的,除非子元素有相同属性的本地声明,否则它将继承父元素的样式。
  6. !important 声明:使用!important关键字可以提高某个样式规则的优先级,使其高于其他普通的样式规则。

综上所述,理解这些规则对于有效地编写和维护CSS代码至关重要。通过合理地应用这些规则,可以更好地控制页面的布局和外观。

CSS语法规范

在这里插入图片描述
CSS语法规范主要包括选择器的使用和声明的格式化

在编写CSS时,应遵循一些基本规范以确保代码的清晰性和一致性:

  • 选择器和声明:CSS规则由选择器和一条或多条声明组成。选择器用于指定要应用样式的HTML元素,而声明则包含了具体的样式设置。
  • 格式规范:推荐使用展开格式来编写CSS,这样更加直观。选择器、属性名、属性值关键字应全部使用小写字母。冒号后面和属性值前面应保留一个空格,选择器和大括号之间也应保持一个空格。
  • 基础选择器:包括标签选择器、类选择器、ID选择器和通配符选择器。这些选择器可以单独使用或组合成复合选择器以更精确地选取目标元素。
  • 属性值对:属性和属性值应以“键值对”的形式出现,属性和属性值之间用英文冒号“:”分隔,多个键值对之间用分号“;”区分。