初级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调测旨在帮助开发者获取内核的运行流程，…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...