CSS基本知识总结

目录

一、CSS语法

二、CSS选择器

三、CSS样式表

1.外部样式表

2.内部样式表

3.内联样式

四、CSS背景

1.背景颜色:background-color

2.背景图片:background-image

3.背景大小:background-size

4.背景图片是否重复:background-repeat

5.背景图像起始位置:background-position

6.背景图像是否固定:background-attachment

7.背景图像相对于什么定位:background-origin

8.背景绘制区域:background-clip

五、CSS文本格式

六、CSS链接

七、CSS盒子模型

1.margin-外边距

2.border-边框

3.padding-内边距

八、CSS定位-Position

九、CSS布局-Overflow

十、代码示例


CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。


一、CSS语法

CSS语法构成:选择器+1条或多条声明。每条声明由一个属性和一个值构成。

p {color:red;text-align:center;
}

二、CSS选择器

CSS选择器包含:id选择器和class选择器。

id选择器以 # 显示。

# demo {color:#0fff;display:flex;}
/*调用时*/
<div id="demo"></div>

class选择器以 . 点号显示。

.img {background-color:#0fff;}
/*调用时*/
<div class="img"></div>

三、CSS样式表

1.外部样式表

通过<link>标签链接到样式表。

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

2.内部样式表

通过<style>标签在文档头部定义。

<head><style>p {margin-left:20px;padding:10px 20px;text-align:center;}</style>
</head>

3.内联样式

<p style="color:AliceBlue;margin:10px 20px">这是一个段落。</p>

四、CSS背景

1.背景颜色:background-color

.image {background-color:transparent  /*透明*/
}

2.背景图片:background-image

通过url设置相对或绝对位置。

.image {background-image:url("相对或绝对位置");
}

3.背景大小:background-size

属性值描述
cover使背景图片始终铺满整个背景区域,但如果图片比背景区域小,会自动拉伸或放大图片,使其铺满整个背景区域。
contain使背景图片在不拉伸的情况下,尽可能地在背景区域中居中显示,同时保留其原始大小。
px直接指定背景图片的大小,可以是固定值、百分比或关键字auto,其中auto表示原始大小。

4.背景图片是否重复:background-repeat

属性值描述
repeat默认值,表示背景图像在水平和垂直方向都重复出现。
repeat-x表示背景图像只在水平方向重复出现,而不在垂直方向上出现 。
repeat-y表示背景图像只在垂直方向上重复出现,而不在水平方向上出现。
no-repeat表示背景图像不重复出现。

5.背景图像起始位置:background-position

(1)属性值为“长度单位”

当background-position取值为长度单位时,要设置水平方向数值(x轴)和垂直方向数值(y轴)。通过px,百分比%来设置。

属性值

描述

x(数值)

设置网页的横向位置

y(数值)

设置网页的纵向位置

(2)属性值为“关键字”

当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,使用关键字。

属性值

描述

top left

左上

top center

靠上居中

top right

右上

left center

靠左居中

center center

正中

right center

靠右居中

bottom left

左下

bottom center

靠下居中

bottom right

右下

6.背景图像是否固定:background-attachment

属性值

描述

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

inherit

规定应该从父元素继承 background-attachment 属性的设置

7.背景图像相对于什么定位:background-origin

属性值描述
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。

8.背景绘制区域:background-clip

属性值描述
border-box默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box背景绘制在衬距方框内(剪切成衬距方框)。
content-box背景绘制在内容方框内(剪切成内容方框)。

五、CSS文本格式

属性值描述
color设置文本颜色
direction设置文本方向
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写 
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

六、CSS链接

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

注意:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

七、CSS盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

1.margin-外边距

margin属性可以有1-4个值:

  • margin:25px 50px 75px 100px;
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

2.border-边框

border-style属性可以有1-4个值:

  • border-style:dotted solid double dashed;
    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;
    • 四面边框是 dotted

3.padding-内边距

padding属性可以有1-4个值:

  padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

八、CSS定位-Position

属性值描述
static默认值,静态定位。
relative相对定位元素的定位是相对其正常位置。
fixed

元素的位置相对于浏览器窗口是固定位置。

absolute绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。
sticky粘性定位,基于用户的滚动位置来定位。

九、CSS布局-Overflow

属性值描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

十、代码示例

下面结合上面学到的知识代码,将会简单编写代码实现:发送新年祝福~

<html><head><meta charset="utf-8"><title>2024新年祝福</title><style type="text/css">.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;}.deng-box2{position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none;}.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none;}.deng-box1 .deng,.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px #fc903d}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00;}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;}.shui-a {			position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px;}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03:border-radius: 50%;}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px;}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center;}.night .deng-box,.night .deng-box1,.night .deng-t {background:transparent !important;}@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg);}50% {-moz-transform: rotate(10deg);}100% {-moz-transform: rotate(-10deg);}}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg);}50% {-webkit-transform: rotate(10deg);}100% {-webkit-transform: rotate(-10deg);}}</style>	<style>h1 {text-align:center;color:#B8860B;font-size:40px;margin:10px;padding:10px;}body {background-image:url('https://img.tukuppt.com/bg_grid/00/13/34/ieRv1gTX6x.jpg!/fh/350'); background-repeat:no-repeat;background-size:cover;}.image-container {display:flex;}img {width:33%;height:25%;margin-right:10px;}</style><style>.fade-in-out {opacity: 0;animation: fade-in-out-animation 3s ease-in-out infinite;}@keyframes fade-in-out-animation {0% {opacity:0;}50% {opacity:1;}100% {opacity:0;}}</style><style>/* 应用动画到目标元素 */.shake {text-align:center;color:#4B0082;font-size:30px;padding:10px;position:relative;-webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));}.shake span{position: relative;display: inline-block;font-size: 30px;text-transform: uppercase;letter-spacing: 2px;/* 执行动画:动画名 时长 加速后减速 无限次播放 */animation: shake 1s ease-in-out infinite;/* 通过var函数调用自定义属性--i,再计算出动画延迟时间 */animation-delay: calc(0.1s * var(--i));}/* 定义动画 */@keyframes shake {0%{transform: translateY(0);}20%{transform: translateY(-20px);}40%,100%{transform: translateY(0);}}</style></head><body><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><br><h1>新年快乐</h1><h1>龙年大吉</h1><br><div class="image-container"><img src="images/yanhua1.gif"><img src="images/2024.jpg" alt="HappyNewYear"><img src="images/yanhua.gif"></div>	<strong><div class="shake"><span style="--i:1;">小</span><span style="--i:2;">哪</span><span style="--i:3;">吒</span><span style="--i:4;">祝</span><span style="--i:5;">各</span><span style="--i:6;">位</span><span style="--i:7;">在</span><span style="--i:8;">新</span><span style="--i:9;">的</span><span style="--i:10;">一</span><span style="--i:11;">年</span><span style="--i:12;">里</span><span style="--i:13;">,</span><span style="--i:14;">心</span><span style="--i:15;">想</span><span style="--i:16;">事</span><span style="--i:17;">成</span><span style="--i:18;">,</span><span style="--i:19;">财</span><span style="--i:20;">运</span><span style="--i:21;">亨</span><span style="--i:22;">通</span><span style="--i:23;">!</span></div></strong></body></html>

具体实现如下:

新年祝福

本文主要分享了CSS的基础知识,通过学习这篇文章,相信大家会对CSS有一个初步认识,下篇将会介绍:CSS3的基础知识,大家尽请期待~

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

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

相关文章

活动回顾丨云原生技术实践营上海站「云原生 AI 大数据」专场(附 PPT)

AI 势不可挡&#xff0c;“智算”赋能未来。2024 年 1 月 5 日&#xff0c;云原生技术实践营「云原生 AI &大数据」专场在上海落幕。活动聚焦容器、可观测、微服务产品技术领域&#xff0c;以云原生 AI 工程化落地为主要方向&#xff0c;希望帮助企业和开发者更快、更高效地…

大数据学习之Flink算子、了解(Transformation)转换算子(基础篇三)

Transformation转换算子&#xff08;基础篇三&#xff09; 目录 Transformation转换算子&#xff08;基础篇三&#xff09; 三、转换算子&#xff08;Transformation&#xff09; 1.基本转换算子 1.1 映射&#xff08;Map&#xff09; 1.2 过滤&#xff08;filter&#xf…

Redis应用(1)缓存(1.2)------Redis三种缓存问题

三者出现的根本原因是&#xff1a;Redis缓存命中率下降&#xff0c;请求直接打到DB上了。 一、 缓存穿透&#xff1a; 1、定义&#xff1a; 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。…

C++PythonC# 三语言OpenCV从零开发(4):视频流读取

文章目录 相关链接视频流读取CCSharpPython 总结 相关链接 C&Python&Csharp in OpenCV 专栏 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程&#xff08;附带课程课件资料课件笔记&#xff09; OpenCV 教程中文文档|OpenCV中文 OpenCV教程中文文档|W3Csc…

深入理解Linux wall命令:一键向所有用户发送消息(附实例详解和注意事项)

Linux wall命令介绍 wall 是一款命令行工具&#xff0c;主要用于在所有已登录用户的终端上显示消息。你可以直接输入消息或者通过文件传入。 Linux wall命令适用的Linux版本 wall命令在大多数Linux发行版&#xff08;如Debian、Ubuntu、Alpine、Arch Linux、Kali Linux、Red…

RabbitMQ 入门到精通

RabbitMQ入门到精通 一、了解RabbitMQ1.基础知识2.多种交换机模型详解 二、服务端搭建1.简单搭建2.信息持久化到容器外部 三、消息生产者和消费者1.消息生产者2.消息消费者3.RabbitTemplate 详解4.RabbitListener详解5.其他注解 四、如何保证消息可靠性1.发送方进行消息发送成功…

print会默认调用__str__方法吗

一、现象描述&#xff1a; 打印Mongodb自己生成的id&#xff1a; print(res[_id]) res[_id]输出&#xff1a; 659faa6670433c2c86986861 ObjectId(‘659faa6670433c2c86986861’) 二、为什么会不一样呢 在 MongoDB 中&#xff0c;_id 字段通常是一个 ObjectId 类型的实例。…

物联网中南向协议、北向协议是什么?南向协议、北向协议的区别

南向协议通常是用于管控其他厂商设备的数据接口&#xff0c;即向下对接的数据接口。 通过该协议&#xff0c;实现对底层设备上报信息的集中监控、统计&#xff0c;此外可让控制器利用南向协议的下行通道&#xff0c;对设备实现控制功能。 北向协议是借助控制模块向上层业务应用…

Go 虚拟环境管理工具 gvm 原理介绍与使用指南

本文谈下我对 Go 版本管理的一些想法。让后&#xff0c;我将介绍一个小工具&#xff0c;gvm。这个话题说起来也很简单&#xff0c;但如果想用的爽&#xff0c;还是要稍微梳理下。 背景介绍 Go 的版本管理&#xff0c;并非包的依赖管理&#xff0c;而且关于如何在不同的 Go 版…

探索未来:2024 年 5 大前沿生成式 AI 趋势

探索未来&#xff1a;2024 年 5 大前沿生成式 AI 趋势 1. 多模态 AI 模型的崛起2. 功能强大且强大的小型语言模型3. 自主代理的崛起4. 开源模型将与专有模型匹敌5. 云原生成为本地 GenAI 的关键总结 2023 年标志着技术发展的一个分水岭&#xff0c;生成式 AI 走入了主流。随着 …

牛客:X图形

描述 KiKi学习了循环&#xff0c;BoBo老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“*”组成的X形图案。 输入描述&#xff1a; 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示输出的行数&#xff0c;也表示组成“X”的反斜线和…

浙政钉-H5小程序应用采集开发手册

浙政钉-H5&小程序应用采集开发手册 埋点代码分为:稳定性监控代码(Emas)和流量分析代码(A+)。稳定性监控代码(Emas)只需要在首页加入。流量分析代码(A+)每个页面都需要加入,但是可以写通用js,在其他页面引入。 适用范围 本文档适用于浙政钉业务web(H5)或小程序应…

GPT只是开始,Autonomous Agents即将到来

生成式AI虽然很早便已经引起了广泛关注&#xff0c;但直到ChatGPT的出现&#xff0c;许多公司的领导层才切身感受到了大语言模型&#xff08;LLM&#xff09;带来的深远影响。面临这种行业变革&#xff0c;诸多企业正争先恐后地加入到这场潮流中&#xff0c;但生成式AI的进步速…

【力扣 445】两数相加 II C++题解(链表+模拟+数学+头插法)

给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数字都不会以零开头。 示例1&#xff1a; 输入&#xff1a;l1 [7,2,4,3], l2 [5,6,4]…

indexedDB的基本操作

indexedDB概述 IndexedDB 就是浏览器提供的本地数据库&#xff0c;它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据&#xff0c;提供查找接口&#xff0c;还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言&#xff0c;IndexedDB 不属于关系型数据库…

算法训练营Day55(子序列--编辑距离)

392.判断子序列 392. 判断子序列 - 力扣&#xff08;LeetCode&#xff09; 这道题目算是 编辑距离问题 的入门题目&#xff08;毕竟这里只是涉及到减法&#xff09;&#xff0c;慢慢的&#xff0c;后面就要来解决真正的编辑距离问题了 和最长公共子序列相似 他那道题区别就是e…

期待已久!阿里云容器服务 ACK AI 助手正式上线

作者&#xff1a;行疾 大模型技术的蓬勃发展持续引领 AI 出圈潮流&#xff0c;各行各业都在尝试采用 AI 工具实现智能增效。 2023 年云栖大会上&#xff0c;阿里云容器服务团队正式发布 ACK AI 助手&#xff0c;带来大模型增强智能诊断&#xff0c;帮助企业和开发者降低 K8s …

Spark运行架构以及容错机制

Spark运行架构以及容错机制 1. Spark的角色区分1.1 Driver1.2 Excuter 2. Spark-Cluster模式的任务提交流程2.1 Spark On Yarn的任务提交流程2.1.1 yarn相关概念2.1.2 任务提交流程 2.2 Spark On K8S的任务提交流程2.2.1 k8s相关概念2.2.2 任务提交流程 3. Spark-Cluster模式的…

BACnet网关BA100实现Modbus转BACnet,专为Modbus协议设备与BA系统的高效对接设计

随着物联网技术的迅猛发展&#xff0c;人们深刻认识到在智能化生产和生活中&#xff0c;实时、可靠、安全的数据传输至关重要。在此背景下&#xff0c;高性能的物联网数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于工业自动化和数字化工厂应用环境中。 钡铼…

搜维尔科技:【简报】元宇宙数字人赛道,《莉思菱娜》

个性有些古灵精怪时儿安静时而吵闹&#xff0c;虽然以人类寿命来算已经200多岁但在 吸血鬼中还只是个小毛头&#xff0c;从中学开始喜欢打扮偏爱黑白灰色系的服装喜欢时 尚圈&#xff0c;立志想成为美妆或时尚网红不过目前还是学生&#xff0c;脸上的浅色血迹是纹身 贴纸&#…