初级css+初级选择器
一、css基础样式
html: 标签 => 网页骨架
css: 美化这个网页的骨架 =>样式去装饰网页
1. css 层叠样式表 (英文全称: Cascading Style Sheets)
>修饰网页内容 比如: 文字大小 颜色 网页排版 高宽等等
2. css写在哪里?——行内样式 内部样式 外部样式
>行内样式:
写法: 直接写在标签中的属性中
例子: <标签名 style="css代码">
优点: 书写简单
缺点: 不利于维护 样式和结构也没有分离
使用次数:很少使用
<!-- 行内样式的写法 -->
<!-- <p style='css代码'>这是一段文本</p> -->
>内部样式:
写法: 直接写在html文档里面 通过style标签
style标签 通常放置于head里面的title下方
优点:比较利于维护 部分结构和样式分离
缺点: 没有真正的结构和样式 还是在写在一个html里面
使用次数:常用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内部样式 -->
<!-- style:样式表标签 -->
<style>
/* 在这里书写css代码 */
/* 这个是css代码的注释 快捷键ctlr+/ */
</style>
</head>
>外部样式:
写法:
1.单独创建一个文件 并且文件后缀名是.css
2.通过link标签进行引入 link通常放到头部位置
优点:结构和样式 分离 可以重复利用
缺点: 对于新手 书写麻烦要引入
使用次数:开发中使用次数最多 写项目推荐写法
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
外部样式写法:
link:链接标签
rel:规定你的文档是什么格式
stylesheet:样式表
-->
<link rel="stylesheet" href="./index.css">
</head>
css文件中内容形式
/* 书写我的外部样式文件 */
/* 标签名选择器 */
span{
color: pink;
}
同一个标签 写三种样式写法: 就近原则 ——行内样式 > 内部和外部
二、初级选择器
1.标签名选择器—— 标签名{}
/* 标签名选择器 找到叫div 去添加 */
div{
color: pink;
}
2.id选择器——给标签设置一个id属性 (id='id名') 写样式找这个以#id名进行添加
>命名是唯一 ，不允许重复 就好比你的身份证号一样
>出现了相同id名会导致 你后续js获取元素
>单个标签只能写一个id名
命名规范:
(1).不可以单独以数字或者单个字母命名 (比如: 1 a 等)
(2).不规范命名(列如: a1 a2 a3 ..... 不规范写法 )
(3).不能直接写中文 也最好不要用拼音 尽量百度翻译一下
(4).见名知意 看到这个单词就知道什么意思 规范的话取名驼峰命名 (userName)
(5).符号 规范(_ -)
/* id选择器 权重 10 */
#wrap {
color: red;
}
body内部
<div class='box text' id='wrap'>颜色</div>
3.类名选择器——class
>不是唯一 可以写多个类名
>给标签添加一个 class属性 以.类名
>允许不同的标签用相同的类名
/* 类名选择器 权重 1*/
.box{
color: green;
}
body内部
<div class='box text' id='wrap'>颜色</div>
4.后代选择器 空格隔开 例子: 父 后代{}
/* 给后代添加样式 找到id名叫Box 里面的后代叫p的添加样式 */
#Box p{
color: green;
}
body内部
<div id="Box">
<p>我是文本</p>
<a href="">
<p>我是放到a标签中的p</p>
</a>
</div>
5.子级选择器 > 例子: 父>子{}
/* 子级选择器 */
/* #Box>p{
color: blue;
} */
/* 找到id叫box的子级 叫p的标签 只会找子级 不会找孙子 */
6. 通配符 *{}
/* 通配符选择器 *{} 用来清除网页默认自带的样式 */
*{
/* color: red; */
/*通配符作用 主要 清除内外边距 */
/* 外边距 */
margin: 0px;
/* 内边距 */
padding: 0px;
}
7.相邻选择器 以兄+挨着最近的一个弟弟
/* 相邻选择器 */
/* span+b{
color: green;
} */
8. 同级兄弟选择器 兄~弟
/* 同级兄弟选择器 哥哥 找弟弟 没有弟弟往上走的 */
/* span~b{
color: orange;
} */
9.交集选择器 p.text{}
/* 交集选择器 找到p标签中有text类名的 */
/* p.text{
color: pink;
} */
10.并列选择器
/* 并列/合并选择器 ,理解为 和 的意思 */
div,p,span{
color: green;
}
11.选择器优先权 权重——!important >行内样式 > id > class > 标签名 > 通配符 >继承
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id选择器 权重 10 *//* #wrap {color: red;} *//* 类名选择器 权重 1*//* .box{color: green;} */.text {/* 文字大小 */font-size: 25px;}/* 给后代添加样式 找到id名叫Box 里面的后代叫p的添加样式 *//* #Box p{color: green;} *//* 子级选择器 *//* #Box>p{color: blue;} *//* 找到id叫box的子级 叫p的标签 只会找子级 不会找孙子 *//* 选中ul标签的后代 叫 li的标签 添加样式 *//* ul li{color: pink;} *//* 通配符选择器 *{} 用来清除网页默认自带的样式 */*{/* color: red; *//*通配符作用 主要 清除内外边距 *//* 外边距 */margin: 0px;/* 内边距 */padding: 0px;}/* 相邻选择器 *//* span+b{color: green;} *//* 同级兄弟选择器 哥哥 找弟弟 没有弟弟往上走的 *//* span~b{color: orange;} *//* 交集选择器 找到p标签中有text类名的 *//* p.text{color: pink;} *//* 并列/合并选择器 ,理解为 和 的意思 */div,p,span{color: green;}</style></head><body><!-- class类名选择器 --><div class='box text' id='wrap'>颜色</div><div id="Box"><p>我是文本</p><a href=""><p>我是放到a标签中的p</p></a></div><ul><li>把大象放进冰箱</li><li>打开冰箱门</li><li>放入大象</li><li>关闭冰箱门</li></ul><span>我想挨着加粗标签</span><b>给文字加粗</b><b>这是第二个b</b><p class="text">这是文本</p><p>第二段文本</p><p class="text">第三段文本</p></body></html>相关文章：
初级css+初级选择器
一、css基础样式 html: 标签 > 网页骨架 css: 美化这个网页的骨架 >样式去装饰网页 1. css 层叠样式表 (英文全称: Cascading Style Sheets) >修饰网页内容 比如: 文字大小 颜色 网页排版 高宽等等 2. css写在哪里?——行内样式 内部样式 外部样…...
gitlab 的CI/CD （二）
前言 上文完成了gitlab-runner的基础配置及将gitlab的制品上传至软件包库（产品库）的脚本编写； 本文实现gitlab的ci/cd对远程服务器的操作； 介绍 要让Gitlab Runner部署到远程机器，远程机器必须信任gitlab runner账…...
【html】基础（一）
本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等 💓博主csdn个人主页：小小unicorn ⏩专栏分类：js专栏 🚚代码仓库：小小unicorn的代码仓库🚚 &am…...
【网站架构部署与优化】Nginx优化
文章目录 Nginx服务优化一、隐藏Nginx版本号，避免安全漏洞泄漏方法一：通过修改配置文件方法二：通过修改源码并重新编译安装 修改Nginx的用户和组修改用户与组 配置Nginx网页缓存时间配置Nginx连接保持的超时时间KeepAlive模式简介Nginx中的超…...
gitlab修改访问端口
目录 1.找到gitlab.rb文件，一般在/etc/gitlab/路径下 2.打开配置文件，加上代码 3.重新配置 4.重启gitlab 1.找到gitlab.rb文件，一般在/etc/gitlab/路径下 2.打开配置文件，加上代码 打开文件 sudo vi gitlab.rb 加上默认端口配…...
分库分表-分页排序查询
优质博文：IT-BLOG-CN 背景：我们系统上云后，数据根据用户UDL部分数据在国内，部分数据存储在海外，因此需要考虑分库查询的分页排序问题 一、分库后带来的问题 需求根据订单创单时间进行排序分页查询，在单表…...
【openwrt-21.02】openwrt PPTP Passthrough 不生效问题解决方案
Openwrt版本 NAME="OpenWrt" VERSION="21.02-SNAPSHOT" ID="openwrt" ID_LIKE="lede openwrt" PRETTY_NAME="OpenWrt 21.02-SNAPSHOT" VERSION_ID="21.02-snapshot" HOME_URL="https://openwrt.org/" …...
【编程基础知识】Mysql的各个索引数据结构及其适用场景
一、引言 在数据库的世界中，索引是提升查询速度的超级英雄。就像图书馔的目录帮助我们快速找到书籍一样，MySQL中的索引加速了数据检索的过程。本文将带你深入了解MySQL索引的多种数据结构、它们的适用场景以及如何巧妙地使用它们来优化性能。 二、索引…...
解决IDEA出现：java: 程序包javax.servlet不存在的问题
问题截图： 解决如下： 1. 点击文件——>项目结构 2. 点击库——>点击——>点击java 3. 找到Tomcat的文件夹，找到lib文件夹中的servlet-api.jar，点击确定 4. 选择要添加的模块 5. 点击应用——>确定...
Comfyui控制人物骨骼，细节也能完美调整！
前言 本文涉及的工作流和插件，需要的朋友请扫描免费获取哦~ 在我们利用Comfyui生成图像的工作中，是否常常因为人物的动作无法得到精确的控制而感到苦恼，生成出来的图片常常达不到自己心中满意的效果。 今天给大家分享的这个工作流ÿ…...
mysql学习教程，从入门到精通，SQL LEFT JOIN 语句（23）
1、SQL LEFT JOIN 语句 在SQL中，LEFT JOIN（也称为左连接）是一种将左表（LEFT JOIN左侧的表）的所有记录与右表（LEFT JOIN右侧的表）中匹配的记录结合起来的查询方式。如果左表中的记录在右表中没有…...
VSCode远程切换Python虚拟环境
VSCode远程切换Python虚拟环境 引言 在现代开发环境中，使用虚拟环境来管理项目依赖是一种普遍的做法。它不仅可以避免不同项目间的依赖冲突，还能让开发者更好地控制和隔离各个项目的环境。Visual Studio Code（VSCode）是一款广受…...
【CSS in Depth 2 精译_038】6.2 CSS 定位技术之：绝对定位
当前内容所在位置（可进入专栏查看其他译好的章节内容） 第一章 层叠、优先级与继承（已完结）第二章 相对单位（已完结）第三章 文档流与盒模型（已完结）第四章 Flexbox 布局（已…...
828 华为云征文｜华为 Flexus 云服务器搭建 SamWaf 开源轻量级网站防火墙
在当今数字化高速发展的时代，网络安全问题日益凸显。为了保障网站的稳定运行和数据安全，我们可以借助华为 Flexus 云服务器搭建 SamWaf 开源轻量级网站防火墙。这不仅是一次技术的挑战，更是为网站筑牢安全防线的重要举措。 一、华为 Flexus …...
基于二自由度汽车模型的汽车质心侧偏角估计
一、质心侧偏角介绍 在车辆坐标系中，质心侧偏角通常定义为质心速度方向与车辆前进方向的夹角。如下图所示，u为车辆前进方向，v为质心速度方向，u和v之间的夹角便是质心侧偏角。 质心侧偏角的作用有如下三点： 1、稳定性…...
前端html+css+js 基础总结
HTML 行级元素 标签分为行级元素与块级元素 行级元素占据区域由其显示内容决定，如span，img(图片)，<a></a>基本格式: <a href"链接" target"_blank"></a>用于跳转到其他网站，…...
若依VUE项目安全kind-of postcss vite漏洞扫描和修复
npm install unplugin-auto-import0.16.7 npm install vite3.2.11 升级vite、unplugin-auto-import npm install 报错New major version of npm available! 8.5.5 -> 10.8.3，使用命令npm install --force npm install --force...
C语言实现简单凯撒密码算法
**实验2：传统密码技术 【实验目的】 通过本次实训内容，学习常见的传统密码技术，通过编程实现简单代替密码中的移位密码算法，加深对传统密码技术的了解，为深入学习密码学奠定基础。【技能要求】 分析简单代替密码中的移…...
多态的使用和原理（c++详解）
一、多态的概念 多态顾名思义就是多种形态，它分为编译时的多态（静态多态）和运行时的多态（动态多态），编译时多态（静态多态）就是函数重载，模板等，通过不同的参数…...
OpenHarmony（鸿蒙南向开发）——小型系统内核（LiteOS-A）【Trace调测】
往期知识点记录： 鸿蒙（HarmonyOS）应用层开发（北向）知识点汇总 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~ 持续更新中…… 基本概念 Trace调测旨在帮助开发者获取内核的运行流程，…...
2026 年 30 个 MCP Server 实测评：Claude Code 集成效果与响应延迟对比数据
1. 30个MCP Server实测评背后的真实问题：Claude Code不是“插上就快”，而是“配错就崩” 我上线第三个内部MCP Server时，CI流水线里一个原本2秒完成的代码补全请求，突然卡在waiting for MCP response状态长达17秒。日志里没有报错，只有反复重试的HTTP 504。排查了两天，最…...
打卡信奥刷题（3286）用C++实现信奥题 P8929 「TERRA-OI R1」别得意，小子
P8929 「TERRA-OI R1」别得意，小子 题目背景 战至中途，蓝紫色天空瞬间变为黑压压一片，噬神者身上一些紫色外壳开始脱落，化为更小的蟒蛇，这些小家伙从出现开始便不要命的向你冲过来，刚清理掉这些小家伙&…...
【实战】Latex｜在保留ACM-Reference-Format格式的前提下，实现参考文献按引用顺序排列
1. 问题背景与核心痛点 当你使用ACM官方模板撰写论文时，参考文献格式要求必须采用ACM-Reference-Format样式。这个格式有个让人头疼的特性：它会强制按作者姓氏字母顺序排列参考文献，而不是按照文中实际引用顺序。想象一下，你精心设…...
初次使用 Taotoken 控制台的快速浏览与核心功能导引
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 初次使用 Taotoken 控制台的快速浏览与核心功能导引 当你注册并登录 Taotoken 平台后，首先进入的就是用户控制台。这个…...
3分钟掌握Typora LaTeX主题：用Markdown写出专业学术论文的终极指南
3分钟掌握Typora LaTeX主题：用Markdown写出专业学术论文的终极指南 【免费下载链接】typora-latex-theme 将Typora伪装成LaTeX的中文样式主题，本科生轻量级课程论文撰写的好帮手。This is a theme disguising Typora into Chinese LaTeX style. 项目地…...
从SSD1306手册到代码：手把手教你理解中景园OLED的IIC驱动底层逻辑
从SSD1306手册到实战：深度解析IC驱动OLED的底层逻辑 在嵌入式开发中，OLED显示屏因其高对比度、低功耗等特性广受欢迎。而SSD1306作为常见的OLED驱动芯片，其IC接口驱动方式尤为开发者关注。本文将带您从SSD1306数据手册出发，深入理…...
终极解决方案：3分钟破解RPG Maker加密壁垒，让游戏资源触手可及
终极解决方案：3分钟破解RPG Maker加密壁垒，让游戏资源触手可及 【免费下载链接】RPGMakerDecrypter Tool for decrypting and extracting RPG Maker XP, VX and VX Ace encrypted archives and MV and MZ encrypted files. 项目地址: https://gitcode.…...
从零开始用vnpy搭建你的第一个量化交易机器人（保姆级Python教程）
从零开始用vnpy搭建你的第一个量化交易机器人（保姆级Python教程） 第一次接触量化交易时，我被那些复杂的术语和代码吓得不轻。直到发现vnpy这个Python框架，才真正找到了入门的方向。vnpy就像是为Python开发者量身定制的量化交易工具…...
Discovery与Kubernetes深度集成：实现容器化微服务注册发现的终极指南
Discovery与Kubernetes深度集成：实现容器化微服务注册发现的终极指南 【免费下载链接】discovery A registry for resilient mid-tier load balancing and failover. 项目地址: https://gitcode.com/gh_mirrors/discov/discovery 在当今云原生时代࿰…...
AI+STEAM教育方案：基于边缘计算的智能硬件与算法部署实践
1. 项目概述：当AI遇见STEAM，教育如何被重新定义作为一名在教育和科技交叉领域摸爬滚打了十来年的从业者，我亲眼见证了从多媒体教室到在线教育平台，再到如今AI深度介入的整个变迁过程。最近几年，一个词被反复提及&#…...