03-CSS基础选择器

3.1 CSS基础认知🍎

3.1.1 👁️‍🗨️CSS概念

CSS:层叠样式表(Cascading style sheets),为网页标签增加样式表现的

语法格式:

选择器{<!-- 属性设置 -->属性名:属性值;  <!--每一个键值对属性写完之后都要加 英文 `;`g隔开-->
}
比如:
p{color:red;
}

CSS常见属性

作用

color

文字颜色

background-color

背景颜色

background-image

背景图片

font-size

字体大小

width

宽度

height

高度

3.1.2 👣CSS的引入方式

1. 内嵌式

写在style标签,style标签一般在head中,title下面

    <style>/* 内嵌式 */p{/*属性设置==》 属性名:属性值  */color: red;/* 文字大小 */font-size: 50px;/* 背景颜色 */background-color: yellow;/* 宽度 高度 *//* width: 60px;height: 600px; */}</style>
<p>你好!世界!</p>

2. 外联式

写在一个单独的.css文件中,通过`link`标签进行导入

    <!-- link 标签 导入外联的css样式 --><link rel="stylesheet" href="./css/01-css.css">
<div> 这是div标签-演示外联式CSS </div>

3. 内联式

直接写在标签的style属性中

<!-- 内联式:直接写在标签里面 -->
<span  style="color: springgreen; font-size: 90px;" >这是span标签-用来演示内联式</span>

3.2 基本选择器🌶️

3.2.1 🏀标签选择器

通过标签名去控制对应标签的样式

标签选择器是一次性控制整个页面对应的标签

语法:

标签名{属性:属性值
}
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 20px;}</style>
</head>
<body><!-- 演示标签选择器 --><p>这是span标签-用来演示标签选择器</p><p>p1 </p><p>p2 </p><p> p3</p><p> p4</p><div><ol><li><p>这是嵌套的p标签</p></li></ol></div>
</body>

3.2.2 🎉类选择器

通过类名,找到页面中所有带有这个类名的标签,设置样式

class="类名"

语法:

.类名{属性:值
}
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类选择器 .类名 */.xzq03{color: aqua;font-size: 30px;}.p03{background-color: red;}</style>
</head>
<body><p> 这是第一个p标签</p><p class="xzq03"> 这是第二个p标签,有类名的p标签</p><!-- 多个类名 --><p class="xzq03 p03"> 这是第三个p标签,有类名的p标签</p><span class="xzq03 span03">这是span标签</span><div class="xzq03">这是div标签</div>
</body>

注意点:

  1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
  2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名,类名之间以空格隔开
  4. 类名可以重复,一个类选择器可以同时选中多个标签

3.2.3 🎿id选择器

通过id属性值,找到页面中带有这个id属性值的标签,设置样式

语法:

#id名{属性:值
}
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#ix{font-size: 40px;}#sx{background-color: red;}</style>
</head>
<body><p id="ix sx">这是p标签-测试id选择器</p><p id="ix">这是p标签-测试id选择器</p><span id="ix">这是span标签</span><div id="ix">这是div</div>
</body>

3.2.4 🔮通配符选择器

以通配符“*”直接选择设置整个页面的标签

语法:

*{属性:值
}
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: red;font-size: 40px;}</style>
</head>
<body><p>111</p><p>222</p><span>这是span</span><div>这是div</div>
</body>

3.3 CSS样式层叠🍖

一个标签有多个相同的属性,比如:设置两个 color,最后就会覆盖第一个,一最后的样式为准

<!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>p{/* 后面的属性会覆盖掉前面的属性 */font-size: 60px;font-size: 20px;color: red;color: violet;}</style>
</head>
<body><p>这是p标签</p>
</body>
</html>

3.4 字体和文本的基础样式🍊

3.4.1 🎯字体样式

  1. 字体大小:`font-size`

格式:

font-size:数值+px
  • 要跟px单位,不跟没有效果
  1. 字体粗细、倾斜:`font-weight`、`font-style`
<!DOCTYPE html>
<html lang="en">
<head><style>p{color: red;/* 字体加粗 */font-weight: bold;}div{font-weight: 900;font-style: oblique;}span{font-weight: 100;font-style: italic;}</style>
</head>
<body><p>这是p标签</p><div>这是div标签</div><span>这是span</span>
</body>
</html>
  1. 主体加粗

关键字:

  • 正常:normal
  • 加粗:bold

数值:

  • 100~900 (9个级别,依次递增)
  • 正常:400
  • 加粗:700
  1. 字体倾斜
  • 正常:normal(默认值)
  • 倾斜:italic
  1. 字体选择:`font-family`
<!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>p{/* font-family:微软雅黑,黑体,宋体; */font-family:Georgia, 'Times New Roman', Times, serif;}</style>
</head>
<body><p>这是一个p标签</p><div>这是div</div>
</body>
</html>

常见取值:具体字体1,具体字体2,具体字体3,具体字体4,...,

  • 具体字体:"Microsoft YaHei"、微软雅黑、黑体、宋体等……
  • 字体系列:sans-serif、serif、monospace等……

注意:

  1. 从左往右按照顺序查找
  2. 如果字体名称中存在多个单词,推荐使用引号包裹最后一项
  3. 尽量使用系统常见自带字体
  1. font连写

直接将字体系列的 font...属性写在一起

<!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>p{/* font-size: 40px;font-weight: 900;font-style: italic; *//* font 连写 *//* font : style weight size family;连写的顺序 *//* font连写:- 按照顺序写- 只能省略前两个属性(style、weight)*/font: italic 900 90px 黑体 ;/* font: 900px 宋体; */}</style>
</head>
<body><p>这是p标签</p>
</body>
</html>

注意:

  1. font连写时按照顺序写:`font : style weight size family;`
  2. font连写可以省略前2个属性(style、weight)

3.4.2 🏓文本样式

  1. 首先缩进:`text-indent`
  • 可以跟 数值px
  • 可以指定字:em(一个em 表示一个字大小)
  1. 对齐方式:`text-align`
  • 居中:center
  • 右对齐:right
  • 左对齐:left
  1. 文本修饰:`text-decoration`
  • underline:下划线
  • line-through:删除线
  • overline:上划线
  • none:去掉所有文本修饰
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本样式</title><style>p{/* 首先缩进:text-indentpx:像素值*//* text-indent: 40px; */text-indent: 2em;/*em:一个字*//* 对齐:居中:center 右对齐:right左对齐:left*/text-align: left;/* 文本修饰:text-decorationunderline:下划线line-through:删除线overline:上划线none:去掉所有文本修饰*/text-decoration: underline;}div{text-decoration:line-through;}span{text-decoration: overline;}.p1{text-decoration: none;}</style>
</head><body><p class="p1">前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。</p><p>前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p><div>这是div标签</div><br><span>这是span</span>
</body></html>

3.4.3 🎗️行高

每一行字体所占的高度(`line-height`

行高取值:

  • 数值+px
  • em(一个em就表示一个字的大小)
  • font-size的倍数(一般情况下,浏览器默认字体大小是 16px)

可以font连写:font : style weight size/line-height family ;

<!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>/* 行高 */p{/* line-height: 30px; *//* line-height: 3em; */line-height: 4;/*谷歌默认16px */}   </style>
</head>
<body><p>前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p>
</body>
</html>

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

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

相关文章

阿里云C++二面面经

1.智能指针 1、shared_ptr 原理:shared_ptr是基于引用计数的智能指针,用于管理动态分配的对象。无论 std::shared_ptr 存储在堆区还是栈区,它所指向的内存块始终存储在堆区。这是因为 std::shared_ptr 是用于管理动态分配的内存的智能指针,它需要存储在堆区,以便进行引用…

直流电动机四象限运行控制变流器设计

摘 要 节能和效率是工业经济发展的主题&#xff0c;电机在各行各业都是主要的动力来源&#xff0c; 直流电机以其控制简单&#xff0c;效率高&#xff0c;功率密度大等优势脱颖而出。基于直流电动机四象限运行控制变流器应用广泛&#xff0c;比如电子设备、电机控制、工业等行…

Spring Cloud Netflix微服务组件-Eureka

CAP理论 分区容忍是能容忍一个或一部分节点挂掉后&#xff0c;整体系统也能正常工作&#xff08;就是别的节点还是活着的&#xff09;&#xff0c;所以分布式系统中P是必须要有的。比如数据库主从架构&#xff0c;主从两个节点之间需要数据同步&#xff0c;主挂了&#xff0c;…

Mysql中的索引与事务和B树的知识补充

索引与事务和B树的知识补充 一.索引1.概念2.作用3.使用场景4.使用 二.事务1.为什么使用事务2.事务的概念3.使用3.1脏读问题3.2不可重复读3.3 幻读问题3.4解决3.5 使用代码 三.B树的知识补充1.B树2.B树 一.索引 1.概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记…

Git常用配置

git log 美化输出 全局配置参数 git config --global alias.lm "log --no-merges --color --dateformat:%Y-%m-%d %H:%M:%S --authorghost --prettyformat:%Cred%h%Creset - %Cgreen(%cd)%C(yellow)%d%Cblue %s %C(bold blue)<%an>%Creset --abbrev-commit"…

程序员一般从什么平台兼职接私活?国内外主流9大平台汇总!

我想对于有一定工作经验的工程师来说&#xff0c;肯定听说过或者切身经历过公司裁员、公司倒闭、甚至清退年龄稍大的工程师等一系列负面情况。 其实我们作为员工来说&#xff0c;面对这些打击&#xff0c;我们能争取到的权益是比较少的&#xff0c;即使争取到了一些权益或补偿…

如何实现MQTT协议数据传输?

如何实现MQTT协议数据传输&#xff1f; 随着物联网技术的不断发展&#xff0c;越来越多的设备和应用需要实现互联互通。而MQTT作为一种轻量级的发布/订阅消息传输协议&#xff0c;在物联网领域应用广泛&#xff0c;成为了许多设备之间数据交互的首选。蓝蜂物联网推出的MQTT网关…

【功能栏】基于session的模拟短信注册功能

框架&#xff1a; spring boot mybatis-plus 目录 1.创建user表 ​编辑2. mybatis-plus插件 3.导入相关依赖 4.配置文件 5.前端代码 register.html style.css 6.后端代码 entity层 mapper层 sevice层 业务层接口 业务层实现类 controller层 7.调试 1. 未输…

unity UGUI无限循环滚动居中

最近在做一个ui循环滚动的功能&#xff0c;网上找了半天脚本感觉都和我实际需求不太符合&#xff0c;自己花费一些时间完成了这个功能记录一下。下面开始正题 &#xff0c;我是采用unity自带组件Scroll View来完成&#xff0c;首先设置Scroll View如下图 面板层级结构如下 然…

C语言每日一题(29)合并两个有序链表

力扣网 21合并两个有序链表 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 思路分析 最基本的一种思路就是&#xff0c;遍历两个链表&#xff0c;将对应结点的值进行比较&#xff0c;题目要求是要升序排…

二部图问题

目录 一、介绍 二、染色算法的实现 三、无权二部图中的最大匹配 四、有权二部图中的最大匹配 五、稳定婚配问题 一、介绍 二部图是一种特殊的图&#xff0c;其中所有的节点可以被分成两个不相交的集合&#xff0c;使得图中的每条边连接的两个节点分属于不同的集合。换句话…

什么是GIL锁,有什么作用?python的垃圾回收机制是什么样的?解释为什么计算密集型用多进程,io密集型用多线程。

1 什么是gil锁&#xff0c;有什么作用&#xff1f; 2 python的垃圾回收机制是什么样的&#xff1f; 3 解释为什么计算密集型用多进程&#xff0c;io密集型用多线程。 1 什么是gil锁&#xff0c;有什么作用&#xff1f; 1 GIL&#xff1a;Global Interpreter Lock又称全局解释器…

基于安卓android微信小程序的食谱大全系统

项目介绍 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对食谱大全进行需求分析&#xff0c;得出食谱大全主要功能。接着对食谱大全进行总体设计和详细设计。总体设…

源码升级gcc

wget https://ftp.gnu.org/gnu/gcc/gcc-8.1.0/gcc-8.1.0.tar.gztar -xzf gcc-8.1.0.tar.gzcd gcc-8.1.0/打开/contrib/download_prerequisites&#xff0c;查看依赖的库 wget http://mirror.linux-ia64.org/gnu/gcc/infrastructure/mpfr-3.1.4.tar.bz2 & wget http://mir…

实现高值医疗耗材智能化管理的RFID医疗柜解决方案

一、行业背景 医疗物资管理面临着一系列问题&#xff0c;如高值耗材种类激增导致准入标准弱化、信息追踪困难、管理责任不明确等&#xff0c;医院内部设备、财务和临床科室相互独立&#xff0c;兼容性不佳&#xff0c;高值耗材储备不足&#xff0c;缺乏合理的预警机制&#xf…

Java 21:最新特性、性能改进和语言发展

文章目录 模式匹配和模式变量新的记录类型生产者接口本地类型推断的扩展新的垃圾收集器动态CDS档案G1垃圾收集器的增强Java语言的持续发展性能改进和JEPJava 21的部署和使用Java 21的生态系统结语 &#x1f389;欢迎来到Java学习路线专栏~Java 21&#xff1a;最新特性、性能改进…

Postman接口Mock Servier服务器

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 应用场景&#xff1a;后端的接口还没有开发完成&#xff0c;前端的业务需要调用后端的接口&#xff0c;可以使用mock模拟。 一…

Android高级实践分享

以下是我学习过程中&#xff0c;觉得比较好的Android进阶高级实践&#xff0c;分享给大家&#xff0c;可能有些东西差异化比较大了&#xff0c;但是我也想经过这些实践&#xff0c;踩踩坑。等我搞完&#xff0c;给大家出一下实践教程 Android进阶之旅&#xff1a; https://ww…

终于有人把VMware虚拟机三种网络模式讲清楚了!

前段时间VMware更新了&#xff0c;你用上最新版了吗&#xff1f; 有几个网工在操作中遇到过各种各样的问题。 比如说由于公司服务器重启导致出现下面的问题&#xff1a;在Xshell里连接虚拟机映射时连接失败&#xff1b;能够连接上虚拟机的映射地址&#xff0c;但git pull时报…