CSS（快速入门）

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

目录

  • 一、什么是CSS?
  • 二、基本语法规范
  • 三、CSS选择器
    • 3.1 标签选择器
    • 3.2 id选择器
    • 3.3 class选择器
    • 3.4 通配符选择器
    • 3.5 复合选择器
  • 四、常用CSS样式
    • 4.1 color
    • 4.2 font-size
    • 4.3 border
    • 4.4 background-color
    • 4.5 改变显示模式
    • 4.6 padding
    • 4.7 margin

一、什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式。

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

CSS 可以理解为"东方四大邪术" 之化妆术.
即对页面的展示进行"化妆“。

CSS前 VS CSS修饰后的效果展示：
在这里插入图片描述

二、基本语法规范

选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (干啥)
• 声明的属性是键值对. 使用; 区分键值对, 使用: 区分键和值。

CSS 要写到 style 标签中

CSS有3种引入方式：
行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.

<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>

在这里插入图片描述

  1. 内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用。

定义

    <style>div{color:red;</style>

3.外部样式，html和css实现了完全分离

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

然后再创建一个CSS文件，然后在这个style.css文件里面写,代码如下：

 div{color:blue;}

上面三个的整体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;</style><link rel="stylesheet" href="style.css">
</head>
<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
</html>

效果：
在这里插入图片描述

注意;这个里面的行内样式优先，相当于局部变量，所以显示的是绿色，其他的全局被设置变成了蓝色。

三、CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.。

3.1 标签选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title>
<!--    标签选择器--><style>div{color:red;}p{color:brown;}span{color:blue;}</style>
</head>
<body>
<div>我是一个div</div>
<p>我是一个段落</p>
<span>我是一个span</span>
</body>
</html>

这里的这些div,span,p等等标签，可以通过style然后定义选择他的颜色。

效果如下：

在这里插入图片描述

3.2 id选择器

在上面的标签选择器的基础上面，然后通过对标签再增加一个属性id（唯一） 然后就可以根据id去选择,这个样子就叫做id选择器。

举个例子：我们先看一段代码和效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;}</style></head>
<body>
<div>我是一个div1</div>
<div>我是一个div2</div>
<div>我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
上面一段代码的效果如上图，我们如果想要第二个红色的字体变成蓝色字体这个要怎么办呢？那么就要用到id选择器。

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}</style></head>
<body>
<div id="div1">我是一个div1</div>
<div id="div2">我是一个div2</div>
<div id="div3">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
可以看到现在已经变成蓝色了。

注意： 这个id要有独特性不能有相同的id,然后这个id选择器使用时候要在前面加# 。

3.3 class选择器

作用:可以把一些有关联起来的东西用同一个class名字,然后他们就会变成一组然后class选择器对一个整大组进行渲染。

举个例子，我们把第一个和第三个用class选择器进行渲染：

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}.fun1{font-size:40px;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

注意：使用class渲染时候,语法格式如下：

.class的赋值 {
}

3.4 通配符选择器

对全部class进行渲染

语法：

*{}

效果同上。

3.5 复合选择器

可以多个选择器一起

举一个例子：把两个id选择器放在一起

<html>
<head><title>Document</title><style>div{color:red;}#div1,#div2{color:blue;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

再举一个例子 ：想要上面的字体变成红色。

<html>
<head><title>复合选择器</title><style>ul li{color:red;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
<ol><li>有序 1</li><li>有序 2</li><li>有序 3</li><li>有序 4</li>
</ol>
</body>
</html>

效果：
在这里插入图片描述

复合选择器是由多个单选择器组合（id选择器、class选择器），多个选择器之间用空格隔开。

四、常用CSS样式

4.1 color

color设置颜色

• 英文单词,如red,blue

  div{color:red;}

• rgb代码的颜色 如rgb(255,0,0)

  div{color:rgb(24,46,37);}

• 十六进制的颜色 如#ff00ff

  div{color:#ff00ff;}

4.2 font-size

设置字体大小

     ul li{color:red;font-size:60px;}

效果：
在这里插入图片描述

4.3 border

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body><h1>border-style 属性</h1><p>此属性规定要显示的边框类型：</p><p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p></body>
</html>

效果：
在这里插入图片描述

border的复合属性：

     ul li{border:red 1px solid;}

在这里插入图片描述

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）/

<html>
<head>
<style>
p {border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;
}
</style>
</head>
<body><h1>单独的边框</h1><p>两种不同的边框样式。</p></body>
</html>

在这里插入图片描述

border-color属性

<html>
<head>
<style>
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body><h1>border-color 属性</h1><p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p><p class="one">多色的实线边框</p></body>
</html>

效果：
在这里插入图片描述

4.4 background-color

设置背景颜色。

<html>
<head><title>边框</title><style>ul li{border:red 1px solid;background-color:blue;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
</body>
</html>

在这里插入图片描述

4.5 改变显示模式

使用display 属性可以修改元素的显示模式。
• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]

行内元素不能使用width和height,比如pan标签：

<html>
<head><title>边框</title><style>#fun1{width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：

在这里插入图片描述

如果想要用width/height的话就要用到display。

<html>
<head><title>边框</title><style>#fun1{display:block;width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：
在这里插入图片描述

4.6 padding

padding 属性用于在任何定义的边界内的元素内容周围生成空间。
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-botton
  • padding-left

所有内边距属性都可以设置以下值：
length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
提示：不允许负值。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h1>使用单独的内边距属性</h1><div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div></body>
</html>

效果：
在这里插入图片描述

4.7 margin

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
</style>
</head>
<body><h1>使用单独的外边距属性</h1><div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div></body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！！我学会啦！！

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

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

相关文章

3.Spring-事务

3.Spring-事务

一、隔离级别&#xff1a; 脏读&#xff1a; 一个事务访问到另外一个事务未提交的数据。 不可重复读&#xff1a; 事务内多次查询相同条件返回的结果不同。 幻读&#xff1a; 一个事务在前后两次查询同一个范围的时候&#xff0c;后一次查询看到了前一次查询没有看到的行。 二…
阅读更多...
C++STL之stack和queue容器(详细+通俗易懂)

C++STL之stack和queue容器(详细+通俗易懂)

前言:老铁们好&#xff0c;笔者好久没更新STL的容器了&#xff0c;今天&#xff0c;笔者接着之前的STL容器的内容继续更新&#xff0c;所以今天给老铁们分享的是STL里面的栈和队列的容器的知识。 1.栈的定义 老规矩&#xff0c;我们先来看看C的官网对stack的介绍文档。 然后…
阅读更多...
Kafka 压缩算法详细介绍

Kafka 压缩算法详细介绍

文章目录 一 、Kafka 压缩算法概述二、Kafka 压缩的作用2.1 降低网络带宽消耗2.2 提高 Kafka 生产者和消费者吞吐量2.3 减少 Kafka 磁盘存储占用2.4 减少 Kafka Broker 负载2.5 降低跨数据中心同步成本 三、Kafka 压缩的原理3.1 Kafka 压缩的基本原理3.2. Kafka 压缩的工作流程…
阅读更多...
C# 语言基础全面解析

C# 语言基础全面解析

.NET学习资料 .NET学习资料 .NET学习资料 一、引言 C# 是一种功能强大、面向对象且类型安全的编程语言&#xff0c;由微软开发&#xff0c;广泛应用于各种类型的软件开发&#xff0c;从桌面应用、Web 应用到游戏开发等领域。本文将全面介绍 C# 语言的基础知识&#xff0c;帮…
阅读更多...
实战：利用百度站长平台加速网站收录

实战：利用百度站长平台加速网站收录

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/33.html 利用百度站长平台加速网站收录是一个实战性很强的过程&#xff0c;以下是一些具体的步骤和策略&#xff1a; 一、了解百度站长平台 百度站长平台是百度为网站管理员提供的一系列工…
阅读更多...
DNS缓存详解（DNS Cache Detailed Explanation）

DNS缓存详解（DNS Cache Detailed Explanation）

DNS缓存详解 清空DNS缓存可以让网页访问更快捷。本文将从什么是DNS缓存、为什么清空DNS缓存、如何清空DNS缓存、清空DNS缓存存在的问题四个方面详细阐述DNS缓存清空的相关知识。 一、什么是DNS缓存 1、DNS缓存的定义&#xff1a; DNS缓存是域名系统服务在遇到DNS查询时自动…
阅读更多...
数组排序算法

数组排序算法

数组排序算法 用C语言实现的数组排序算法。 排序算法平均时间复杂度最坏时间复杂度最好时间复杂度空间复杂度是否稳定适用场景QuickO(n log n)O(n)O(n log n)O(log n)不稳定大规模数据&#xff0c;通用排序BubbleO(n)O(n)O(n)O(1)稳定小规模数据&#xff0c;教学用途InsertO(n)…
阅读更多...
快速更改WampServer根目录php脚本

快速更改WampServer根目录php脚本

快速更改WampServer根目录php脚本 <?php // 配置文件地址 $apacheConfPath C:\Install\CTF\Wampserver\bin\apache\apache2.4.62.1\conf\httpd.conf; $apacheConfPath2 C:\Install\CTF\Wampserver\bin\apache\apache2.4.62.1\conf\extra\httpd-vhosts.conf; // 新根目录…
阅读更多...
OFDM系统仿真

OFDM系统仿真

1️⃣ OFDM的原理 1.1 介绍 OFDM是一种多载波调制技术&#xff0c;将输入数据分配到多个子载波上&#xff0c;每个子载波上可以独立使用 QAM、PSK 等传统调制技术进行调制。这些子载波之间互相正交&#xff0c;从而可以有效利用频谱并减少干扰。 1.2 OFDM的核心 多载波调制…
阅读更多...
第11章：根据 ShuffleNet V2 迁移学习医学图像分类任务：甲状腺结节检测

第11章：根据 ShuffleNet V2 迁移学习医学图像分类任务：甲状腺结节检测

目录 1. Shufflenet V2 2. 甲状腺结节检测 2.1 数据集 2.2 训练参数 2.3 训练结果 2.4 可视化网页推理 3. 下载 1. Shufflenet V2 shufflenet v2 论文中提出衡量轻量级网络的性能不能仅仅依靠FLOPs计算量&#xff0c;还应该多方面的考虑&#xff0c;例如MAC(memory acc…
阅读更多...
.Net WebAPI -[HttpPut(“{fileServiceId:int}“)]

.Net WebAPI -[HttpPut(“{fileServiceId:int}“)]

[HttpPut("{fileServiceId:int}")] 这个写法是 ASP.NET Core 中的一个路由特性&#xff0c;用于定义一个 HTTP PUT 请求的路由&#xff0c;并指定路由参数的类型。 解析 HttpPut [HttpPut]&#xff1a; 这是一个 ASP.NET Core 的路由特性&#xff0c;用于标记一个方…
阅读更多...
【C语言】内存管理

【C语言】内存管理

【C语言】内存管理 文章目录 【C语言】内存管理1.概念2.库函数3.动态分配内存malloccalloc 4.重新调整内存的大小和释放内存reallocfree 1.概念 C 语言为内存的分配和管理提供了几个函数。这些函数可以在 <stdlib.h> 头文件中找到。 在 C 语言中&#xff0c;内存是通过…
阅读更多...
网络编程套接字（中）

网络编程套接字（中）

文章目录 &#x1f34f;简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求客户端创建套接字客户端连接服务器客户端发起请求服务器测试单执行流服务器的弊端 &#x1f350;多进程版的TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务 &#x1…
阅读更多...
happytime

happytime

happytime 一、查壳 无壳&#xff0c;64位 二、IDA分析 1.main 2.cry函数 总体&#xff1a;是魔改的XXTEA加密 在main中可以看到被加密且分段的flag在最后的循环中与V6进行比较&#xff0c;刚好和上面v6数组相同。 所以毫无疑问密文是v6. 而与flag一起进入加密函数的v5就…
阅读更多...
DIFY源码解析

DIFY源码解析

偶然发现Github上某位大佬开源的DIFY源码注释和解析&#xff0c;目前还处于陆续不断更新地更新过程中&#xff0c;为大佬的专业和开源贡献精神点赞。先收藏链接&#xff0c;后续慢慢学习。 相关链接如下&#xff1a; DIFY源码解析
阅读更多...
Electricity Market Optimization 探索系列（一）

Electricity Market Optimization 探索系列（一）

​ 本文参考链接&#xff1a;Linear Programming Mini Example 先从一个线性规划的例子说起&#xff1a; 问题背景&#xff1a; 现在需要使用两台发电机满足用户的用电需求&#xff0c;发电机一的发电功率上限是 6MW&#xff0c;发电机二的发电功率上限是 4MW&#xff0c;发电…
阅读更多...
Spring的AOP思想中事物管理注意点

Spring的AOP思想中事物管理注意点

我们以事务管理实现AOP思想 通过在Service层加入事务管理,因为Service层可能使用多个DAO(多条SQL语句) 要保证这些SQL要么同时成功,要么同时失败,例如:学生Serivce:删除学生的时候,还需要删除学生关联信息(选课信息) 只有都删除成功才提交,如果有一条执行失败…
阅读更多...
Hot100之子串

Hot100之子串

560和为K的子数组 题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列 思路解析 ps&#xff1a;我们的presum【0】就是0&#xff0c;如果没有这个0的话我们的第一个元素就无法减去上…
阅读更多...
网络工程师 （11）软件生命周期与开发模型

网络工程师 （11）软件生命周期与开发模型

一、软件生命周期 前言 软件生命周期&#xff0c;也称为软件开发周期或软件开发生命周期&#xff0c;是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段&#xff0c;每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…
阅读更多...
谈谈你所了解的AR技术吧！

谈谈你所了解的AR技术吧！

深入探讨 AR 技术的原理与应用 在科技飞速发展的今天&#xff0c;AR&#xff08;增强现实&#xff09;技术已经悄然改变了我们与周围世界互动的方式。你是否曾想象过如何能够通过手机屏幕与虚拟物体进行实时互动&#xff1f;在这篇文章中&#xff0c;我们将深入探讨AR技术的原…
阅读更多...
最新文章

Copyright @ 2022~2023