css的选择器和样式表

最新推荐文章于 2023-12-23 21:11:00 发布

グ清晨

最新推荐文章于 2023-12-23 21:11:00 发布

阅读量141

点赞数

文章标签： css3

原文链接：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6755086752554588409

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、css是什么？以及css的优势
二、css的基本信息
总结

一、css是什么？以及css的优势

css指层叠式样式表(Cascsding Style Sheets)
样式定义如何显示html元素
样式通常存储在样式表中
把样式添加到html5.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式通常存储在CSS文件中

多个样式表定义可层叠为一个

css的优势:
1. 内容和表现分离
2. 网页结构表现统一,可以实现复用
3. 样式十分的丰富
4. 利用SEO,容易被搜索引擎收录

二、css的基本信息

1.css三种样式表

<!–规范,<style> 可以编写css编码,每一个声音,最好都使用分号结束
语法:
选择器{
声明1;
声明2;
声明3;
}
–>

内部样式表:在html中使用css,可以直接在<head>块中写入css语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个CSS网站</title>
    <style>
        h {
            color: red;
        }
    </style>
</head>
<body>
<h>这是一个标题</h>
</body>
</html>

显示结果为

在这里插入图片描述

外部样式表: 在html中使用<link> 链接

如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。即href中填写的是一个.css文件的地址

    <link rel="stylesheet" href="css/style.css">

.css文件中的代码

h {
    color: red;
}

行内样式:在标签元素中,编写一个style属性,编写样式即可

<h style="color:yellow">这是一个标题</h>

2.三种样式表的优先级

行内样式表的优先级最高,内部样式表和外部样式表的优先级一样,遵循就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表-->
    <style>
        h {
            color: yellow;
        }
    </style>
    <!--外部样式表-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式表-->
<h style="color: red">优先级演示</h>
</body>
</html>

style.css文件

h {
    color: green;
}

运行结果为红色,说明行样式表优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表-->
    <style>
        h {
            color: yellow;
        }
    </style>
    <!--外部样式表-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式表-->

<h>优先级演示</h>
</body>
</html>

运行结果为绿色,说明谁离元素近就用谁,也就是就近原则

3.三种选择器

标签选择器:会选择到页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 标签选择器,会选择到页面上所有这个标签的元素-->
    <style>
        h1{
            color: red;
        }
        p{
            color: yellow;
            font-size: 30px;
        }
    </style>

</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<p>好好学Java</p>
</body>
</html>

运行效果
在这里插入图片描述

类选择器
格式: .class的名称{}
好处:可以多个标签归类,是同一个class,可以复用
不能以数字开头,它无法在 Mozilla 或 Firefox 中起作用。

 <!--class类选择器,-->
    <style>
        .num1 {
            color: red;
        }

        .num2 {
            color: yellow;
        }
    </style>

<h1 class="num1">标签选择器</h1>
<h1 class="num2">标签选择器</h1>
<h1 class="num2">标签选择器</h1>
<p class="num1">好好学Java</p>

运行结果

id选择器:全部变量且唯一,id选择器的优先级最高,其次是类选择器
格式:#加上id名{}
不要以数字开头,它无法在 Mozilla 或 Firefox 中起作用。

 <style>
        #num1 {
            color: red;
        }
        .num1{
            color: yellow;
        }
        h1{
            color: aqua;
        }
    </style>

<h1 id="num1" class="num1">标签选择器</h1>
<h1 class="num1">标签选择器</h1>
<p>好好学Java</p>

运行结果

4.层次选择器

后代选择器:包含在某个元素里面的同一元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        后代选择器
         */
       body p{
            background: yellow;
        }

    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p5</p></li>
    <li><p2>p6</p2></li>
    <li><p2>p7</p2></li>
</ul>

</body>
</html>

运行结果
在这里插入图片描述

子选择器:某个元素中的第一代该元素,就像爷爷和爸爸,不管孙子的你

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    子选择器-->
    <style>
        body>p{
            background: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
</body>
</html>

运行结果
在这里插入图片描述

相邻弟弟选择器:选择指定类选择器的下一行,且只有一个

  <!--相邻弟弟选择器-->
    <style>
         .active + p{
             background: red;
         }
    </style>

运行结果

在这里插入图片描述

通用选择器:当前选中元素向下的所有元素

  <style>
        .active~p{
            background: red;
        }
    </style>

运行结果

在这里插入图片描述

5.伪类选择器

注:该图片来自菜鸟教程;
在这里插入图片描述

first-child对元素的第一个子元素添加样式，常用在ol,ul下面的li，或者tr下面的td或th上等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child {
            background: red;
        }

        /*ul的最后一个子元素*/
        ul li:last-child {
            background: #f7ff00;
        }

        /*
            选中p:定位到父元素,选择当前第一个元素,且该元素为p元素才生效
            ,按顺序定位
         */
        p:nth-child(1) {
            background: antiquewhite;
        }

        /*
       选中p:定位到父元素,选择当前类型的第二个元素,且该元素为p元素才生效
       ,按类型定位
         */
        p:nth-of-type(2) {
            background: brown;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

运行结果
在这里插入图片描述

6.属性选择器

注:该图片来自https://www.w3school.com.cn/css/css_attribute_selectors.asp
在这里插入图片描述

7.span标签

span标签:重点突出的问题,可以使用span套起来


<h2>好好学习<span class="num1">Java</span></h2>

.num1{
	font-size:30px;
    background:yellow;
    
}

运行结果:
在这里插入图片描述

7.字体样式

font-style:主要用来表示斜体

normal 正常
italic 斜体
oblique 倾斜

font-weight: 主要用来表示粗体
normal 正常
bold 粗体

用 em 设置字体大小 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。可以使用这个公式从像素到 em 来计算大小：pixels/16=em

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

グ清晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的选择器和样式表

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、css是什么？二、使用步骤1.引入库2.读入数据总结一、css是什么？ css二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import
复制链接

扫一扫