CSS笔记——基本语法及相关知识

CSS层叠样式表是用于定义 HTML 或 XML 文档的样式和布局的语言。它可以让开发者更加灵活地控制页面元素的样式和排版，从而提高页面的可读性和用户体验

一、css样式书写顺序和规范

CSS样式的书写顺序和规范是为了让代码更易读、易维护和易扩展。下面是一些常见的规范：

  1. 建议按照以下顺序书写CSS属性：
    • 定位属性：position, top, right, bottom, left, z-index；
    • 盒模型属性：display, box-sizing, width, height, padding, border, margin；
    • 字体相关属性：font, line-height, text-align, text-transform, text-decoration；
    • 背景相关属性：background, color；
    • 其他属性：cursor, overflow, opacity等。
  2. 为了提高可读性和可维护性，建议每个属性单独一行，并且在属性名和属性值之间加一个空格。
  3. 使用缩写属性可以减少代码量，但是要确保清楚明白地说明每个属性的取值，尽量避免缩写造成的混淆和错误。
  4. 避免使用通配符（*）选择器和!important，因为它们会对性能和代码的可维护性产生负面影响。
  5. 使用语义化的命名规范来命名类名和ID名，以便于理解和扩展。
  6. 对于重复的样式代码，可以使用继承或者共享类名的方式来减少代码量。
  7. 在注释中说明样式的用途和意义，以便于其他人理解和维护代码。
  8. 在项目中统一使用一种CSS预处理器（如Sass、Less等），可以提高代码的可读性和可维护性。

总之，规范的CSS样式书写可以提高代码的质量和可维护性，减少代码错误和浪费的时间。

二、基本语法及相关知识

1、引入方式

  • 内联样式：在HTML元素中使用style属性设置CSS样式规则。

    <!-- HTML元素 -->
<div style="background-color: #f0f0f0;">Hello World</div>

  • 内部样式表 ：在HTML文档头部使用<style>标签定义CSS样式规则。

    <!-- HTML文档头部 -->
<style>body {background-color: #f0f0f0;}
</style>

  • 外部样式表 : 将CSS样式规则存储在一个单独的CSS文件中，使用<link>标签将CSS文件链接到HTML文档中。

    可以利用浏览器的缓存机制

    <link rel="stylesheet" href="styles.css">

需要注意的是，在使用CSS时，应该遵循以下一些最佳实践：

  1. 将CSS样式规则尽可能地存储在外部样式表中，以避免代码冗余和维护问题。如果必须使用内部样式或内联样式，应该限制其使用范围。
  2. 命名CSS类名和ID时，应该遵循一定的命名规范，以避免命名冲突和代码难以理解。常见的命名规范包括BEM、OOCSS和SMACSS等。
  3. 在编写CSS样式规则时，应该尽可能地避免使用!important声明，因为它会覆盖其他样式规则，增加了代码的复杂度。
  4. 在编写CSS时，应该注重样式的可读性和可维护性，可以通过拆分样式文件、模块化CSS等方式提高代码的可维护性。

2、注释方式 ：

/*   xxxxxx   */

3、CSS选择器

标签选择器（Type Selector）：通过元素的标签名匹配元素。

/* 选择所有的段落元素 */
p {color: red;
}

类选择器（Class Selector）：通过元素的class属性匹配元素。

/* 选择class属性为"my-class"的所有元素 */
.my-class {font-weight: bold;
}

ID选择器（ID Selector）：通过元素的id属性匹配元素。

/* 选择id属性为"my-id"的元素 */
#my-id {color: blue;
}

通配符选择器（Universal Selector）：匹配所有元素。

注：选择器会遍历所有元素，尽量避免使用

/* 选择所有元素 */  
* {margin: 0;padding: 0;
}

属性选择器（Attribute Selector）：通过元素的属性值匹配元素。

/* 选择所有title属性值中包含"example"的元素 */
[title*="example"] {font-style: italic;
}

在这里插入图片描述

伪类选择器（Pseudo-class Selector）：匹配元素的特定状态，例如hover、active、focus等。

/* 选择所有被鼠标悬停的链接 */
a:hover {color: green;
}

伪元素选择器（Pseudo-element Selector）：用于选择元素的特定部分，例如元素的第一个字母或第一个行。

/* 选择元素的第一个字母 */
p::first-letter {font-size: 2em;
}

4、css命名规范

  1. 可以包含字母、数字、破折号（-）和下划线（_）。
  2. 以字母或破折号（-）开头，而不是数字或下划线。
  3. 名称应该简洁、有意义，能够准确描述选择器、属性或值所表示的内容。
  4. 名称应该使用小写字母，**不要使用大写字母。**虽然CSS不区分大小写，但为了保持一致性，建议使用小写字母。
  5. 名称可以使用短横线（-）来分隔单词，例如font-size。不要使用下划线（_）或驼峰式命名法（camelCase）。
  6. 避免使用具有歧义的名称，例如left、right、top、bottom等名称在不同的上下文中可能会有不同的意义，因此不应该使用这样的名称。
  7. 避免使用CSS关键字作为名称，例如margin、padding、font等。
  8. 在为选择器、属性或值命名时，应该尽可能使用英文单词，而不是缩写或拼音。
  9. 选择器、属性或值的命名应该具有可读性和易于理解的特点，以便于其他人理解代码并进行维护。

5、CSS复合选择器

后代选择器 : 使用空格分隔不同的选择器。例如，选择一个父元素内的子元素可以这样写：

父元素 子元素 {/* 样式 */
}

子元素选择器（Child Selector）: 使用 “>” 符号分隔不同的选择器。这个选择器只会选择作为某个元素子元素的元素，不会选择孙元素。例如：

父元素 > 子元素 {/* 样式 */
}

相邻兄弟选择器（Adjacent Sibling Selector）: 使用 “+” 符号分隔不同的选择器。这个选择器会选择紧随在某个元素后面的相邻兄弟元素。例如：

元素1 + 元素2 {/* 样式 */
}

**通用兄弟选择器（General Sibling Selector）**使用 “~” 符号分隔不同的选择器。这个选择器会选择在某个元素之后的所有兄弟元素。例如：

元素1 ~ 元素2 {/* 样式 */
}：

**属性选择器（Attribute Selector）**用于选择具有指定属性的元素。例如，选择所有带有 title 属性的元素可以这样写：

元素[属性名] {/* 样式 */
}

6、CSS样式优先级

​ 选择器相同，执行样式层叠性

​ 选择器不同，执行样式优先级

​ 在CSS中，样式的优先级是根据特定的规则来确定的，一般按照以下优先级从高到低：

  1. !important声明：使用!important声明的样式具有最高优先级，会覆盖其他所有规则。 无穷大
  2. 行内样式：在HTML标签内部使用style属性设置的样式优先级次之。 1,0,0,0
  3. ID选择器：使用ID选择器定义的样式具有比大多数其他选择器更高的优先级。 0,1,0,0
  4. 类选择器、属性选择器和伪类选择器：这些选择器的优先级相同，具有比元素选择器更高的优先级。 0,0,1,0
  5. 元素选择器和伪元素选择器：这些选择器的优先级最低，除非它们具有其他选择器所没有的关键字，如:not()。 0,0,0,1

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

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

相关文章

【空间-光谱联合注意网络：多时相遥感图像】

【空间-光谱联合注意网络：多时相遥感图像】

A Spatial–Spectral Joint Attention Network for Change Detection in Multispectral Imagery &#xff08;一种用于多光谱图像变化检测的空间-光谱联合注意网络&#xff09; 变化检测是通过比较双时相图像来确定和评估变化&#xff0c;这是遥感领域的一项具有挑战性的任务…
阅读更多...
Java基础——运算符表达式

Java基础——运算符表达式

文章目录 算术运算符赋值运算符关系运算符逻辑运算符位运算符三元运算符 算术运算符 运算符说明加-减*乘/除%取模&#xff08;取余&#xff09;自增- -自减 参考代码&#xff1a; //加法运算 int add1 2 3; System.out.println("加法运算 add1 " add1); Strin…
阅读更多...
debian中vim的使用

debian中vim的使用

debian使用vi中经常出现m apt install vim vim不能用鼠标粘贴 vim /etc/vim/vimrc 在末尾加入以下内容&#xff1a; let skip_defaults_vim 1 if has(mouse)set mouse-a endif保存文件即可
阅读更多...
Git 精简快速使用

Git 精简快速使用

安装 Git 忽略&#xff0c;自行搜索 新建项目&#xff0c;或者在仓库拉取项目&#xff0c;进入到项目目录 Github 给出的引导&#xff0c;新项目和旧项目 echo "# testgit" >> README.md git init git add README.md git commit -m "first commit"…
阅读更多...
.NET Nuget包推荐安装

.NET Nuget包推荐安装

文章目录 前言通用WPFWebApiBlazor 前言 我这里的包主要是.NET Core的&#xff0c;.NET Framework可能不支持。 通用 Newtonsoft.Json&#xff1a;最常用的C#和Json对象互转的包。支持匿名对象&#xff0c;但是不支持Enum枚举类型&#xff0c;显示的是Enum的数值&#xff0c…
阅读更多...
MySQL强制使用索引的两种方式及优化索引，使用MySQL存储过程创建测试数据。

MySQL强制使用索引的两种方式及优化索引，使用MySQL存储过程创建测试数据。

一、MySQL强制使用索引的两种方式 1、使用 FORCE INDEX 语句&#xff1a; explainselect*fromtbl_test force index (index_item_code)where(item_code between 1 and 1000) and (random between 50000 and 1000000)order byrandomlimit 1; 使用 FORCE INDEX&#xff08;索引…
阅读更多...
ARM 和 AMD 架构的区别

ARM 和 AMD 架构的区别

ARM 架构和 AMD 架构是两种不同的计算机处理器架构&#xff0c;它们有以下几个主要区别&#xff1a; 设计出发点&#xff1a; ARM 架构&#xff1a;ARM 架构最初是为嵌入式系统设计的&#xff0c;旨在提供低功耗和高效能的解决方案。它主要应用于移动设备、嵌入式系统和物联网设…
阅读更多...
链表（单链表、双链表）

链表（单链表、双链表）

前言&#xff1a;链表是算法中比较难理解的部分&#xff0c;本博客记录单链表、双链表学习&#xff0c;理解节点和指针的使用&#xff0c;主要内容包括&#xff1a;使用python创建链表、实现链表常见的操作。 目录 单链表 双链表 单链表 引入链表的背景&#xff1a; 先来看…
阅读更多...
使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询

使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询

目录 动态树 数据表 案列 书籍管理 动态树 动态树&#xff08;Dynamic tree&#xff09;是一种数据结构&#xff0c;它可以在树中动态地插入、删除和修改节点。与静态树不同&#xff0c;静态树的节点是固定的&#xff0c;一旦构建完成就无法再进行修改。而动态树可以在运行时…
阅读更多...
Java 8中的Stream API

Java 8中的Stream API

Java 8引入了一种全新的数据处理方式&#xff1a;Stream。Stream API提供了一种功能强大、高效、可复合、并行处理集合数据的方式。使用Stream API&#xff0c;我们可以轻松地对集合进行筛选、排序、过滤、映射等操作。在本教程中&#xff0c;我们将深入介绍Stream API的原理、…
阅读更多...
任意文件的上传和下载

任意文件的上传和下载

1.任意文件下载&#xff08;高危&#xff09; 定义 一些网站由于业务需求&#xff0c;往往需要提供文件查看或文件下载功能&#xff0c;但若对用户查看或下载的文件不做限制&#xff0c;则恶意用户就能够查看或下载任意敏感文件&#xff0c;这就是文件查看与下载漏洞。 可以下载…
阅读更多...
缓存更新策略

缓存更新策略

redis的缓存更新策略: 先删除缓存,在更新数据库,缺点:当线程1进行一个更新的操作,先进行缓存删除,在修改数据库,但是修改数据库之前,线程2 进行查询缓存的操作,未命中,查找数据库,写入缓存,线程1修改完成后,但是此时缓存中的数据还是旧数据,会出现数据不一致问题,只有等这个缓…
阅读更多...
L10 数据库

L10 数据库

1&#xff0c; 数据库的安装 sudo dpkg -i *.deb 2, 数据库命令&#xff1a; 1&#xff09;系统命令 &#xff0c; 都以.开头 .exit .quit .table 查看表 .schema 查看表的结构 2&#xff09;sql语句&…
阅读更多...
OpenCV显示10bit Raw数据

OpenCV显示10bit Raw数据

参考&#xff1a;10 12 14bit图像存储格式&#xff0c;利用Opencv显示10bit Raw数据,并根据鼠标的移动显示对应位置的灰度值。其他bit位数的Raw数据方法类似。 代码实现&#xff1a; #include<opencv2/opencv.hpp> #include<iostream> #include<opencv/highgu…
阅读更多...
@Valid和 @Validated

@Valid和 @Validated

Valid 和 Validated 是用于在 Spring 框架中进行数据验证的注解。 Valid 是 Java 标准库&#xff08;javax.validation&#xff09;中的注解&#xff0c;用于标记需要进行数据验证的对象或方法参数。它可以应用于方法参数、方法返回值、字段或方法级别。当使用 Valid 注解时&a…
阅读更多...
【Vue.js】使用Element入门搭建登入注册界面axios中GET请求与POST请求跨域问题

【Vue.js】使用Element入门搭建登入注册界面axios中GET请求与POST请求跨域问题

一&#xff0c;ElementUI是什么&#xff1f; Element UI 是一个基于 Vue.js 的桌面端组件库&#xff0c;它提供了一套丰富的 UI 组件&#xff0c;用于构建用户界面。Element UI 的目标是提供简洁、易用、美观的组件&#xff0c;同时保持灵活性和可定制性 二&#xff0c;Element…
阅读更多...
一创聚宽的实盘就要关闭了，有没有好用的实盘平台推荐

一创聚宽的实盘就要关闭了，有没有好用的实盘平台推荐

挺多的&#xff0c;比较普遍的是QMT和Ptrade&#xff0c;python语言&#xff0c;易上手&#xff0c;通用性好&#xff0c;要说适用性可以考虑Ptrade&#xff0c;问一下你的客户经理有没有&#xff0c;用Ptrade的券商也多&#xff0c;如果之前用一创聚宽你可以无缝切换&#xff…
阅读更多...
【工具使用】Audition软件导入.sesx文件报错问题

【工具使用】Audition软件导入.sesx文件报错问题

一&#xff0c;简介 本文主要介绍了在使用Audition导入新的wav文件后&#xff0c;保存&#xff0c;然后再打开.sesx文件时报错&#xff1a;“ 错误: 文件已损坏或使用了不受支持的格式 XML FATAL ERROR: (line: 2835, col: 69) [ D:\Project\AE_Y2311\16channel_test\16_chann…
阅读更多...
【趣味JavaScript】5年前端开发都没有搞懂toString和valueOf这两个方法!

【趣味JavaScript】5年前端开发都没有搞懂toString和valueOf这两个方法!

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&#x1…
阅读更多...
linux易忘命令（如：端口、进程、文件、内存、vim）持续更新

linux易忘命令（如：端口、进程、文件、内存、vim）持续更新

路径&#xff1a;pwd 开放端口&#xff1a;firewall-cmd --zonepublic --add-port<端口号>/tcp --permanent 重启防火墙&#xff1a;systemctl restart firewalld 查看防火墙开放的端口&#xff1a;firewall-cmd --list-ports --permanent 解压&#xff1a; unzip *.…
阅读更多...
最新文章

Copyright @ 2022~2023