css核心知识

The CrazyMan

已于 2023-01-26 19:06:18 修改

阅读量107

点赞数

分类专栏：前端web 文章标签： css 学习 html

于 2022-12-14 11:30:27 首次发布

本文链接：https://blog.csdn.net/qq_42897323/article/details/128311210

版权

前端web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

学习CSS，记录CSS语法规则以及CSS的选择器

文章目录

一、CSS
二、CSS中的选择器

正文内容：

一、CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css；由两个部分构成：选择器与声明；
具体的CSS语法实例如图所示：
在这里插入图片描述
范例代码如下：

p {
    font-family:"Times New Roman";
    font-size:20px;
}

css样式有三种嵌入HTML生效的方式：

行内式：直接写在标签内部

<!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>css学习</title>
</head>

<body>
    <p style="color: red;">css学习</p>
</body>

</html>

内联式：写在head标签中，使用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">
    <style type="text/css">
        p {
            color: red;
        }
    </style>
    <title>css学习</title>
</head>

<body>
    <p>css学习</p>
</body>

</html>

外联式：将样式写在.css格式结尾的文件，在head标签中使用link标签将这个文件引入
index.css文件如下：

P {
    color: red;
}

index.html文件如下：

<!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">
    <link rel="stylesheet" href="./css/index.css">
    <title>css学习</title>
</head>

<body>
    <p >css学习</p>
</body>

</html>

这三种方式的优先级是逐渐递增的，可以看作是就近原则

二、CSS中的选择器

标签选择器：直接使用标签名称作为选择器
类选择器：使用.标签名作为选择器
id选择器：使用#标签名作为选择器
这三种选择器的优先级是逐渐递增的；选择器之间可以相互组合
子选择器：使用空格进行选择

index.html文件如下：

<!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">
    <link rel="stylesheet" href="./css/index.css">
    <title>css学习</title>
</head>

<body>
    <p>这是蔬菜列表</p>
    <ul>
        <li class="vegetable">
            芹菜
        </li>
        <li class="vegetable">
            茄子
        </li>
        <li class="vegetable">
            空心菜
        </li>
    </ul>
    <ul>
        <li class="other">
            芹菜
        </li>
        <li class="other">
            茄子
        </li>
        <li class="other">
            空心菜
        </li>
    </ul>
    <p>这是水果列表</p>
    <ul>
        <li id="watermelon">
            西瓜
        </li>
        <li id="strawberry">
            草莓
        </li>
        <li>
            苹果
        </li>
    </ul>
</body>

</html>

index.css文件如下：

P {
    color: red;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

ul {
    color: blue;
    height: 60px;
    text-align: center;
    padding-inline-start: 0px;
}

/* li标签里面类名是vegetable的标签 */
li.vegetable {
    color: brown;
}

#strawberry{
    color: red;
}

/* li标签里面id是watermelon的标签 */
li#watermelon {
    color: blueviolet;
}