前端三剑客 —— CSS (第一节)

目录

CSS

什么是CSS

CSS的几种写法:

行内样式

内嵌样式

外链样式

@import

加载顺序

CSS选择器***

基本选择器

ID选择器

标签选择器

类选择器

通用选择器

 包含选择器


上节内容中提到了 前端三剑客 —— HTML 超文本标记语言,这节内容 跟大家讲述三剑客中的第二个 CSS。

CSS

什么是CSS

Cascading Style Sheel,简称CSS,中文叫层叠样式表,也叫级联样式表。主要作用是来修饰HTML页面的一种技术。

CSS的几种写法:

1.行内样式

2.内嵌样式

3.外链样式

4.@import

行内样式

我们要某个HTML标签中去书写样式,它需要使用style属性来指定。

弊端:不利于我们的代码维护。

那如何解决这个问题呢???  ———— 使用内嵌样式

内嵌样式

内嵌样式又叫页面样式,它的作用是对当前整个页面有效。使用它需要把样式写在一个叫style的标签,一般这个标签会放在head部分

弊端:若存在很多文件需要这个样式,如:阿里、京东商城,那么我们仍然需要在各个文件中来编写一次。

如何解决这个问题??? ———— 采用外链样式

外链样式

我们需要把公共的样式编写在一个单独的文件,这个文件的后缀是  .css  ,然后在需要引入的文件中通过link标签来使用这个外部样式文件

首先定义外部样式:通常我们需要把外部样式放到一个名为css的目录下

然后编辑页面,并使用外部样式:

通过link标签来使用外部样式,在link标签中需要指定rel属性,它的值是stylesheel,并通过href属性来引入外部的样式文件地址

弊端:有可能会造成浪费内存空间。

@import

还可以使用 @import 语句来引入外部样式,它需要放到style标签中

加载顺序

假设我们的页面既用到外部,也用到内嵌,还用到行内样式,那么谁起作用?

1.外部样式编写

2.编写页面

通过上面的案例我们发现,当几个样式有相同部分时,行内样式优先于页面样式,而页面样式优先于外部样式。 简单来说,就近原则、就近原则、就近原则

CSS选择器***

在CSS中,对于元素的修饰是通过选择器来获取到的,它有很多选择器。

---基本选择器

---包含选择器

---属性选择器

---伪类选择器

基本选择器

基本选择器使用的频率是最高的,它分为以下几种:

---ID选择器

---标签选择器

---类选择器

---通用选择器

ID选择器

ID选择器的优先级是最高的,因为页面中的ID是不能重复的,即是唯一的

标签选择器

前面ID 选择器 style 中是 div1 它是唯一的, 而现在 标签选择器div 这一大类 只要是运用div的 都可被同时修饰修改

类选择器

特点是  点 加上 class 后面的名称  即  . container 

注意:

1.使用类样式是通过class的属性来指定

2.在编写样式时,需要前面有个小圆

通用选择器

通过选择器是使用  *号来表示匹配所有页面的元素padding表示内边距,margin表示外边距

 包含选择器

包含选择器分为以下几种:

        ---子选择器:只能获取某个标签的第一级子元素

        ---后代选择器:能够获取某个标签的所有子元素

        ---分组选择器:使用逗号来进行选择,还叫并列选择器它可以设置多个标签

举例示范:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>包含选择器</title>

   <style>

       /* 选择器 */

       /* div.list 交集选择器 */

       div.list > li {       /* 子选择器的格式为:父选择器 > 子选择器 {} */

           color: blueviolet;

       }

       /* 后代选择器 */

       .list li {             /* 后代选择器的语法:父选择器  子选择器 {} */

           background-color: aquamarine;

       }

       /* 分组选择器,也叫逗号选择器,也叫并列选择器 */

       .mylove, #myprogram, h1 {

           color: red;

       }

   </style>

</head>

<body>

<div id="first" class="mylove">这是一个 div 块元素</div>

<p id="myprogram">这是一个段落标签</p>

<div class="mylove mylove2">这也是一个 div 块元素</div>

<h1>这是标题</h1>

<hr>

<div class="list">

   <ul>

       <li>这是一个列表1</li>

       <li>这是一个列表2</li>

       <li>这是一个列表3</li>

       <li>这是一个列表4</li>

       <li>这是一个列表5</li>

       <li>这是一个列表6</li>

       <li>这是一个列表7</li>

       <li>这是一个列表8</li>

       <li>这是一个列表9</li>

       <li>这是一个列表10</li>

   </ul>

   <li>这是一个列表8</li>

   <li>这是一个列表9</li>

   <li>这是一个列表10</li>

</div>

</body>

</html>

页面效果显示如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一题 --- 有效的括号[力扣][Go]

有效的括号 题目&#xff1a;20. 有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序…

大厂面试之【Redis持久化机制】 - RDB和AOF概述及应用配置

文章目录 Redis持久化1. RDB(Redis DataBase)1.1 概述1.2 配置应用 2. AOF(Append Only File)2.1 概述2.2 配置应用 Redis持久化 先上结论&#xff1a;Redis持久化操作分为rdb以及aof&#xff0c;但是前者已经够用 1. RDB(Redis DataBase) 1.1 概述 rdb保存的是dump.rdb文件在指…

WEB漏洞挖掘详细教程--用户输入合规性(sql注入测试)

前置教程&#xff1a;WEB漏洞挖掘&#xff08;SRC&#xff09;详细教程--信息收集篇-CSDN博客 WEB漏洞挖掘&#xff08;SRC&#xff09;详细教程--身份认证与业务一致性-CSDN博客 WEB漏洞挖掘&#xff08;SRC&#xff09;详细教程--业务数据篡改-CSDN博客 2.4 用户输入合规性…

方差分析注意事项

进行方差分析时&#xff0c;有一些注意事项需要注意&#xff1a; 1. 数据的正态性&#xff1a;方差分析对数据的正态性有要求&#xff0c;确保数据符合正态分布是进行方差分析的前提之一。 2. 方差齐性&#xff1a;方差分析要求各组数据的方差相等&#xff0c;即方差齐性。可…

MCRNet:用于乳腺超声成像语义分割的多级上下文细化网络

这里写目录标题 摘要引言方法 摘要 由于对比度差、目标边界模糊和大量阴影的不利影响&#xff0c;乳腺超声成像中的自动语义分割仍然是一项具有挑战性的任务。最近&#xff0c;具有U形的卷积神经网络&#xff08;CNN&#xff09;在医学图像分割中表现出相当好的性能。然而&…

【C++ STL迭代器】iterator

文章目录 【 1. 迭代器的属性 】【 2. 不同容器支持的迭代器 】【 3. 迭代器的定义方式 】【 4. 实例 】4.1 定义方式&#xff1a;正向迭代器和反向迭代器4.2 迭代器属性&#xff1a;前向迭代、双向迭代、随机迭代4.2 迭代器的遍历方法4.3 auto关键字 自动指定迭代器定义类型 背…

C++内存池

原理就是一个内存池内部拥有的空间为POOL_SIZE个自己。 #include<iostream>using namespace std;class DemoClass{ public:DemoClass() default;DemoClass(int i):data(i){}static void * operator new(size_t size);static void operator delete(void * p);virtual ~D…

【Qt】:常用控件(四:显示类控件)

常用控件 一.Lable二.LCD Number 一.Lable QLabel 可以⽤来显⽰⽂本和图⽚. 代码⽰例:显⽰不同格式的⽂本 代码⽰例:显⽰图⽚ 此时,如果拖动窗⼝⼤⼩,可以看到图⽚并不会随着窗⼝⼤⼩的改变⽽同步变化 为了解决这个问题,可以在Widget中重写resizeEvent函数。当用户把窗口从A拖…

点云的Python均值采样

一、代码 Python import numpy as np import open3d as o3ddef mean_sampling(point_cloud, num_samples=None, depth=None, method=knn, k=10):"""对点云进行均值下采样。:param point_cloud: Open3D PointCloud对象:param num_samples: (仅当method=knn时使…

机器学习——典型的卷积神经网络

机器学习——典型的卷积神经网络 卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNNs&#xff09;是一类在图像处理领域应用广泛的深度学习模型。它通过卷积操作和池化操作来提取图像的特征&#xff0c;并通过全连接层来进行分类或回归任务。在本文中&am…

开源项目-CSDN专栏

CSDN博主 单片机 毕业设计 物联网 嵌入式

基于单片机双路压力监测报警系统

**单片机设计介绍&#xff0c;基于单片机双路压力监测报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机双路压力监测报警系统是一个专门设计用于实时监测和报警两路压力变化的系统。它结合了单片机控制技术和压…

图DP

目录 有向无环图DP 力扣 329. 矩阵中的最长递增路径 力扣 2192. 有向无环图中一个节点的所有祖先 有向有环图DP 力扣 1306. 跳跃游戏 III 有向无环图DP 力扣 329. 矩阵中的最长递增路径 给定一个 m x n 整数矩阵 matrix &#xff0c;找出其中 最长递增路径 的长度。 对…

【DA-CLIP】test.py解读,调用DA-CLIP和IRSDE模型复原计算复原图与GT图SSIM、PSNR、LPIPS

文件路径daclip-uir-main/universal-image-restoration/config/daclip-sde/test.py 代码有部分修改 导包 import argparse import logging import os.path import sys import time from collections import OrderedDict import torchvision.utils as tvutilsimport numpy as…

数学知识--(质数,约数)

本文用于个人算法竞赛学习&#xff0c;仅供参考 目录 一.质数的判定 二.分解质因数 三.质数筛 1.朴素筛法 2.埃氏筛法 3.线性筛法 四.约数 1.求一个数的所有约数 2.约数个数和约数之和 3.欧几里得算法&#xff08;辗转相除法&#xff09;-- 求最大公约数 一.质数的判定 …

新型智慧城市大数据解决方案(附下载)

随着云计算、大数据、移动互联网等技术的发展&#xff0c;由城市运行产生的交通、环境、市政、商业等各领域数据量巨大&#xff0c;这些数据经过合理的分析挖掘可产生大量传统数据不能反映的城市运行信息&#xff0c;已成为智慧城市的重要资产。 在大数据时代&#xff0c;数据信…

理解main方法的语法

由于JVM需要调用类的main()方法&#xff0c;所以该方法的访问权限必须是public&#xff0c;又因为JVM在执行main()方法时不必创建对象&#xff0c;所以该方法必须是static的&#xff0c;该方法接收一个String类型的数组参数&#xff0c;该数组中保存执行Java命令时传递给所运行…

问题解决:写CSDN博文时图片大小不适应,不清晰,没法排版

项目环境&#xff1a; Window10&#xff0c;Edge123.0.2420.65 问题描述&#xff1a; 当我在CSDN写博文的时候&#xff0c;会经常插入一些图片&#xff0c;但有时候我插入的图片太大了&#xff0c;影响了整体排版。 比如我加入了一张图片&#xff0c;就变成了下面这个样子&…

释放 ChatGPT4 的威力

原文&#xff1a;Unleashing the Power of ChatGPT-4: Strategies for Building a Personal Income Stream 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 I. 介绍 在当今快速发展的数字领域中&#xff0c;人工智能&#xff08;AI&#xff09;已经成为无数行业的重要…

Kubernetes探索-Deployment面试

1. 简述Deployment的升级策略 在Deployment的定义中&#xff0c;可以通过spec.strategy指定Pod更新的策略&#xff0c;目前支持两种策略&#xff1a;Recreate&#xff08;重建&#xff09;和RollingUpdate&#xff08;滚动更新&#xff09;&#xff0c;默认值为RollingUpdate。…