CSS 样式语言选择器

news2024/11/25 5:03:12

CSS介绍

层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。
随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生。
CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和 HTML 类似
CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

html是一个架子和内容，css会去给它做美化样式的功能。

CSS使用方法

内联方式（行内样式）这个是跟着html标签走的，在HTML中如何使用css样式

<p style="color:red">在HTML中如何使用css样式</p>

内部方式（内嵌样式），在head标签中使用，里面是选择对哪个标签生效

<style type="text/css">
    p{
      color:red;
    }
</style>

外部导入方式(推荐)，在head标签中使用

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
    <link href="main.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
       a{
         color: blue;
       }
    </style>
</head>

<body>
    <div>
        <p style="color:red;">这是在div元素当中的段落</p>
        <a>我是一串文字</a>
    </div>
</body>

</html>

选择器

选择器：需要改变样式的HTML元素格式: 选择器{属性:值;属性:值;属性:值;....}

常见选择器： 标签选择器、类选择器、 ID 选择器、派生选择器

1) 元素选择器

使用 html 标签作为选择器，为指定标签设置样式。

示例1：h1元素设置样式

h1 {
    color: red;
    font-size: 14;
}

示例2：多个元素设置样式

h1,h2,h3,h4,h5,h6 {
    color: green;
}

示例3：子元素会继承最高级元素所有属性

body {
    color: #000;
    font-family: Verdana, serif; /*字体*/
}

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        p{
            color: blue;
        }

        body{
            color: blueviolet;
        }
    </style>
</head>

<body>
    <p>在HTML中如何使用css样式</p>
    <a>我是一串文字</a>

</body>

</html>

可以看到设置了父标签body样式，那么body里面的标签也会被渲染为父元素的css样式。当子元素有自己定义样式，那么优先级是子元素自己的优先。

2) ID 选择器

使用“id”作为选择器，为指定id设置样式。
使用格式:#id名{样式...}
特点：每个id名称只能在HTML文档中出现一次;在实际开发中，id一般预留JavaScript使用

其实就是给标签加上id的值。每个选择器使用场景其实是不一样的。元素选择器当你有共同的元素它会被一起加上样式，如果没有共同的元素，只有a标签，那么只有它这一个地方会被去加上css样式。

使用方式：

/*第一步: 给标签指定id*/
<p id="t">...</p>

/*第二步: 针对id设置样式*/
#t {
    color: red;
}

代码实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        #ap{
            color: brown;
        }
    </style>
</head>

<body>
    <p id="ap">在HTML中如何使用css样式</p>
</body>

</html>

3) 类选择器

使用“类名”作为选择器，为指定类设置样式。
使用格式:.类名{样式...}

使用方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .ap{
            color: brown;
        }
    </style>
</head>

<body>
    <h1 class="ap">在HTML中如何使用css样式</h1>
    <p class="ap">在HTML中如何使用css样式</p>
    <a class="ap">在HTML中如何使用css样式</a>
</body>

</html>