当前位置： 首页 > news >正文

CSS概念

news 文章来源：https://blog.csdn.net/kelouze06/article/details/132433767 2025/2/2 11:51:31

1、CSS与HTML结合方式

        1.1 第一种方式 内联/行内样式

        就是在我们的HTML标签上通过style属性来引用CSS代码。

优点:简单方便 ；
缺点:只能对一个标签进行修饰。

 1.2 第二种方式 内部样式

我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置
优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰
语法： 选择器 {属性:值;属性:值}

 

 1.3 第三种方式 外部样式

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在<head>中使用<link>标签引用外部的css文件

 

还可以使用另一种引入css文件的方式：

<style> @import 'css/.css' 
</style>

 

关于外部导入css使用<link>与@import的区别? 
1. 加载顺序不同
    @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
    如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

2、CSS的使用 

2.1CSS中的选择器

2.1.1 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称

2.1.2 类选择器 

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

2.1.3 id选择器 

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

 2.1.4 选择器组

 2.1.5 派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

2.1.6 CSS伪类

 CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：

  • :active 向被激活的元素添加样式。
  • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
  • :link 向未被访问的链接添加样式。
  • :visited 向已被访问的链接添加样式。
  • :first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */ 
a:visited {color: #00FF00} /* 已访问的链接 */ 
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 
a:active {color: #0000FF} /* 选定的链接 */

 

2.2 CSS基本属性

2.2.1 文本属性

  • 指定字体：font-family : value;
  • 字体大小：font-size : value；  （注：px：像素；em：倍数）
  • 字体加粗：font-weight : normal/bold;
  • 文本颜色：color : value;
  • 文本排列：text-align : left/right/center;
  • 文字修饰：text-decoration : none/underline;
  • 行高：line-height : value;
  • 首行文本缩进：text-indent : value （2em）;

2.2.2 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

  • background-color 设置元素的背景颜色。
  • background-image 把图像设置为背景。
  • 	background-image: url('img/1.jpg');
  • background-repeat 设置背景图像的墙纸效果，是否及如何重复
  1. repeat：在垂直方向和水平方向重复，为重复值
  2. repeat-x：仅在水平方向重复
  3. repeat-y：仅在垂直方向重复
  4. no-repeat：仅显示一次
  • background-position 设置背景图像的起始位置
  • 1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动
  • 2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动
	/* 图片向左移动50px，向下移动100px （可以为负值） */background-position:50px 100px;
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
  1. 默认值是 scroll：默认情况下，背景会随文档滚动
  2. 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像
background-attachment: fixed;

2.2.3 列表属性

CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

  • none:无标记。(去除标记)
  • disc:默认。标记是实心圆。
  • circle:标记是空心圆。
  • square:标记是实心方块。
  • decimal:标记是数字。
  • decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。)
  • lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。)
  • upper-roman:大写罗马数字(I, II, III, IV, V, 等。)
  • lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
  • upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

 2.2.4 边框属性(未完待续...)

相关文章：

CSS概念

1、CSS与HTML结合方式 1.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性来引用CSS代码。 优点:简单方便 &#xff1b; 缺点:只能对一个标签进行修饰。 1.2 第二种方式 内部样式 我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在…...

编程日记 2023/8/26 8:45:18

淘宝API技术解析，实现关键词搜索淘宝商品（商品详情接口等）

淘宝提供了开放平台接口&#xff08;API&#xff09;来实现按图搜索淘宝商品的功能。您可以通过以下步骤来实现&#xff1a; 获取开放平台的访问权限&#xff1a;首先&#xff0c;您需要在淘宝开放平台创建一个应用&#xff0c;获取访问淘宝API的权限。具体的申请步骤和要求可以…...

编程日记 2023/8/26 8:44:17

Redis 7 教程 数据类型 基础篇

🌹 引导 Commands | Redishttps://redis.io/commands/Redis命令中心（Redis commands） -- Redis中国用户组（CRUG）Redis命令大全，显示全部已知的redis命令，redis集群相关命令，近期也会翻译过来,Redis命令参考，也可以直接输入命令进行命令检索。...

编程日记 2023/8/26 8:43:16

-bash: tree: command not found 的解决方法

在学习git操作时发现使用命令tree .git时显示错误 在网上查阅资料后&#xff0c;发现可能是没有安装生成tree的应用&#xff0c;所以我们使用命令安装应用即可 sudo yum install -y tree像这样就是安装成功了 我们再来试试 问题解决了&#xff0c;成功显示出树形结构...

编程日记 2023/8/26 8:42:15

SPI总线协议

简述 SPI协议是一种芯片与芯片之间的通讯&#xff0c;全称是Serial Peripheral Interface SPI通讯采用一主多从模式&#xff0c;产生时钟的一侧称为主机&#xff0c;另一侧称为从机。只有一个主机&#xff08;一般来说可以是微控制器/MCU&#xff09;&#xff0c;但是可以有一…...

编程日记 2023/8/26 8:41:13

Ubuntu20.04配置mysql配置主从复制

ubuntu20.04&#xff1a;mysql主库 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf # 修改完毕重启 sudo service mysql stop sudo service mysql start主库mysqld.cnf配置 [mysqld] ... # bind-address>->--- 127.0.0.1 # 注释掉&#xff0c;允许外部连接 # mysqlx-b…...

编程日记 2023/8/26 8:40:12

HTTP 服务器(基于go实现)

编写一个 HTTP 服务器&#xff0c;接收客户端 request&#xff0c;并将 request 中带的 header 写入 response header 解析HTTP请求头 import ("fmt""net/http" )func headers(w http.ResponseWriter, r *http.Request) {// 将request中的信息写入到 w中…...

编程日记 2023/8/26 8:39:11

【整数二分】

数的范围 #include<iostream> using namespace std; const int N 100000 11;int n; int q; int a[N];int key;int main(){cin>>n>>q;for(int i0;i<n;i)cin>>a[i];while(q--){cin>>key;//先去找左&#xff08;大于等于&#xff09;再去找右…...

编程日记 2023/8/26 8:38:10

开发一款AR导览导航小程序多少钱？ar地图微信小程序 ar导航 源码

随着科技的不断发展&#xff0c;增强现实&#xff08;AR&#xff09;技术在不同领域展现出了巨大的潜力。AR导览小程序作为其中的一种应用形式&#xff0c;为用户提供了全新的观赏和学习体验。然而&#xff0c;开发一款高质量的AR导览小程序需要投入大量的时间、人力和技术资源…...

编程日记 2023/8/26 8:37:09

Shell 编程快速入门 之 函数基础知识

目录 shell函数基础知识 函数定义 函数名 函数体 参数 返回值 return返回值的含义 return与echo返回值的区别 可变参数函数 自定义库函数 定义库函数 调用库函数 执行结果 递归函数 阶乘函数 斐波那契函数 shell函数基础知识 函数定义 函数名 Shell函数用…...

编程日记 2023/8/26 8:36:08

Flink流批一体计算（18）：PyFlink DataStream API之计算和Sink

目录 1. 在上节数据流上执行转换操作&#xff0c;或者使用 sink 将数据写入外部系统。 2. File Sink File Sink Format Types Row-encoded Formats Bulk-encoded Formats 桶分配 滚动策略 3. 如何输出结果 Print 集合数据到客户端&#xff0c;execute_and_collect…...

编程日记 2023/8/26 8:35:07

03.sqlite3学习——数据类型

目录 sqlite3学习——数据类型 SQL语句的功能 SQL语法 SQL命令 SQL数据类型 数字类型 整型 浮点型 定点型decimal 浮点型 VS decimal 日期类型 字符串类型 CHAR和VARCHAR BLOB和TEXT SQLite 数据类型 SQLite 存储类 SQLite 亲和类型(Affinity)及类型名称 Boo…...

编程日记 2023/8/26 8:34:06

LLM-chatgpt训练过程

流程简介 主要包含模型预训练和指令微调两个阶段 模型预训练&#xff1a;搜集海量的文本数据&#xff0c;无监督的训练自回归decoder&#xff1b; O T P ( O t < T ) O_TP(O_{t<T}) OT​P(Ot<T​)&#xff0c;损失函数CE loss指令微调&#xff1a;在输入文本中加入…...

编程日记 2023/8/26 8:33:05

【学习笔记】[ABC274Ex] XOR Sum of Arrays

有点难&#x1f605; 真的是 A B C ABC ABC的难度吗&#x1f605; 非常精妙的哈希题目。 定义矩阵乘法&#xff1a; c i , j ⊕ ( a i , k & b k , j ) c_{i,j}\oplus (a_{i,k}\& b_{k,j}) ci,j​⊕(ai,k​&bk,j​) 之所以可以矩阵乘法是因为满足 ( a ⊕ b )…...

编程日记 2023/8/26 8:32:04

抖音web频道爬虫

抖音web频道爬虫代码&#xff1a; <?php header(Content-Type:application/json; charsetutf-8);//抖音频道爬虫class DouyinChannel{private $app_id 1;private $spider_code 1;private $channels [["channel_name" > "热点","url"…...

编程日记 2023/8/26 8:31:03

sql中的替换函数replace()总结

1&#xff0c;表达式 --replace&#xff08;&#xff09;--语法: REPLACE ( string_expression , string_pattern , string_replacement )--参数&#xff1a;string_expression&#xff1a;字符串表达式string_pattern&#xff1a;想要查找的子字符串string_replacement&#…...

编程日记 2023/8/26 8:30:02

vue3 vite使用 monaco-editor 报错

报错&#xff1a;Unexpected usage at EditorSimpleWorker.loadForeignModule 修改配置&#xff1a; "monaco-editor-webpack-plugin": "^4.2.0",删除不用 版本&#xff1a; "monaco-editor": "^0.28.1", 修改如下&#xff1a; opti…...

编程日记 2023/8/26 8:29:01

微信小程序获取蓝牙权限

要获取微信小程序中的蓝牙权限&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 在 app.json 文件中添加以下代码&#xff1a; "permissions": { "scope.userLocation": { "desc": "需要获取您的地理位置授权以搜索…...

编程日记 2023/8/26 8:28:00

GE 8920-PS-DC安全模块

安全控制&#xff1a; 这个安全模块通常用于实现工业自动化系统中的安全控制功能。它可以监测各种安全参数&#xff0c;如机器运动、温度、压力等&#xff0c;以确保系统在安全范围内运行。 PLC兼容性&#xff1a; 通常&#xff0c;这种安全模块可以与可编程逻辑控制器&#x…...

编程日记 2023/8/26 8:26:59

UG\NX二次开发 使用BlockUI设计对话框时，如何设置默认的开发语言？

文章作者：里海 来源网站：王牌飞行员_里海_里海NX二次开发3000例,C\C++,Qt-CSDN博客 简介： NX二次开发使用BlockUI设计对话框时，如何设置默认的代码语言？ 效果： 方法： 依次打开“文件”->“实用工具”->“用户默认设置”->“用户界面”->“操作记录”->“…...

编程日记 2023/8/26 8:25:58

W5500-EVB-PICO进行UDP组播数据回环测试（九）

前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试&#xff0c;那么本章我们进行UDP组播数据回环测试。 什么是UDP组播&#xff1f; 组播是主机间一对多的通讯模式&#xff0c; 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…...

编程日记 2023/8/26 8:24:56

24 WEB漏洞-文件上传之WAF绕过及安全修复

目录 WAF绕过上传参数名解析:明确哪些东西能修改?常见绕过方法&#xff1a;符号变异-防匹配( " ;)数据截断-防匹配(%00 ; 换行)重复数据-防匹配(参数多次)搜索引擎搜索fuzz web字典文件上传安全修复方案 WAF绕过 safedog BT(宝塔) XXX云盾 宝塔过滤的比安全狗厉害一些&a…...

编程日记 2023/8/26 8:23:54

Python科研绘图--Task03

目录 图类型 关系类型图 散点图的例子 数据分布型图 rugplot例子 分类数据型图 ​编辑回归模型分析型图 多子图网格型图 FacetGrid() 函数 PairGrid() 函数 绘图风格、颜色主题和绘图元素缩放比例 绘图风格 颜色主题 绘图元素缩放比列 图类型 关系类型图 数据集变量…...

编程日记 2023/8/26 8:22:53

ssm端游游戏账号销售管理系统源码和论文

ssm端游游戏账号销售管理系统源码和论文069 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面…...

编程日记 2023/8/26 8:21:52

ssm+vue农家乐信息平台源码和论文

ssmvue农家乐信息平台源码和论文066 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1、研究现状 国外&#xff0c;农家乐都被作为潜在的发展农村经济&#xff0c;增加农民收入的重要手段&#xff0c;让农户广…...

编程日记 2023/8/26 8:20:50

安装启动yolo5教程

目录 一、下载yolo5项目 二、安装miniconda&#xff08;建议不要安装在C盘&#xff09; 三、安装CUDA 四、安装pytorch 五、修改配置参数 六、修改电脑参数 七、启动项目 博主硬件&#xff1a; Windows 10 家庭中文版 一、下载yolo5项目 GitHub - ultralytics/yolov5:…...

编程日记 2023/8/26 8:19:49

封装redis 分布式锁 RedisCallback

RedisCallback 是redis 一个回调接口&#xff0c;在 Redis 连接后执行单个命令&#xff0c;返回执行命令后的结果。 如果在使用 RedisCallback 时&#xff0c;需要自动获取 Redis 连接资源&#xff0c;使用完毕后并释放连接资源。 RedisTemplate 类提供了一个 execute 方法&am…...

编程日记 2023/8/26 8:18:47

代码随想录算法训练营第17期第32天 | 122. 买卖股票的最佳时机 II、455.分发饼干、376. 摆动序列、53. 最大子序和

122. 买卖股票的最佳时机 II 我好像记得这道题是怎么写的&#xff0c;也不知道是福是祸 1. 收集每天的正利润就可以&#xff0c;收集正利润的区间&#xff0c;就是股票买卖的区间&#xff0c;而我们只需要关注最终利润&#xff0c;不需要记录区间 2.局部最优&#xff1a;收集…...

编程日记 2023/8/26 8:17:47

iOS HealthKit 介绍

文章目录 一、简介二、权限配置1. 在开发者账号中勾选HealthKit2. 在targets的capabilities中添加HealthKit。3. infoPlist需要配置权限 三、创建健康数据管理类1. 引入头文件2. 健康数据读写权限3. 检查权限4. 读取步数数据5. 写入健康数据 四、运行获取权限页面 一、简介 He…...

编程日记 2023/8/26 8:16:45

Windows平台Unity下播放RTSP或RTMP如何开启硬解码？

我们在做Windows平台Unity播放RTMP或RTSP的时候&#xff0c;遇到这样的问题&#xff0c;比如展会、安防监控等场景下&#xff0c;需要同时播放多路RTMP或RTSP流&#xff0c;这样对设备性能&#xff0c;提出来更高的要求。 虽然我们软解码&#xff0c;已经做的资源占有非常低了…...

编程日记 2023/8/26 8:15:44

承德建设网站公司/广告加盟

1、首先导入jar包: 2、然后,在applicatinContext.xml中添加上传和下载的配置文件,如下: 1 <!-- 文件上传的配置 --> 2 <bean id"multipartResolver" class"org.springframework.web.multipart.commons.CommonsMultipartResolver"> 3 …...

编程日记 2025/2/2 9:56:15

大兴高米店网站建设/360线上推广

Java是一门面向对象的编程语言。在语言层面上&#xff0c;创建对象通常仅仅是一个new关键字而已&#xff0c;最近在读《深入理解java虚拟机》&#xff0c;这篇文章回顾一下书中所讲的关于普通java对象在虚拟机中的创建过程。 虚拟机在遇到一条new指令时&#xff0c;首先将去检…...

编程日记 2025/2/2 5:56:33

杭州建网站企业/长春疫情最新情况

23日上午&#xff0c;阳光朗照&#xff0c;春意融融&#xff0c;在距离今年高考一百天的日子里&#xff0c;为了磨砺学生品格、激励学生昂扬斗志、增强学生实现梦想的信心&#xff0c;阳新一中邀请全国知名青年励志演说家、教师演说培训导师方可来校作《点燃激情&#xff0c;赢…...

编程日记 2025/2/2 2:51:40

沂水网站建设/微信朋友圈产品推广语

一 安装QExtSerialPort的项目网网址是&#xff1a;http://qextserialport.sourceforge.net/&#xff0c;上面有关于它的详细介绍。下载地址是&#xff1a;http://sourceforge.net/projects/qextserialport/files/。到现在为止&#xff0c;QExtSerialPort有四个版本&#xff…...

编程日记 2025/2/2 0:47:21

手机如何做网站/搜索引擎优化有哪些要点

软件特色如果还没安装&#xff0c;请参考安装说明Compoer/Packagist 中国全量镜像提供了对 Composer 安装的 CDN 加速支持此次更新包含如下改变&#xff1a;从本地 git 仓库检出 commit 时提升了安装和更新的效率新增 check-platform-reqs 命令&#xff0c;用于检查本地安装的 …...

编程日记 2025/2/1 23:28:14

网站开发项目流程/下载优化大师安装桌面

相关pom文件导入(注&#xff1a;做mark记录用)1.引入springcloud相关jar包2.EnableConfigServer注解3.SpringBootApplication注解4.配置相关注册中心地址即可5.根据相关配置文件格式即可读取.properties文件6.例&#xff1a;http://localhost:8601/moa/default...

编程日记 2025/2/1 21:50:00