CSS基础(CSS导入方式、选择器、属性)

eh同学

已于 2024-05-07 23:27:14 修改

阅读量1.3k

点赞数 33

分类专栏：前端文章标签： css 前端

于 2024-05-04 00:11:41 首次发布

本文链接：https://blog.csdn.net/qq_42683732/article/details/138417061

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

CSS构成

CSS 主要是由选择器、属性和属性值组成，可有一个或多个组合到一起：

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束,

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
    /*这是一个注释*/
}

CSS三种导入方式

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

内联样式：你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="CSS/style.css">

    <style>
        h2 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>外部样式表</h1> 
    <h2>内部样式表</h2> 
    <h3 style="color: blue;">内联样式</h3>
    
</body>
</html>

不同的导入方式（内联样式、内部样式表、外部样式表、浏览器默认样式）具有不同的优先级，优先级高的会覆盖掉优先级低的样式：内联样式> 内部样式>外部样式> 浏览器默认样式

CSS选择器

上文中我们是通过标签进行选择那一部分样式进行变化，这样的好处是设置一次即可所有相同标签都发生变化，如果我们想要某个独立的内容发生变化这就需要使用其他的选择器进行区分。

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

元素、类、ID、全局选择器

元素选择器：按对应的标签/元素选择

类选择器：类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

ID 选择器：ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。

全局选择器：是由一个星号（*）代指的，它选中了文档中的所有内容

类和ID选择器是最常用的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="CSS/style.css">

    <style>
        /*元素选择器*/
        p {
            color: aqua;
        }
        /*类选择器*/
        .good{
            color: red;
        }
        /*ID选择器*/
        #ID{
            font-size: 35px;
        }
        /*全局选择器*/
        *{
            font-family: 'KaiTi';
        }

    </style>
</head>
<body>
    <p>元素选择器</p> 
    <p class="good">类选择器</p> 
    <P id="ID">ID选择器</P>
    
</body>
</html>

关系选择器

子代关系选择器：子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

后代选择器：后代选择器——典型用单个空格（" "）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

邻接兄弟选择器：邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。

通用兄弟选择器如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。

伪类选择器：伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。这些条件可以包括鼠标悬停（:hover ）、链接状态（:active）、第一个子元素（:first-child）等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="CSS/style.css">

    <style>
        /*子代选择器*/
        .father>.son{
            color: yellowgreen;
        }
        /*后代选择器*/
        .father p{
            color: red;
            font-size: large;
        }
        /*兄弟选择器*/
        h3+p{
            color: green;
        }
        /*伪类选择器
        鼠标悬停时显示紫色背景
        */
        #element:hover{
            background-color: blueviolet;
        }

    </style>
</head>
<body>
    <div class="father">
        <p class="son">子元素选择器</p>
        <div>
            <p class="grandson">后代选择器</p>
        </div>
    </div>
    <p>这是一个p标签</p>
    <h3>兄弟选择器</h3>
    <p>这是一个p标签</p>

    <h3 id="element">伪类选择器</h3>
    
</body>
</html>

CSS属性

属性已经使用过很多次了，如字体大小、颜色、背景等。

属性有很多很多，大多属性类似，需要的时候查手册，复合属性可以实现不同属性的效果。

CSS 参考手册 | 菜鸟教程 (runoob.com)

这里整理一些属性

background	复合属性。设置对象的背景特性。
border	复合属性。设置对象边框的特性。
height	设置元素的高度
width	设置元素的宽度
font	复合属性。在一个声明中设置所有字体属性
color	设置文本的颜色
display	规定元素应该生成的框的类型