【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望

目录

一.导入方式

1.行内样式

2.内部样式

3.外部样式(常用)

二.选择器

1.基本选择器(常用)

1.1标签选择器

1.2类选择器

1.3id选择器

2.层次选择器

2.1后代选择器

2.2子选择器

2.3相邻兄弟选择器

2.4通用兄弟选择器

3.结构伪类选择器

4.属性选择器

三..美化网页

1.字体样式font

2.文本样式text

3.超链接伪类

4.列表样式

5.背景background

四.盒子模型

1.边距参数顺序

2.边框border

2.1圆角边框

五.浮动

1.display

2.float

3.黑框塌陷问题

3.1 overflow

4.display和float对比

六.定位position

1.相对定位relative

2.绝对定位absolute

3.固定定位fixed

4.图层z-index


一.导入方式

1.行内样式

在标签元素中,编写一个style属性,编写样式即可

<h1 style = "color : red">我是标题</h1>
2.内部样式

在html的style标签内书写

<style>h1{color: red;}
</style>
3.外部样式(常用)

在html内使用link标签导入外部css文件,在外部书写css代码

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

二.选择器

1.基本选择器(常用)

1.1标签选择器
<h1 class = 'class' id = 'id'>我是标题</h1>
h1{color: red;
}
1.2类选择器
.class{color: blue;
}
1.3id选择器
#id{color: black;
}

优先级

id选择器>类选择器>标签选择器(上面的h1标签显示为黑色)

2.层次选择器
2.1后代选择器

body后面的所有p标签

2.2子选择器

body后面的第一代标签

2.3相邻兄弟选择器

下面的一个兄弟+

2.4通用兄弟选择器

下面的所有兄弟~

3.结构伪类选择器

4.属性选择器

格式

标签[]{}
a[id]{}
/*a标签中存在id属性的元素*/
a[id = links]{}
/*a标签中id是links的元素*/
a[id *= links]{}
/*a标签中id包含links的元素*/
a[id ^= links]{}
/*a标签中id以links开头的元素*/
a[id $= links]{}
/*a标签中id以links结尾的元素*/

类似于正则表达式

三..美化网页

1.字体样式font

2.文本样式text

a{color: rgba(0,255,255,0.9);/*0.9是透明度*/text-align: center;/*文字左右居中*/text-indent: 2em;/*首行缩进2格*/height: 300px;line-height: 300px;/*字体高度和整体高度一直,就会上下居中*/text-decoration: none;/*取消下划线*/
}

图片和文本对齐

<p><img src="../resources/image/1.jpg" alt=""><span>我是奶龙</span>
</p>
img,span{vertical-align: middle;
}

显示效果

3.超链接伪类

鼠标悬停执行

a:hover{color: red;
}
4.列表样式
ul li{list-style: none;/*去掉圆点*/list-style: circle;/*空心圆*/list-style: decimal;/*有序数字*/list-style: square;/*正方形*/
}
5.背景background

添加背景默认为全部平铺

a{background: red url("resources/image/1.jpg") 270px 10px no-repeat;
}

颜色,图片地址,图片位置,平铺方式no-repeat就是不平铺,如下图

直接设置背景颜色

a{background: red;
}

                           

四.盒子模型

在网页中,每个元素都是一个盒子模型,网页会有默认的边距大小,所以一般需要初始化边距为0

h1,ul,li,a,body{margin: 0;/*外边框设置为0*/padding: 0;/*内边框设置为0*/text-decoration: none;/*消除下划线*/
}

1.边距参数顺序

每个盒子是一个矩形,他有四个边,所以设置内外边距的时候会有四个参数

margin: 10px 10px 10px 10px;

如果传入四个参数是上左下右(顺时针旋转)
传入两个参数是上下左右
传入一个参数就是全部

自动设置边距使元素居中auto

margin: 0 auto;
2.边框border

border : 3px solid red;   (solid是实线,dashed是虚线)

2.1圆角边框

圆形 = 宽度的一半

五.浮动

在一个网页中,每个元素会出现在不同的位置,我们要对这些元素进行布局,就需要用到浮动

这些元素有默认的布局方式,我们要改变他们来手动布局

1.display

这里我们需要引入一个抽象概念,我们可以叫他黑框

我们在写html代码的时候,会写很多div,把一些元素放到div中,这个div就是一个边界,使用display改变元素属性的时候,不会使他离开这个"黑框div"

display : block;(块元素)
display : inline;(行内元素)
display : inline-block;(既是行内元素也是块元素),是块元素但是可以在一行

行内元素不能设定height和width,必须要变成块元素才可以设定

导航栏就是ul li标签变成行内元素

2.float

浮动就是把这个块元素单独飘起来,会飘出黑框外

float : left; 左浮
float : right; 右浮

浮动会导致元素挤在一起,所以我们需要清除浮动clear both;

既有浮动效果,也要有块元素效果(就让他排下去,不要挤在一起),就要清除浮动

3.黑框塌陷问题

我们知道,浮动会飘出黑框外,我们不想出现这种情况就要解决黑框塌陷问题

推荐使用第四种方法

3.1 overflow

overflow : scroll 规定文本或图片超过了高度,加滚动条(没人会用这个)

overflow : hidden 规定文本或图片超过了高度,会隐藏(知道这个就行)

4.display和float对比

六.定位position

我们对一个网页中的元素进行布局的时候,还需要设置他们具体的位置,所以就要用到定位

1.相对定位relative

相对于自己原来的位置偏移,仍然在黑框中,没有塌陷,原来的位置会被保留
position : relative

top : -20px;  (距离上面-20px,就是上移)
left : 20px;    (距离左边20px,就是右移)
bottom : -10px(距离下面-10px,就是下移)
right : 20px(距离右边20px,就是左移)

2.绝对定位absolute

一般都是相对于父元素定位

给父级元素加上相对定位,就会相对于父级元素定位

不给父元素加相对定位就会相对于浏览器定位,滚动滑轮位置会变(初始浏览器大小)

给父元素加上相对定位relative

自身相对于父元素左移30px

3.固定定位fixed

这里设置第一个div元素相对于浏览器位于初始的右下角,但是滚动滑轮位置会变
设置第二个div元素固定定位在浏览器右下角,滚动滑轮位置不会变

4.图层z-index

我们需要把一些块元素堆叠的时候,就需要使用z-index来决定谁在上谁在下

练习

HTML代码

CSS代码


opacity透明度

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

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

相关文章

linux 获取公网流量 tcpdump + python + C++

前言 需求为&#xff0c;统计linux上得上下行公网流量&#xff0c;常规得命令如iftop 、sar、ifstat、nload等只能获取流量得大小&#xff0c;不能区分公私网&#xff0c;所以需要通过抓取网络包并排除私网段才能拿到公网流量。下面提供了一些有效得解决思路&#xff0c;提供了…

Rain后台权限管理系统,快速开发

这段时间一直没有更新&#xff0c;因为在写一个脚手架&#xff0c;今天Rain项目终于完工&#xff0c;已经发布到github,免费使用 项目github链接 https://github.com/Rain-hechang/Rain 简介 前端采用Vue3.x、Element UI。 后端采用Spring Boot、Spring Security、Redis &…

scroll-view组件,在iOS设备上禁用橡皮筋回弹效果

问题描述 在实现uniapp微信小程序的一个项目时&#xff0c;ios真机测试&#xff0c;scroll-view组件可以向下拉动一段距离然后又回弹。 如下图 解决方法&#xff1a; 可以通过设置scroll-view组件的属性来禁用橡皮筋回弹效果。如下&#xff0c;设置enhanced"true&…

【AI系统】昇腾异构计算架构 CANN

昇腾异构计算架构 CANN 本文将介绍昇腾 AI 异构计算架构 CANN&#xff08;Compute Architecture for Neural Networks&#xff09;&#xff0c;这是一套为高性能神经网络计算需求专门设计和优化的架构。CANN 包括硬件层面的达芬奇架构和软件层面的全栈支持&#xff0c;旨在提供…

7-17 列出连通集

给定一个有 n 个顶点和 m 条边的无向图&#xff0c;请用深度优先遍历&#xff08;DFS&#xff09;和广度优先遍历&#xff08;BFS&#xff09;分别列出其所有的连通集。假设顶点从 0 到 n−1 编号。进行搜索时&#xff0c;假设我们总是从编号最小的顶点出发&#xff0c;按编号递…

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(二)

文章目录 前言使用docker run总结前言 我们在上一篇文章华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(一)中,介绍了一些准备工作。 我估计这些东西下载好还是需要一点时间的,如果你幸运地通过了这些考验,还想继续的话,就来看看这一篇…

在macOS上从源码部署RAGFlow-0.14.1

一、macOS配置 1. macOS配置 我使用MacBook Pro&#xff0c;chip 是 Apple M3 Pro&#xff0c;Memory是18GB&#xff0c;macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1&#xff0c;我的版本如下&#x…

大数据量接口的异步处理方案详解

在现代分布式系统中&#xff0c;处理大数据量的接口是一个常见但复杂的场景。同步操作容易导致接口响应时间过长甚至超时&#xff0c;因此采用异步处理成为主流选择。本文将详细分析大数据量接口异步处理的常见方案&#xff0c;并结合实际应用场景进行优缺点对比。 1. 背景与挑…

csv文件的上传、解析和获得最后的数据

前端和node端解析、读取csv文件的区别 1、前端 运行环境为浏览器&#xff0c;受到浏览器安全策略的限制&#xff0c;例如跨域请求、文件访问权限等。对于大型CSV文件的处理可能会受到性能瓶颈的影响。前端运行在用户的浏览器中&#xff0c;受到浏览器安全策略的限制&#xff…

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制。以下是详细的步骤&#xff1a; 1. 使用 root 用户登录 确保你以 root 用户登录到 MySQL 服务器。 mysql -u root -p输入你的 root 密码后进入 MySQL 命令行界面。 2. 配置主服务器 (master) 2.1 编辑 my.…

Git忽略除了指定文件以外的所有文件

前言&#xff1a;最近发现vs很多杂七杂八的文件都被传到gitee上了&#xff0c;但是我本意只是想把一些主要的文件如 .cpp文件传到gitee&#xff0c;因此考虑到了.gitignore文件的使用。 .gitignore文件的作用 .gitignore是一个特殊的文件&#xff0c;用于告诉Git哪些文件或目录…

Python学习------第十五天

1.异常的捕获方式&#xff1a; #基本捕获语法 try:f open("D:/abc.txt","r",encoding"UTF-8") except:print("出现异常了&#xff0c;因为文件不存在&#xff0c;我将open模式改为w模式去打开")f open("D:/abc.txt", &quo…

Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”

这两种主题继承关系有明显的不同&#xff0c;具体区别如下&#xff1a; Theme.AppCompat vs android:Theme.Material.Light.NoActionBar Theme.AppCompat 是 AppCompat 支持库提供的主题&#xff0c;目的是提供向后兼容的支持&#xff0c;适用于较早版本的 Android&#xff08…

什么是java方法

在Java编程语言中&#xff0c;方法&#xff08;Method&#xff09;是类&#xff08;Class&#xff09;中的一个函数&#xff0c;用于执行特定的任务或计算。方法封装了一段代码&#xff0c;使其可以重复调用&#xff0c;从而提高代码的可读性和可维护性。方法的基本结构包括方法…

THENA大涨将对整个DeFi市场产生怎样的影响?

引言 近期&#xff0c;区块链行业的一个热门项目——THENA&#xff08;THE&#xff09;代币&#xff0c;在短时间内吸引了大量投资者的目光。THE代币的价格在短短几个月内经历了显著的上涨&#xff0c;引发了市场对其背后机制的浓厚兴趣。而在THENA生态系统的成功背后&#xf…

Kubernetes命名空间详解

目录 目标 版本 官网 概述 namespace&#xff08;命名空间、名称空间&#xff09; 注意事项 基本命令 查看namespace列表 查看所有Pod的namespace 查看单个Pod的namespace 查看同一个namespace下的所有Pod 查看单个namespace资源配额 查看单个Pod详情 查看所有na…

【开源】A059-基于SpringBoot的社区养老服务系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…

MySQL(三)

1、内置函数 1.1、日期函数 current_date()当前的日期current_time()当前的时间current_timestamp()当前的时间戳,即日期+时间date(datetime)返回参数中的日期部分date_add(date ,interval x date_type)在date的基础上增加x时间,date_type的单位可以是year、minute、second、…

C#加速Bitmap存图

如果希望大幅提高图像保存速度&#xff0c;特别是在处理非常大的图像时&#xff0c;可以尝试以下更直接、更高效的方法&#xff1a; 1. 避免使用 Bitmap 类的 Save 方法 Bitmap.Save 方法的速度受限于 GDI 库的操作&#xff0c;尤其是对于非常大的图像&#xff0c;它可能会经历…

【AI系统】算子开发编程语言 Ascend C

算子开发编程语言 Ascend C 本节将深入探讨昇腾算子开发编程语言 Ascend C&#xff0c;这是一种专为昇腾 AI 处理器算子开发设计的编程语言&#xff0c;它原生支持 C 和 C标准规范&#xff0c;最大化匹配用户的开发习惯。Ascend C 通过多层接口抽象、自动并行计算、孪生调试等…