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

【CSS01】CSS概述，使用样式的必要性，CSS语法及选择器

news 文章来源：https://blog.csdn.net/imqdcn/article/details/140276330 2025/5/2 16:29:25

文章目录

        • 一、什么是样式
        • 二、使用样式的必要性
        • 三、使用样式的几种方式
        • 四、CSS基本语法：
        • 五、CSS的注释
        • 六、CSS选择器——重点
        • 相关单词

一、什么是样式

概念：

Cascade [kæˈskeɪd] Style Sheet [ʃiːt] 级联样式单/表，层叠样式表

CSS有化腐朽为神奇的力量，掌握了CSS后在页面美化方面能限制住你的只有想象力。

看到页面感觉很复杂，那是不是学习CSS也很难呢？其实CSS类似于HTML是标记语言一样，没有逻辑运算等。

二、使用样式的必要性

1、随着内容越来越多，已经不适合将内容和表现混合在一起，为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）,1996年推出css1,1998年推出CSS2，目前是css3

2、用来表示网页的外观

3、为了解决内容与表现分离的问题

三、使用样式的几种方式

1、内联样式(inline)：使用style属性声明在元素中

<div style="属性：属性值"></div>

​ 注意：只对当前元素有效

2、内部（内嵌）样式(inner)：

    <head><style type="text/css">...</style></head

注意：对当前页面有效

3、外部（外链）样式(outer)：创建一个独立的.css文件

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

<link> 标签定义文档与外部资源的关系。

rel属性规定当前文档与被链接文档之间的关系。只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。

type属性规定被链接文档的 MIME 类型。

注意：外部样式对所有引用它的页面都有效(可用于控制全站的风格)

4、引入样式

可以放置在内部样式或者外部样式中

    @import url(style.css)

注意：不建议使用

使用原则：

  • 内联样式尽量少用；
  • 内部样式可以适量使用(全站中只有一个页面中使用的样式)；
  • 推荐使用外部样式(外部文件不要太多)
四、CSS基本语法：
选择器 { 语句声明; 语句声明2; ... 语句声明n }
/*备注:*/
语句声明=属性:属性值;

css语法

使用花括号包围，多条声明语句需要使用分号隔开，最后一个可以不用。

例子：

h1{ color:red; font-size:14px;}

1、内联样式写法：

 <h1 style="color:red; font-size:14px;">我是一只小小鸟</h1>

2、内部/外部CSS写法

选择器{属性名: 属性值;...	属性名: 属性值;
}
/*例子：*/
h1{ color:red; font-size:14px;
}

注意：

  1. 选择器需要区分大小写，而属性和属性值不需要
  2. 空格会被忽略
  3. 值为若干单词，则要给值加引号(主要是字体样式)

选择器命名规范：

只能以数字，26个英文字母(a-z,A-Z)，和—、_来命名，而且理论上也不能以数字、下划线减号开头

五、CSS的注释

单行多行均使用一种注释方式：

  /*这里是注释*/
六、CSS选择器——重点

选择器的本质：选择XX标签做XX事情。

什么是选择器：表示CSS允许你通过标签的标签名、属性名来选择某些HTML，并对他们进行操作，也就是选择什么做什么事情。

常用的基本选择器（在学习CSS3时会接触更多）：

  1. 通配符选择器

写法：*{...}

含义：选择页面中的所有元素

举例：

*{color: red;
}
  1. 标签选择器

写法：元素名{...}

含义：选择指定的元素 如div{…}

举例：

div{color: red;
}
  1. ID选择器

写法：#ID值{...}

含义：仅选择具有指定ID的元素 如#p2{…}

举例：

#p2{color: red;
}
  1. 类别选择器

写法：.类名{...}

含义：选择具有指定class的所有元素 .mark{}

举例：

.bgpink{background-color: #FBD1D1
}
  1. 过滤选择器

写法：选择器1选择器2{...}

含义：选择可被两个选择器同时选定的元素 如p.mark{…} 或 .product.mark{…}

举例：

/*过滤选择器，表示该元素必须都要包含指定的选择器*/
#font2.box{color: red;
}
  1. 后代选择器(父子选择器)

写法：选择器1 选择器2{...}

含义：选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素 如div span{…} .product .mark{…}

举例：

.block p{/*表示选中block下的所有的p元素*/color:red;
}
  1. 直接子元素选择器

写法：选择器1>选择器2{...}

含义：选中选择器1中的直接子元素中可被选择器2选中的 如div > span{…}

举例：

.block > p{/*block下的所有的子元素p*/color:red;
}
  1. 并列选择器

写法：选择器1,选择器2,...选择器n{...}

含义：选择可被任何一个选择器选中的元素 h2,#main,.mark{…}

举例：

/*并列选择器*/
#font1,#font2,#font3,#font4{font-size: 14px
}
  1. 伪类选择器
/*
理论上任何元素都可以设置则4种状态
主要用于给a链接设置4种不同的状态的样式
角色相当于是类别选择器，只是在特定的场景下才会起作用，有如下四个
*/
:link{样式规则
}
:visited{样式规则
}
:hover{样式规则
}
:active{样式规则
}
/*
要按照以上的书写顺序来
记忆口诀：爱恨原则  lv ha
*/
相关单词

  1. link 链接，a链接访问前的状态

  2. visited 访问后的

  3. hover 悬浮

  4. active 激活，活动的

  5. style 样式

如需本次课作业、笔记、案例等，请在下方+微获取。

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。免费答疑，行业深潜多年的技术牛人帮你解决bug。

我可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师！

相关文章：

【CSS01】CSS概述，使用样式的必要性，CSS语法及选择器

文章目录 一、什么是样式二、使用样式的必要性三、使用样式的几种方式四、CSS基本语法&#xff1a;五、CSS的注释六、CSS选择器——重点相关单词 一、什么是样式 概念&#xff1a; Cascade [kˈskeɪd] Style Sheet [ʃiːt] 级联样式单/表&#xff0c;层叠样式表 CSS有化腐…...

编程日记 2024/7/8 19:32:30

PostgreSQL的pg_bulkload工具

PostgreSQL的pg_bulkload工具 pg_bulkload 是一个针对 PostgreSQL 提供高性能批量数据加载的工具。相较于内置的 COPY 命令&#xff0c;pg_bulkload 更加灵活并且在许多情况下性能更高。它支持数据的强制加载、数据过滤、数据转换以及错误处理等多种功能&#xff0c;非常适合需…...

编程日记 2024/7/8 19:31:29

【Java伴学笔记】Day-01 命令行|环境|编译解释运行|Java的相关分支|Java的特性|字面量

一、关于命令行 图形化界面的缺点 需要加载图片等一系列资源 效率较低 命令行 CMDMicrosoft Learn-CMDWindows CMD常用命令大全&#xff08;值得收藏&#xff09; 二、环境 什么是JDK JDK是Java Development Kit的缩写&#xff0c;意为Java开发工具包。它是一个用于开发Java应用…...

编程日记 2024/7/8 19:29:27

如何使用Vue3创建在线三维模型展示？

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 代码相关的技术博客 代码应用场景介绍 本段代码使用 RoughJS 库在 HTML5 Canvas 上创建了手绘风格的图像&#xff0c;展示了 RoughJS 库的强大功能&#xff0c;可用于创建具有有机手绘外观的图形。 代码基本…...

编程日记 2024/7/8 19:28:25

使用ndoe实现自动化完成增删改查接口

使用ndoe实现自动化完成增删改查接口 最近工作内容比较繁琐&#xff0c;手里需要开发的项目需求比较多&#xff0c;常常在多个项目之间来回切换&#xff0c;有时候某些分支都不知道自己开发了什么、做了哪些需求&#xff0c; 使用手写笔记的方式去记录分支到头来也是眼花缭乱&a…...

编程日记 2024/7/8 19:26:23

排序 -- 手撕归并排序(递归和非递归写法)

一、基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有…...

编程日记 2024/7/8 19:25:21

防火墙基础及登录(华为)

目录 防火墙概述防火墙发展进程包过滤防火墙代理防火墙状态检测防火墙UTM下一代防火墙&#xff08;NGFW&#xff09; 防火墙分类按物理特性划分软件防火墙硬件防火墙 按性能划分百兆级别和千兆级别 按防火墙结构划分单一主机防火墙路由集成式防火墙分布式防火墙 华为防火墙利用…...

编程日记 2024/7/8 19:24:20

【Vue】使用html、css实现鱼骨组件

文章目录 预览图组件测试案例 预览图 组件 <template><div class"context"><div class"top"><div class"label-context"><div class"label" v-for"(item, index) in value" :key"index&qu…...

编程日记 2024/7/8 19:23:18

Python的多态

在 Python 中&#xff0c;多态&#xff08;Polymorphism&#xff09;是指不同的对象可以对相同的消息&#xff08;方法调用&#xff09;做出不同的响应。 简单来说&#xff0c;多态允许使用一个统一的接口来操作不同类型的对象&#xff0c;而这些对象会根据自身的类型来执行相应…...

编程日记 2024/7/8 19:22:17

001uboot体验

1.uboot的作用&#xff1a; 上电->uboot启动->关闭看门狗、初始化时钟、sdram、uart等外设->把内核文件从flash读取到SDRAM->引导内核启动->挂载根文件系统->启动根文件系统的应用程序 2.uboot编译 uboot是一个通用的裸机程序&#xff0c;为了适应各种芯片&…...

编程日记 2024/7/8 19:21:15

Flask之电子邮件

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、使用Flask-Mail发送电子邮件 1.1、配置Flask-Mail 1.2、构建邮件数据 1.3、发送邮件 二、使用事务邮件服务SendGrid 2.1、注册SendGr…...

编程日记 2024/7/8 19:20:14

Vue 2 与 ECharts：结合使用实现动态数据可视化

在现代前端开发中&#xff0c;数据可视化变得越来越重要。ECharts 是一个强大的数据可视化库&#xff0c;而 Vue 2 则是一个流行的前端框架。本文将介绍如何将 Vue 2 和 ECharts 结合使用&#xff0c;以实现动态数据可视化。 安装与配置 首先&#xff0c;确保你的项目中已经安…...

编程日记 2024/7/8 19:18:11

.net core Redis 使用有序集合实现延迟队列

Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员。 不同的是每个元素都会关联一个 double 类型的分数。redis 正是通过分数来为集合中的成员进行从小到大的排序。 有序集合的成员是唯一的,但分数(score)却可以重复。 集合是通过哈希表实现的&#xf…...

编程日记 2024/7/8 19:17:10

linux 安装Openjdk1.8

一、在线安装 1、更新软件包 sudo apt-get update 2、安装openjdk sudo apt-get install openjdk-8-jdk 3、配置openjdk1.8 openjdk默认会安装在/usr/lib/jvm/java-8-openjdk-amd64 vim ~/.bashrc export JAVA_HOME/usr/lib/jvm/java-8-openjdk-amd64 export JRE_HOME${J…...

编程日记 2024/7/8 19:16:08

鸿蒙系统：未来智能生态的引领者

在当今这个日新月异的互联网领域&#xff0c;操作系统作为连接硬件与软件的桥梁&#xff0c;其重要性不言而喻。随着华为鸿蒙系统&#xff08;HarmonyOS&#xff09;的崛起&#xff0c;一场关于操作系统未来的讨论再次被推向高潮。 鸿蒙OS&#xff0c;华为的全新力作&#xff…...

编程日记 2024/7/8 19:15:08

Java语言程序设计——篇二（1）

Java语言基础 数据类型关键字与标识符关键字标识符 常量与变量1、常量2、变量 类型转换自动类型转换强制类型转换 数据类型 数据的基本要素数据的性质&#xff08;数据结构&#xff09;数据的取值范围&#xff08;字节大小&#xff09;数据的存储方式参与的运算 Java是一门强类…...

编程日记 2024/7/8 19:11:02

水果商城系统 SpringBoot+Vue

1、技术栈 技术栈&#xff1a;SpringBootVueMybatis等使用环境&#xff1a;Windows10 谷歌浏览器开发环境&#xff1a;jdk1.8 Maven mysql Idea 数据库仅供学习参考 【已经答辩过的毕业设计】 项目源码地址 2、功能划分 3、效果演示...

编程日记 2024/7/8 19:08:59

半导体制造企业 文件共享存储应用

用户背景&#xff1a;半导体设备&#xff08;上海&#xff09;股份有限公司是一家以中国为基地、面向全球的微观加工高端设备公司&#xff0c;为集成电路和泛半导体行业提供具竞争力的高端设备和高质量的服务。 挑战&#xff1a;芯片的行业在国内迅猛发展&#xff0c;用户在上海…...

编程日记 2024/7/8 19:07:58

深入分析 Android BroadcastReceiver (九)

文章目录 深入分析 Android BroadcastReceiver (九)1. Android 广播机制的扩展应用与高级优化1.1 广播机制的扩展应用1.1.1 示例&#xff1a;有序广播1.1.2 示例&#xff1a;粘性广播1.1.3 示例&#xff1a;局部广播 1.2 广播机制的高级优化1.2.1 示例&#xff1a;使用 Pending…...

编程日记 2024/7/8 19:05:56

从数据到洞察：DataOps加速AI模型开发的秘密实践大公开！

作者 | 代立冬&#xff0c;白鲸开源科技联合创始人&CTO 引言 在AI驱动的商业世界中&#xff0c;DataOps作为连接数据与洞察的桥梁&#xff0c;正迅速成为企业数据战略的核心。 在WOT全球技术创新大会2024北京站&#xff0c;白鲸开源联合创始人&CTO 代立冬 在「大数据…...

编程日记 2024/7/8 19:02:52

全景图三维3D模型VR全景上传展示H5开发

全景图三维3D模型VR全景上传展示H5开发 3D互动体验平台的核心功能概览 兼容广泛格式&#xff1a;支持OBJ、FBX、GLTF等主流及前沿3D模型格式的无缝上传与展示&#xff0c;确保创意无界。 动态交互探索&#xff1a;用户可自由旋转、缩放、平移模型&#xff0c;深度挖掘每一处…...

编程日记 2024/7/8 19:00:50

前端面试题29（js闭包和主要用途）

JavaScript 中的闭包是一个非常强大的特性&#xff0c;它允许一个函数访问并操作其词法作用域之外的变量。闭包的形成主要依赖于函数的作用域链&#xff0c;即函数可以访问在其外部定义的变量&#xff0c;即使外部函数已经执行完毕。下面我会通过几个方面来帮助你理解闭包的概念…...

编程日记 2024/7/8 18:59:48

使用Keil 点亮LED灯 F103ZET6

1.新建项目 不截图了 2.startup_stm32f10x_hd.s Keil\Packs\Keil\STM32F1xx_DFP\2.2.0\Device\Source\ARM 搜索startup_stm32f10x_hd.s 复制到项目路径&#xff0c;双击Source Group 1 3.项目文件夹新建stm32f10x.h&#xff0c; 新建文件main.c #include "stm32f10x…...

编程日记 2024/7/8 18:57:46

流批一体计算引擎-12-[Flink]旁路输出getSideOutput(OutputTag)实现拆分流和复制流

官网旁路输出 Flink拆分流和复制流 我们在处理数据的时候，有时候想对不同情况的数据进行不同的处理，那么就需要把流进行拆分或者复制。 如果是使用filter来进行拆分，也能满足我们的需求，但每次筛选都要保留整个流，然后遍历整个流，显然很浪费性能，假如能够在一个流了多次…...

编程日记 2024/7/8 18:56:45

【Scrapy】 Scrapy 爬虫框架

准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 &#x1f3b5; 陈慧娴《傻女》 Scrapy 是…...

编程日记 2024/7/8 18:55:43

【笔记】太久不用redis忘记怎么后台登陆了

&#xff01;首先启动虚拟机linux的centos7 2.启动finalshell 我的redis启动在根目录用 redis-server redis.conf --启动 systemctl status redis --查看redis状态 是否active redis-cli -h centos的ip地址 -p 你要用的redis端口号&#xff08;默认为6379&#xff09; -a 你…...

编程日记 2024/7/8 18:53:41

昇思25天打卡营-mindspore-ML- Day14-VisionTransformer图像分类

今天学习了Vision Transformer图像分类&#xff0c;这是一种基于Transformer模型的图像分类方法&#xff0c;它不依赖卷积操作&#xff0c;而是通过自注意力机制捕捉图像块之间的空间关系&#xff0c;从而实现图像分类。 基本原理&#xff1a; 图像分块: 将原始图像划分为多个…...

编程日记 2024/7/8 18:52:40

微信环境内H5网页，用开放标签wx-open-launch-app打开app

一、微信公众号后台配置安全域名 准备一个认证通过的公众号&#xff0c;打开公众号后台 1、设置与开发 2、公众号设置 3、功能设置 4、配置js接口安全域名 二、微信开放平台&#xff0c;将公众号与APP关联 打开微信开放平台后台 1、管理中心 2、公众号 3、选择一个需要操作…...

编程日记 2024/7/8 18:51:38

【c++基础】高精度数不进位加法

高精度数不进位加法 谈及数字即可想到运算&#xff0c;那么高精度数怎么运算呢&#xff1f;今天来系统介绍一下高精度数的加法。 思考一下加法运算&#xff0c;我们可以简单将加法运算这样区分&#xff1a; 有无进位。位数是否相同。 这篇文章我们就来讨论一下无进位的高精度…...

编程日记 2024/7/8 18:48:33

UniApp 中 Web/H5 正确使用反向代理解决跨域问题

因为 Vue3 的构建工具是 Vite&#xff0c;所以配置 vue.config.js 是没用的&#xff08;Vue2 因为使用 webpack 所以才用这个文件&#xff09; 这里提供一份 vue.config.js 的示例&#xff1a; module.exports {devServer: {proxy: {/api: {target: http://example.com,chan…...

编程日记 2024/7/8 18:47:32