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.rhkb.cn/news/244685.html

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

相关文章

vulnhub靶机bluemoon

vulnhub靶机bluemoon

下载地址&#xff1a;https: //download.vulnhub.com/bluemoon/bluemoon.ova 主机发现 目标169 端口扫描 服务扫描 看一下web 扫描一下web 看一下 thank you是一个链接 二维码 连接ssh的脚本 两个文件看一下 说白了就是给了我们一个字典 九头蛇 搞定登入 前面看到是docker就用…
阅读更多...
接口测试 03 -- 接口自动化思维 Requests库应用

接口测试 03 -- 接口自动化思维 Requests库应用

1. 接口自动化思维梳理 1.1接口自动化的优点 接口测试自动化&#xff0c;简单来讲就是功能测试用例脚本化然后执行脚本&#xff0c;产生一份可视化测试报告。不管什么样的测试方式&#xff0c;都是为了验证功能与发现 BUG。那为什么要做接口测试自动化呢&#xff1f;一句话概括…
阅读更多...
Xcode 15 libarclite 缺失问题

Xcode 15 libarclite 缺失问题

升级到Xcode 15运行项目报错&#xff0c;报错信息如下&#xff1a; SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.a; try increasing the minimum d…
阅读更多...
web安全学习笔记【05】——反弹Shell、正反向连接

web安全学习笔记【05】——反弹Shell、正反向连接

思维导图 #知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&am…
阅读更多...
分布式定时任务系列8：XXL-job源码分析之远程调用

分布式定时任务系列8：XXL-job源码分析之远程调用

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 分布式定时任务系列5&#xff1a;XXL-job中blockingQueue的应用 …
阅读更多...
鸿蒙开发案例002

鸿蒙开发案例002

1、目标需求 界面有增大字体按钮&#xff0c;每次点击增大字体按钮&#xff0c;“Hello ArkTS”都会变大 2、源代码 Entry Component struct Page {textValue: string Hello ArkTSState textSize: number 50myClick():void{this.textSize 4}build() {Row() {Column() {//…
阅读更多...
【Linux】常见指令（二）

【Linux】常见指令（二）

前言 常见指令第二部分。 文章目录 一、指令&#xff08;下&#xff09;重定向>&#xff1a;输出重定向>>&#xff1a;追加输出<&#xff1a;输入重定向 10. more—显示文本文件内容11.less—逐屏浏览文本文件内容12. head13. tail管道 |14. date—时间指令在这里插…
阅读更多...
基于Java SSM框架实现在线学习系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现在线学习系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现在线学习系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个在线学习系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述在线学…
阅读更多...
redisson的延时队列机制简述

redisson的延时队列机制简述

概述 业务中经常会遇到一些延迟执行的需求&#xff1b;通常想到的都是rabbitmq或者rocketmq的延迟消息&#xff1b; 但是系统中不一定集成了mq&#xff0c;但为了控制分布式下的并发&#xff0c;一般redis都是有集成的&#xff1b; redis的key过期监听那个时间不准确&#xff…
阅读更多...
表白墙网站PHP源码，支持封装成APP

表白墙网站PHP源码，支持封装成APP

源码介绍 PHP表白墙网站源码&#xff0c;适用于校园内或校区间使用&#xff0c;同时支持封装成APP。告别使用QQ空间的表白墙。 简单安装&#xff0c;只需PHP版本5.6以上即可。 通过上传程序进行安装&#xff0c;并设置账号密码&#xff0c;登录后台后切换模板&#xff0c;适配…
阅读更多...
rust使用protobuf

rust使用protobuf

前言 c,java,go 等直接是用 &#xff0c;具体就不说了&#xff0c;这章主要讲述rust 使用protobuf 这章主要讲述2种 1 > protoc protoc-gen-rust plugin 2> protoc prost-build 1&#xff1a;环境 win10 rustrover64 25-2 下载地址 https://github.com/protocolbu…
阅读更多...
构建中国人自己的私人GPT—与文档对话

构建中国人自己的私人GPT—与文档对话

先看效果 他可以从上传的文件中提取内容作为答案。上传文件摄取速度 摄取速度取决于您正在摄取的文档数量以及每个文档的大小。为了加快摄取速度&#xff0c;您可以在配置中更改摄取模式。 存在以下摄取模式&#xff1a; simple&#xff1a;历史行为&#xff0c;一次按顺序摄…
阅读更多...
MySQL建表练习

MySQL建表练习

练习题目&#xff1a;通过所提供的E-R图和数据库模型图完成库表的创建&#xff0c;并插入适量的数据.要求必须使用SQL命令进行构建。 已知如下&#xff1a; 1、创建客户信息表&#xff1a; 代码&#xff1a; CREATE DATABASE Bank; //建库CREATE TABLE Userinfo(Cust…
阅读更多...
2024.1.23 GNSS 零散知识 学习笔记

2024.1.23 GNSS 零散知识 学习笔记

1.天线种类 2.接收机 2.四大导航系统的介绍 3.卫星高度与轨道卫星种类 4.GNSS有哪些应用 5.在空间保持静⽌或匀速直线运动(⽆加速度)的坐标系称为惯性坐标系。 6.地⼼惯性坐标系实际上并没有满⾜能成为惯性坐标系的条件&#xff1a; ⾸先&#xff0c;地球及其质⼼都在围绕太阳…
阅读更多...
K8S四层代理Service-02

K8S四层代理Service-02

Service的四种类型使用 ClusterIP使用示例Pod里使用service的服务名访问应用 NodePort使用示例 ExternalName使用示例 LoadBalancer K8S支持以下4种Service类型&#xff1a;ClusterIP、NodePort、ExternalName、LoadBalancer 以下是使用4种类型进行Service创建&#xff0c;应对…
阅读更多...
MySQL45道练习题

MySQL45道练习题

作业需要数据表SQL语句已给 1. 查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数 select * from Student RIGHT JOIN (select t1.SId, class1, class2 from(select SId, score as class1 from sc where sc.CId 01)as t1, (select SId, score as …
阅读更多...
从开发、部署到维护：SAAS与源代码小程序的全流程对比

从开发、部署到维护：SAAS与源代码小程序的全流程对比

在数字化时代&#xff0c;小程序已成为企业开展业务的重要工具。然而&#xff0c;小程序开发过程中存在多种形式&#xff0c;其中SAAS版本小程序和源代码小程序是最常见的两种。乔拓云SaaS系统作为业界领先的SaaS服务平台&#xff0c;为企业提供高效、便捷的小程序解决方案。与…
阅读更多...
01、领域驱动设计：微服务设计为什么要选择DDD总结

01、领域驱动设计：微服务设计为什么要选择DDD总结

目录 1、前言 2、软件架构模式的演进 3、微服务设计和拆分的困境 4、为什么 DDD适合微服务 5、DDD与微服务的关系 6、总结 1、前言 我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;不同的人会根据自己对微服务的理 解而拆分出不同的微服…
阅读更多...
springboot119基于工程教育认证的计算机课程管理平台

springboot119基于工程教育认证的计算机课程管理平台

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于工程教育认证的计算机课程管理平台 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图…
阅读更多...
线程的同步和互斥学习笔记

线程的同步和互斥学习笔记

目录 互斥锁的概念和使用 线程通信-互斥 互斥锁的创建和销毁 申请锁-pthread_mutex_lock 释放锁-pthread_mutex_unlock 读写锁的概念和使用 死锁的避免 互斥锁的概念和使用 线程通信-互斥 临界资源 一次只允许一个任务&#xff08;进程、线程&#xff09;访问的共享资…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发