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>

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

在这里插入图片描述

欧耶！！！我学会啦！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

网络安全攻防实战：从基础防护到高级对抗

网络安全攻防实战：从基础防护到高级对抗

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 引言 在信息化时代&#xff0c;网络安全已经成为企业、政府和个人必须重视的问题。从数据泄露到勒索软件攻击&#xff0c;每一次…
阅读更多...
PETSc源码分析: Optimization Solvers

PETSc源码分析: Optimization Solvers

本文结合PETSc源代码&#xff0c;分析PETSc中的优化求解器。 注1&#xff1a;限于研究水平&#xff0c;分析难免不当&#xff0c;欢迎批评指正。 注2&#xff1a;文章内容会不定期更新。 参考文献 Balay S. PETSc/TAO Users Manual, Revision 3.22. Argonne National Labora…
阅读更多...
单细胞-第四节 多样本数据分析,下游画图

单细胞-第四节 多样本数据分析,下游画图

文件在单细胞\5_GC_py\1_single_cell\2_plots.Rmd 1.细胞数量条形图 rm(list ls()) library(Seurat) load("seu.obj.Rdata")dat as.data.frame(table(Idents(seu.obj))) dat$label paste(dat$Var1,dat$Freq,sep ":") head(dat) library(ggplot2) lib…
阅读更多...
基于Arcsoft的人脸识别

基于Arcsoft的人脸识别

目录 一、前言 二、使用方法 三、获取SDK 四、人脸检测/人脸识别 五、代码实现 一、前言 face++,百度ai,虹软,face_recognition，其中除了face_recognition是python免费的一个库安装好响应的库直接运行就好，另外三个需要填入相关申请的信息id和key。 分别对应着相应的人…
阅读更多...
计算机网络之链路层

计算机网络之链路层

本文章目录结构出自于《王道计算机考研 计算机网络_哔哩哔哩_bilibili》 02 数据链路层 在网上看到其他人做了详细的笔记&#xff0c;就不再多余写了&#xff0c;直接参考着学习吧。 1 详解数据链路层-数据链路层的功能【王道计算机网络笔记】_wx63088f6683f8f的技术博客_51C…
阅读更多...
Python数据分析-数据加载与存储（六）

Python数据分析-数据加载与存储（六）

title: ‘Python数据分析:数据加载与存储&#xff08;六&#xff09;’ tags: python数据分析 categories:python数据分析 keywords:python数据分析 cover: …/img/404_icecream_whale.png description: 本文讲述了使用pandas加载和存储数据的操作&#xff0c;和一些文件的格式…
阅读更多...
计算机网络 IP 网络层 2 （重置版）

计算机网络 IP 网络层 2 （重置版）

IP的简介&#xff1a; IP 地址是互联网协议地址&#xff08;Internet Protocol Address&#xff09;的简称&#xff0c;是分配给连接到互联网的设备的唯一标识符&#xff0c;用于在网络中定位和通信。 IP编制的历史阶段&#xff1a; 1&#xff0c;分类的IP地址&#xff1a; …
阅读更多...
大数据相关职位介绍之二（数据治理，数据库管理员， 数据资产管理师，数据质量专员）

大数据相关职位介绍之二（数据治理，数据库管理员， 数据资产管理师，数据质量专员）

大数据相关职位介绍之二&#xff08;数据治理&#xff0c;数据库管理员&#xff0c; 数据资产管理师&#xff0c;数据质量专员&#xff09; 文章目录 大数据相关职位介绍之二&#xff08;数据治理&#xff0c;数据库管理员&#xff0c; 数据资产管理师&#xff0c;数据质量专员…
阅读更多...
编译dpdk19.08.2中example时一系列报错解决

编译dpdk19.08.2中example时一系列报错解决

dpdk19.08编译过程全解 dpdk 介绍问题描述编译过程执行Step 1报错一解决方式 报错二解决方式 继续执行Step 248的时候报错 49没有修改成功输入60退出 使用过程执行make报错一解决方式 继续make报错二解决方式 继续make执行生成文件helloworld报错三解决方式 执行make 完成参考链…
阅读更多...
最优化问题 - 内点法

最优化问题 - 内点法

以下是一种循序推理的方式&#xff0c;来帮助你从基础概念出发&#xff0c;理解 内点法&#xff08;Interior-Point Method, IPM&#xff09; 是什么、为什么要用它&#xff0c;以及它是如何工作的。 1. 问题起点&#xff1a;带不等式约束的优化 假设你有一个带不等式约束的优…
阅读更多...
Linux下Ubuntun系统报错find_package(BLAS REQUIRED)找不到

Linux下Ubuntun系统报错find_package(BLAS REQUIRED)找不到

Linux下Ubuntun系统报错find_package(BLAS REQUIRED)找不到 这次在windows的WSL2中遇到了一个非常奇怪的错误&#xff0c;就是 CMake Error at /usr/share/cmake-3.22/Modules/FindPackageHandleStandardArgs.cmake:230 (message):Could NOT find BLAS (missing: BLAS_LIBRAR…
阅读更多...
Ubuntu Server 安装 XFCE4桌面

Ubuntu Server 安装 XFCE4桌面

Ubuntu Server没有桌面环境&#xff0c;一些软件有桌面环境使用起来才更加方便&#xff0c;所以我尝试安装桌面环境。常用的桌面环境有&#xff1a;GNOME、KDE Plasma、XFCE4等。这里我选择安装XFCE4桌面环境&#xff0c;主要因为它是一个极轻量级的桌面环境&#xff0c;适合内…
阅读更多...
芯片AI深度实战：实战篇之vim chat

芯片AI深度实战：实战篇之vim chat

利用vim-ollama这个vim插件&#xff0c;可以在vim内和本地大模型聊天。 系列文章&#xff1a; 芯片AI深度实战&#xff1a;基础篇之Ollama-CSDN博客 芯片AI深度实战&#xff1a;基础篇之langchain-CSDN博客 芯片AI深度实战&#xff1a;实战篇之vim chat-CSDN博客 芯片AI深度…
阅读更多...
线程概念、操作

线程概念、操作

一、背景知识 1、地址空间进一步理解 在父子进程对同一变量进行修改时发生写时拷贝&#xff0c;这时候拷贝的基本单位是4KB&#xff0c;会将该变量所在的页框全拷贝一份&#xff0c;这是因为修改该变量很有可能会修改其周围的变量&#xff08;局部性原理&#xff09;&#xf…
阅读更多...
设置jmeter外观颜色

设置jmeter外观颜色

设置jmeter外观颜色 方法&#xff1a; 步骤一、点击顶部选项 ->外观&#xff0c;这里提供了不同的主题&#xff0c;可选自己喜欢的风格。 步骤二、选择后&#xff0c;弹框提示点击Yes。
阅读更多...
2021 年 6 月大学英语四级考试真题（第 1 套）——纯享题目版

2021 年 6 月大学英语四级考试真题（第 1 套）——纯享题目版

&#x1f3e0;个人主页&#xff1a;fo安方的博客✨ &#x1f482;个人简历&#xff1a;大家好&#xff0c;我是fo安方&#xff0c;目前中南大学MBA在读&#xff0c;也考取过HCIE Cloud Computing、CCIE Security、PMP、CISP、RHCE、CCNP RS、PEST 3等证书。&#x1f433; &…
阅读更多...
[论文总结] 深度学习在农业领域应用论文笔记14

[论文总结] 深度学习在农业领域应用论文笔记14

当下&#xff0c;深度学习在农业领域的研究热度持续攀升&#xff0c;相关论文发表量呈现出迅猛增长的态势。但繁荣背后&#xff0c;质量却不尽人意。相当一部分论文内容空洞无物&#xff0c;缺乏能够落地转化的实际价值&#xff0c;“凑数” 的痕迹十分明显。在农业信息化领域的…
阅读更多...
LangGraph系列-1：用LangGraph构建简单聊天机器人

LangGraph系列-1：用LangGraph构建简单聊天机器人

在快速发展的人工智能和大型语言模型&#xff08;llm&#xff09;世界中&#xff0c;开发人员不断寻求创建更灵活、更强大、更直观的人工智能代理的方法。 虽然LangChain已经改变了这个领域的游戏规则&#xff0c;允许创建复杂的链和代理&#xff0c;但对代理运行时的更复杂控制…
阅读更多...
【hot100】刷题记录(7)-除自身数组以外的乘积

【hot100】刷题记录(7)-除自身数组以外的乘积

题目描述&#xff1a; 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#x…
阅读更多...
OpenCV边沿检测(Python版)

OpenCV边沿检测(Python版)

边缘检测是图像处理中的一项重要任务&#xff0c;用于找到图像中的边界或边缘。它在计算机视觉、图像处理和模式识别等领域中具有广泛的应用。 边缘可以被定义为图像亮度、颜色或纹理的突变区域。边缘检测算法旨在识别这些变化并将其标记为边缘。边缘检测可以用于分割图像、检测…
阅读更多...
最新文章

Copyright @ 2022~2023