CSS基础入门

最新推荐文章于 2025-04-14 13:07:29 发布

煊琰

最新推荐文章于 2025-04-14 13:07:29 发布

阅读量86

点赞数

本文详细介绍了CSS的基础语法，包括选择器、属性名和属性值的使用。同时，讲解了CSS的三种引入方式：行间式、内联式和外联式，并分析了它们的特点和优先级。此外，还提到了CSS的注释方式、长度单位和颜色单位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css基础语法

一、CSS格式

选择器{
  属性名:属性值;
  属性名:属性值;
}

选择器负责圈定范围，要修改的元素集合，花括号内的声明由属性名和属性值组成(key:value)的形式，用于设定具体样式

二、CSS三种引入方式

1.行间式

<p style="color:red;"</p>

2.内联式

<style>
    p {
        color:red
    }
</style>

3.外联式

p {
    width: 100px;
    height: 100px;
    background-color: red;
}

<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>

三种引入方式对比

<!-- 行间式 -->
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开 -->

<!-- 内联式 -->
<!-- 1.在style标签内（style标签一般作为head的子标签） -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开（一般独行分开赋值） -->
<!-- 5.格式：选择器{样式块} -->

<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开 -->
<!-- 5.格式：选择器{样式块} -->
<!-- 6.将html与css文件建立联系：html通过link标签链接外部css（一般在head里面） -->

三种引入方式的优先级

注：三种方式间没有优先级 
    <!-- 1.三种方式协同布局： -->
    <!-- 2.不重复的属性一定为唯一位置的唯一值 -->
    <!-- 3.重复的属性采用覆盖赋值，保留最后位置的属性值 -->
    <!-- 4.行间式一定是逻辑上最后被解析的位置（js正常操作的就是行间式） -->
    <!-- !important 会影响优先级 -->