重生之我学css---css基础篇之语法基础

冰冻果冻

已于 2024-10-05 20:24:19 修改

阅读量903

点赞数 15

文章标签： html css 前端

于 2024-10-05 20:21:57 首次发布

本文链接：https://blog.csdn.net/2401_85545586/article/details/142641423

版权

一、CSS的概述

1、css是什么？

CSS（层叠样式表）是一种用于描述网页上元素的外观和样式的标记语言。它与HTML（超文本标记语言）一起使用，可以实现网页的布局、字体、颜色、背景、边框等方面的样式控制。

CSS的核心概念是样式规则，每个样式规则由选择器和一组声明组成。选择器用于指定应用样式的元素，而声明则定义了应用到选定元素上的样式。声明由属性和值组成，属性定义样式的特定方面（如字体大小、颜色等），而值则指定这些属性的具体设置。

CSS具有层叠性，当多个样式规则应用到同一个元素时，它们的优先级将根据特定规则进行计算，从而确定最终应用的样式。这使得开发人员可以灵活地控制网页的外观和布局。

CSS还支持继承，即某些样式属性可以从父元素继承到子元素。这简化了样式的管理，使得只需在父元素上定义样式，就可以自动应用到所有子元素。

最新版本的CSS是CSS3，它引入了许多新的特性和选择器，如圆角边框、渐变背景、媒体查询等，为开发人员提供了更多的样式控制选项。

总而言之，CSS是一种用于控制网页样式的标记语言，它提供了丰富的样式选项和灵活的布局能力，使得开发人员可以创建出各种各样的网页设计效果。

2、css的编写规则

存放CSS样式文件的目录文件一般命名为style或css

2、样式文件的命名规则

文件一般命名为style.css或css.css

3、选择符的命名规则

只能由字母、数字、下划线（_）或短横线（-）组成。
必须以字母开头。

不得使用空格或

<!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>
</head>
<!--style标签写css代码-->
<style>
    h3{
        color: blue;
        font-size: 30px;
        font-family: 宋体;
    }
    h3{
        color: brown;
        font-size: 30px;
        font-family: 宋体;
    }

</style>
<!--最好是相对路径-->
<!--后来居上-->
<link rel="stylesheet" href="../2.css/style1.css">
<body>
    <h2 style="color: blue;font: size 30px; font-famliy:楷体;">css行内式</h2>
    <h3>你好</h3>
    <h4>外链式</h4>
</body>
</html>

特殊字符。

区分大小写。
可以使用中文或其他非英语字符，但是不推荐。
可以使用驼峰命名法，如"myClassName"。
可以使用连字符命名法，如"my-class-name"。
可以使用下划线命名法，如"my_class_name"。

总之，选择符的命名应该简洁、有意义、易于理解和维护。

4、css代码注释

CSS中的注释以“/*” 开始“/*”结束

二、网页中引用 CSS的方法

1、定义行内样式

代码：

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color: blue;font-size: 20px;">此文字被定义</p>
<p>没有被定义</p>
</body>
</html>

代码运行结果

2、定义内部样式表

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style text="text/css">

p{color: blue;

font-family: 宋体;

}

</style>

</head>

<body>

<p class="blue">此文字被定义</p>

</body>

</html>

代码运行结果：

3、外链式(详细）

在HTML文件的<head>标签中添加<link>标签，用于引入外部CSS文件。

在<link>标签的href属性中指定CSS文件的路径。上面的例子中，style.css应该与HTML文件在同一目录下。

代码运行结果：

注意：层叠样式：一般会后来居上

优先级：行内样式>内部样式>外链式

三、CSS语法基础

1.CSS样式规则

如图所示：

2.选择符

基本选择符包括标签选择符，类选择符，id选择符

(1)标签选择符

直接使用HTML标签名称作为选择器，例如 p 表示选择所有的段落标签 <p>。

<style type="text/css">
    h1{font-size: 30px;
        color: blue; }
</style>
</head>
</body>
<h1>第一</h1>
<body>

(2)clss类选择符

1.类选择器（Class Selector）：使用类名作为选择器，以.开头，例如 .my-class 表示选择所有具有 my-class 类的元素。

<style type="text/css">
    .blue{font-size: 30px;
        color: blue; }
</style>
</head>
</body>
<h1 class="blue">第一</h1>
<p class="blue">第二</p>
<body>
    
</body>
</html>

运行结果：

(3)id选择符

ID选择器（ID Selector）：使用元素的ID属性作为选择器，以#开头，例如 #my-id 表示选择具有 my-id ID的元素。id选择符用来对某个单一元素定义单独的样式。每个id选择符只能在HTML页面使用一次，针对性更强。

<style type="text/css">
    #top{font-size: 30px;
        color: blue; }
</style>
</head>
</body>
<h1 id="top">第一</h1>

<body>
    
</body>

3.复合选择符

复合选择符包括交集选择符、并集选择符和后代选择符。

（1）交集选择符

交集选择符（也被称为并集选择符）是一种CSS选择符，用来选择同时满足多个条件的元素。它使用两个选择符并列，没有空格，其中第一个选择符是标签选择符，第二个是class或者id选择符。

h1{font-size: 30px;
        color: blue; 
    text-decoration: underline;}
.content{font-size: 20px;
    color: green;
    text-decoration: none;
    border: 1px solid;

}
h1.content{
    color: blue;
    font-size: 20px;
    border: 1px solid;
}
</style>
</head>
</body>
<h1 >第一</h1>
<p class="content">第二</p>
<h1 class="content">交集选择符</div>
<body>
    
</body>

运行结果：

(2)并集选择符

并集选择器（Group Selector）通过逗号（,）将多个选择器组合在一起，任何用于文档中的元素只要符合这些选择器中的任意一个，就会应用这个规则。

例如，如果你想要为所有的h1元素和所有的h2元素设置同样的样式，你可以这样写：

<style type="text/css">
h1,h2{font-size: 30px;
        color: blue; }
</style>
</head>
</body>
<h1 >第一</h1>
<h2>第二</h2>
<body>
    
</body>
</html>

运行结果：

（3)后代选择器

CSS 后代选择器是用于选择特定元素或组件的一种选择器。它可以选择一个元素的所有特定后代元素。后代选择器通过空格来表示，即" "。后代选择符(可跨代）

 <style>
    ul li ul li #a1{
    color: blue;
}
</style>
</head>
<body>
    <ul>
<h3>标题</h3>
<li>第一章
    <ul>
    <li>
        <h6 id="a1">1</h6>
    </li>
    <li>
        <h6 id="a2">2</h6>
    </li>
    <li>
        <h6 id="a3">3</h6>
    </li>
</ul>

<li>第二章</li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>


    </ul>
    
</body>
</html>

运行结果：