什么是层叠样式表？

小蓝 • 2024-11-24 06:22 • 编程

一、CSS由什么组成

CSS（Cascading Style Sheet）即层叠样式表，是一种用于定义HTML、SVG、XML等文档的样式的语言。它由选择器、属性和值组成。

选择器用来指定一个或多个元素，属性用来描述元素的外观或其他方面的行为，值用来描述属性的设置。

下面是一个简单的CSS示例：

    
p {
    color: red;
    font-size: 14px;
}

这段代码中，选择器“p”指定了样式应用的元素为“p”标签，属性“color”用于设置字体颜色为红色，属性“font-size”用于设置字体大小为14像素。

二、CSS的作用

CSS的主要作用是为HTML等文档添加样式，包括但不限于以下几个方面：

1、修改文本字体、大小、颜色等样式。

2、设置背景图片或颜色。

3、调整布局、边距、内边距等。

4、添加动画或其他特效。

下面是一个应用CSS的HTML示例：

    



    My website
    
        body {
            background-color: #f2f2f2;
        }
        h1 {
            color: blue;
            font-size: 36px;
            text-align: center;
        }
        p {
            color: black;
            font-size: 18px;
            line-height: 1.5;
        }
    


    Welcome to my website
    This is some text that describes my website.

这个示例中，CSS被嵌入到HTML文档中的标签内。它为全局的body元素设置了背景色为灰色，为h1元素设置了蓝色字体，36像素大小和居中对齐。同时，它为所有

元素设置了黑色字体、18像素大小和1.5倍行距。

三、CSS的选择器类型

1、标签选择器

标签选择器是CSS中最基本的选择器，它可以选中HTML文档中所有使用该标签的元素。

    
p {
    font-size: 14px;
}

这段代码中，p是标签选择器，它将为所有的

标签设置字体大小为14像素。

2、类选择器

类选择器可以选中使用指定类名的元素，类名需要在HTML文档中进行指定。类名由一个.号开头，紧随其后的是给类名起的名称。

    
.example {
    font-size: 16px;
}

这段代码中，.example是类选择器，它将为所有使用class=”example”的元素设置字体大小为16像素。

3、ID选择器

ID选择器可以选中指定ID的元素，ID需要在HTML文档中进行指定。ID由一个#号开头，紧随其后的是给ID起的名称。

    
#header {
    background-color: gray;
}

这段代码中，#header是ID选择器，它将为指定ID为”header”的元素设置背景色为灰色。

4、子选择器

子选择器可以选中指定元素下的子元素。

    
div > p {
    font-weight: bold;
}

这段代码中，”>”是子选择器，它将为所有直接位于div元素内的

元素设置字体加粗。

5、伪类选择器

伪类选择器可以选中不在文档树中的元素，例如超链接的不同状态。

    
a:hover {
    text-decoration: underline;
}

这段代码中，:hover是伪类选择器，它将为所有的超链接在鼠标悬浮时添加下划线。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182520.html