首页 > 其他分享 >什么是CSS?

什么是CSS?

时间:2023-02-26 21:00:45浏览次数:43  
标签:十六进制 样式 什么 笔记 content my CSS

原文链接:​  ​​https://note.noxussj.top/?source=51cto​

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets),理解为 CSS 样式就可以了。CSS 样式有什么作用呢?比如我们在页面中添加了一个 div ,我想给这个 div 设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过 CSS 样式来实现。也就是丰富 HTML 标签的样式。

现实生活举例,body 里面的所有标签就像是不同的一个人,每个人的特征都不同。style 里面定义的每一个 .xxx 样式,就代表买了一件衣服。这个衣服你可以给任何一个人穿,也就是可以给任何一个标签使用。这个标签穿了衣服就会变得更好看。一个人可以穿多件衣服,也可以多个人穿同一件衣服。

CSS 结构

<html>
<head>
<title>我是网站标题</title>
<style>
.my-content {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div class="my-content">我是一个人,我穿了一件红色衣服(my-content)</div>
</body>
</html>

​在演练场中尝试一下​

CSS 语法

语法规则:选择器 + 类名 + 样式体​​#​

例如:​​.my-content {}​

解析:​​.​​​ 代表类选择器、 ​​my-content​​​ 代表类名、​​{}​​ 样式写在里面

颜色模式

CSS 中定义颜色使用十六进制( hex )表示法为红,绿,蓝的颜色值结合。可以是最低值是 0 ( 十六进制 00 )到最高值是 255 ( 十六进制 FF )。

模式名称

写法

简写


十六进制 HEX

#aabbcc

#abc

RGB

rgb(170, 187, 204)

RGBA

rgba(170, 187, 204, 0.5)

最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读,深色和浅色模式。

原文链接:​ ​ ​​https://note.noxussj.top/?source=51cto​


标签:十六进制,样式,什么,笔记,content,my,CSS
From: https://blog.51cto.com/u_12639291/6086968

相关文章

  • Vue | css如何使用js中的变量
    如在Vue中,我们可以绑定在style上面变量,然后使用css来使用该变量,如下:<divclass="layersBoxunselect"v-move:style="`--color:${theme}`">.layersBox{color:var......
  • iPhone 15 Pro Max 配置外观什么样
    iPhone15ProMax的外观和配置是什么样的呢,今天为大家揭晓苹果官方于今年九月份即将上市的全新iPhone15ProMax高清4K手机照片和配置详情信息。说到这里天天还是有些......
  • 为什么要有base64
    Base64编码是从二进制值到某些特定字符的编码,这些特定字符一共64个,所以称作Base64。为什么不直接传输二进制呢?比如图片,或者字符,既然实际传输时它们都是二进制字节流。而且......
  • RJ45是什么
    RJ45是布线系统中信息插座(即通信引出端)连接器的一种,连接器由插头(接头、水晶头)和插座(模块)组成,插头有8个凹槽和8个触点。RJ是RegisteredJack的缩写,意思是“注册的插座”。......
  • Binary &Op是什么
    前言在并行开发时我们经常会用到Pstream::gather()函数或是全局函数reduce()或者其他,需要输入参数Binary&Op,本篇主要讨论Binary&Op是什么template<classT,classBina......
  • DevOps是什么?DevOps能够给我们带来什么?
    一、DevOps是什么?DevOps是Development和Operations的组合词。它是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟......
  • java中使用 MultipartFile 进行文件上传而且指定了上传的临时路径,但是文件上传成功后,
    来自AIBOT回复:这是因为文件可能正在被应用程序使用,即文件已经被Java程序锁定,使得系统无法对其进行修改或删除。为了解决这个问题,你需要在保存完文件之后把它移动到正确......
  • css动画效果
    缓动动画小球下落效果@keyframesbounce{60%,80%,100%{transform:translateY(80px);animation-timing-function:cubic-bezier(.215,.61,.355,......
  • css视觉效果
    单侧投影box-shadow:x方向偏移y方向偏移模糊半径扩张半径颜色内投影/外投影单侧投影box-shadow:05px4px-4pxblack;//扩张半径=-模糊半径邻边投影b......
  • css形状
    自适应的椭圆椭圆border-radius:50%;二分之一椭圆border-radius:100%00100%/50%;四分之一椭圆border-radius:100%000;关于border-radius的解释,语法......