CSS入门

文章目录

  • CSS入门
  • 一、CSS概述
    • 1、概述
    • 2、CSS的作用
    • 3、初体验
    • 4、CSS基础语法
    • 4、HTML引入CSS
  • 二、选择器 ⭐️⭐️⭐️
    • 1、基本选择器
    • 2、扩展选择器
    • 3、超链接选择器
  • 三、样式权重问题
    • 1、权重计算规则
    • 2、权重示例
    • 3、具体示例
    • 4、 !important
  • 四、CSS常用样式
    • 1、字体和文本属性
    • 2、背景属性
    • 3、显示属性
    • 4、浮动属性
  • 五、盒子模型

CSS入门

一、CSS概述

1、概述

CSS（Cascading Style Sheet）层叠样式表，用于美化页面

  • 层叠样式：对同一个标签，添加多个不同的样式，所有样式会叠加在一起展示出效果。

2、CSS的作用

HTML 标签也有属性，为什么还要 CSS ？

  • CSS 可以给任意标签添加样式（可以实现 HTML 做不到的效果）
  • 解耦（让 HTML 专注于网页结构搭建，CSS 专注于样式效果）

CSS 实现了样式与内容的分离，提高了显示效果和样式的复用性。

3、初体验

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS初体验</title><!-- CSS样式 --><style>/* 一号标题蓝色 */h1 {color : blue;}/* div标签内容绿色，大小40px */div {color: green;font-size: 40px;}/* span标签内容红色，大小30px */span {color : red;font-size: 30px;}</style></head><body><h1>标题</h1><div>div1</div><div>div2</div><span>span1</span><span>span2</span></body></html>

在这里插入图片描述

4、CSS基础语法

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS基础语法</title><style>span {color : red;border: 1px solid blue;font-size: 50px}</style></head><body><span style="color: red;font-size: 50px">span</span><div style="border: 10px green dashed;font-size: 50px">div</div></body>
</html>

CSS 基本语法：

  • 样式名 和 样式值 之间 以 冒号 分隔。
  • 一个样式名 可以跟 多个样式值，以 空格 分隔。
  • 多个样式之间，以 分号 分割。

4、HTML引入CSS

CSS有自己单独的语法，但是必须要引入到HTML中才能使用。一般有以下三种方式：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML引入CSS</title><!-- 1. 内部样式：通过<style>标签指定CSS样式（只对当前HTML生效） --><style>span {font-size: 40px;}</style><!--2. 外部样式：单独的编写一个CSS文件，通过<link>标签引入到HTML中（复用性更好，其他HTML也可以引入）1）rel  表明引入的是一个css文件2）href 指定引入的css文件的位置（支持 远程路径 和 本地路径）--><link rel="stylesheet" href="./commonCss.css"></head><body><!-- 3. 行内样式：每个标签都有style属性，可以指定CSS样式（只对当前标签生效） --><span style="font-size: 30px;color: red">span1</span> <br><span>span2</span> <br><span>span3</span> <br></body>
</html>

/* 这是上面引入的commonCss.css */
span {color : blue;font-size: 150px;
}
  • 优先级：
    • 行内 > 内部 = 外部 （优先级低的样式会被优先级高的覆盖，一样的优先级看先后）
    • 浏览器加载网页从上至下加载，属性相同会覆盖（后面的覆盖前面的），不相同会叠加。
  • 位置：
    • style标签和link标签可以放在html中任意位置，一般放head标签内。

二、选择器 ⭐️⭐️⭐️

选择器 selector：

  • 格式：选择器 {css样式}
  • 作用：通过选择器，选中指定的标签，为选中的标签添加css样式

1、基本选择器

包括 标签选择器、id选择器、class选择器

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>基本选择器</title><style>/* 1. 标签选择器：选中指定标签（格式：标签名） */div {color: red;font-size: 30px;}/* 2. id选择器：选中指定id的标签（格式：#id） */#boss{color: blue;}/* 3. class选择器：选中指定class的标签（格式：.class值） */.female{color: green;}.hero{font-size: 50px;}</style></head><body><div>div</div><!-- 每个标签都有id属性，id值在当前html中唯一 --><span id="boss" class="female">灭霸</span><!-- 每个标签都有class属性，class值在当前html中可以重复 --><span class="female">迪丽热巴</span><span class="female">古力娜扎</span><!-- class属性可以设置多个值，以 空格 分隔 --><span class="hero female">黑寡妇</span><span class="hero male">钢铁侠</span><span class="hero male">蜘蛛侠</span></body>
</html>

在这里插入图片描述

2、扩展选择器

扩展选择器：基本选择器延伸出来的选择器，在某些场景下，用基本选择器太麻烦。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>扩展选择器</title><style>/* 1. 子层选择器：选中父选择器中的所有子孙选择器（格式：父选择器 子选择器） */#mydiv span {color: red;}/* 2. 下级选择器：选中父选择器中的下一级子选择器（格式：父选择器 > 子标签） */#mydiv > span {font-size: 50px;}/* 3. 组合选择器：选中多个选择器（格式：选择器1, 选择器2...） */h1, h2, h3 {color: blue;}/* 4. 属性选择器：选中符合属性值规定的选择器（格式：选择器[属性名=属性值]） */input[type = 'text'] {background-color: pink;}</style></head><body><div id="mydiv"><span>div下的span1</span><div><span>div下的div下的span</span></div><span>div下的span2</span></div><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><input type="text" placeholder="文本"><input type="password" placeholder="密码"><input type="text" placeholder="文本"></body>
</html>

在这里插入图片描述

3、超链接选择器

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>超链接选择器</title><style>/* 所有未被访问的超链接 */a:link{color: green;}/* 鼠标悬停在超链接上时的状态 */a:hover{color: yellow;}/* 超链接在被点击并处于活动状态时的样式 */a:active{color: red;}/* 已被访问过的超链接 */a:visited{color: grey;}</style></head><body><a href="http://www.baidu.com">百度一下，你就完蛋</a> <br><a href="http://www.baidu.com">百度一下，你就完蛋</a> <br><a href="http://www.baidu.com">百度一下，你就完蛋</a> <br></body>
</html>

三、样式权重问题

当多个规则适用于同一个元素时，CSS 会根据权重来确定使用哪个样式。权重较高的样式会覆盖权重较低的样式。

  • 权重由选择器的类型和数量决定。

1、权重计算规则

CSS 的权重可以分为四个部分，通常用四个数字表示（a, b, c, d）：

  1. a：行内样式的数量（例如：style="..."）。行内样式的权重最高。
  2. b：ID 选择器的数量（如 #id）。
  3. c：类选择器、伪类选择器、属性选择器的数量（如 .class、:hover、[type="text"]）。
  4. d：元素选择器、伪元素选择器的数量（如 div、p、::before）。

2、权重示例

以下是一些选择器及其对应的权重值：

style="color:blue;"	 (1, 0, 0, 0)	权重 1000
#header				 (0, 1, 0, 0)	权重 100
.menu				 (0, 1, 0, 0)	权重 100
div					 (0, 1, 0, 0)	权重 100

3、具体示例

/* 权重 100 */
#main {background-color: red;
}/* 权重 10 */
.container {background-color: blue;
}/* 权重 1 */
div {background-color: green;
}/* 行内样式，权重 1000 */
<div id="main" style="background-color: yellow;">Hello</div>

在这个例子中，div 的背景颜色将被黄色覆盖，因为 行内样式 的权重最高。

4、 !important

使用 !important 可以强制某个规则获得更高的优先级，但应谨慎使用，因为这会影响代码的可维护性。

/* 权重 100 */
#main {background-color: red !important; /* 将覆盖其他所有相同元素的颜色样式 */
}

四、CSS常用样式

1、字体和文本属性

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>字体和文本属性</title><style>div {/* 字体颜色 */color : green;/* 字体大小 */font-size: 20px;/* 行高 */line-height: 40px;/* 字体加粗 */font-weight: bold;/* 字体格式：楷体 */font-family: Kai,serif;}a {/* 倾斜 */font-style: italic;/* 隐藏下划线 */text-decoration: none;}</style></head><body><div><p><a href="#"> 学习的误区：</a><br/>眼睛：看了一遍记住了<br/>耳朵：听了一遍明白了<br/>脑子：想了一遍搞懂了<br/>手：你们会个屁！^_^ <br></p></div></body>
</html>

在这里插入图片描述

2、背景属性

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>背景属性</title><style>body{background-color: pink;background-image: url("../img/a.jpg");/* 背景图片不重复显示。这意味着当页面大小大于背景图片时，背景图片只会显示一次，而不会平铺 */background-repeat: no-repeat;/* 背景图片的位置偏移，水平方向偏移 10px，垂直方向偏移 20px */background-position: 10px 20px;}</style></head><body></body>
</html>

在这里插入图片描述

3、显示属性

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>显示属性</title><style>span{/* 自动换行 */display: block;}div{/* 不自动换行 */display: inline;}ul{/* 隐藏 */display: none;}</style></head><body><span>换行span1</span><span>换行span2</span><div>不换行div1</div><div>不换行div2</div><ul><li>美的</li><li>苏宁</li><li>格力</li></ul></body>
</html>

在这里插入图片描述

4、浮动属性

打破常规，让div也能变小（实际大小跟 宽和高）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>浮动属性</title><style>.box {width: 150px;height: 150px;border: 1px solid red;text-align: center;/* 向右浮动：元素将会脱离正常的位置，向右浮动，直到碰到父容器的边界或者其他浮动元素为止 */float: right;}</style></head><body><div class="box" id="long">左青龙</div><div class="box" id="hu">右白虎</div><div class="box">最后砍成米老鼠</div></body>
</html>

在这里插入图片描述

五、盒子模型

在 html 中，所有的标签都可以看成一个盒子。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>盒子模型</title><style>div {/* 边框 */border: 1px solid green;/* 宽 */width: 400px;/* 高 */height: 200px;/* 内边距：边框到内容的距离 */padding-left: 20px;/* 外边距：边框到外标签的距离 */margin: 10px;}</style></head><body><div>窗前明月光</div></body>
</html>

在浏览器 F12 可以看一下

在这里插入图片描述

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

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

相关文章

2530 电力电子技术

2530 电力电子技术

1.晶闸管 视频链接&#xff1a;2.3半控型器件-晶闸管_哔哩哔哩_bilibili 可参考文章链接&#xff1a;电力电子技术笔记&#xff08;3&#xff09;——晶闸管_双晶体管模型正反馈-CSDN博客 半控型器件&#xff1a;门极只有在导通时有用&#xff0c;在关闭时没有用 2.Boost升压…
阅读更多...
【C++】二叉搜索树+变身 = 红黑树

【C++】二叉搜索树+变身 = 红黑树

&#x1f680;个人主页&#xff1a;小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言一、定义与性质二、红黑树节点的定义三、新增节点插入四、验证红黑树五、AVL树和红黑树比较 前言 本文仅适合了…
阅读更多...
[3.4]【机器人运动学MATLAB实战分析】PUMA560机器人逆运动学MATLAB计算

[3.4]【机器人运动学MATLAB实战分析】PUMA560机器人逆运动学MATLAB计算

PUMA560是六自由度关节型机器人，其6个关节都是转动副，属于6R型操作臂。各连杆坐标系如图1，连杆参数如表1所示。 图1 PUMA560机器人的各连杆坐标系 表1 PUMA560机器人的连杆参数 用代数法对其进行运动学反解。具体步骤如下： 1、求θ1 PMUMA56
阅读更多...
MFC有三个选项：MFC ActiveX控件、MFC应用程序、MFC DLL，如何选择？

MFC有三个选项：MFC ActiveX控件、MFC应用程序、MFC DLL，如何选择？

深耕AI&#xff1a;互联网行业 算法研发工程师 ​ 目录 MFC ActiveX 控件 控件的类型 标准控件 自定义控件 ActiveX控件 MFC ActiveX控件 标准/自定义控件 MFC ActiveX控件分类 3种MFC如何选择&#xff1f; MFC ActiveX控件 MFC 应用程序 MFC DLL 总结 举例说明…
阅读更多...
低照度图像增强网络——EnlightenGAN

低照度图像增强网络——EnlightenGAN

系列文章目录 GAN生成对抗网络介绍https://blog.csdn.net/m0_58941767/article/details/142704354?spm1001.2014.3001.5501 循环生成对抗网络——CycleGANhttps://blog.csdn.net/m0_58941767/article/details/142704671?spm1001.2014.3001.5501 目录 系列文章目录 前言 …
阅读更多...
链表排序

链表排序

目录 插入排序 LeetCode147 对链表进行插入排序 归并排序 LeetCode148 排序链表 插入排序 LeetCode147 对链表进行插入排序 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}…
阅读更多...
深度学习中的优化方法(Momentum,AdaGrad,RMSProp,Adam)详解及调用

深度学习中的优化方法(Momentum,AdaGrad,RMSProp,Adam)详解及调用

深度学习中常用的优化方法包括啦momentum(动量法),Adagrad(adaptive gradient自适应梯度法),RMSProp(root mean square propagation均方根传播算法),Adam(adaptive moment estimation自适应矩估计法) 指数加权平均算法 所谓指数加权平均算法是上述优化算法的基础,其作用是对历…
阅读更多...
word无法复制粘贴

word无法复制粘贴

word无法复制粘贴 使用word时复制粘贴报错 如下&#xff1a; 报错&#xff1a;运行时错误‘53’&#xff0c;文件未找到&#xff1a;MathPage.WLL 这是mathtype导致的。 解决方法 1&#xff09;在mathtype下载目录下找到"\MathType\MathPage\64"下的"mathpa…
阅读更多...
Python并发编程挑战与解决方案

Python并发编程挑战与解决方案

Python并发编程挑战与解决方案 并发编程是现代软件开发中的一项核心能力&#xff0c;它允许多个任务同时运行&#xff0c;提高程序的性能和响应速度。Python因其易用性和灵活性而广受欢迎&#xff0c;但其全局解释器锁&#xff08;GIL&#xff09;以及其他特性给并发编程带来了…
阅读更多...
python数据分析与可视化工具介绍-matplotlib库

python数据分析与可视化工具介绍-matplotlib库

众所周知&#xff0c;python的数据分析库主要是numpy&#xff0c;pandas&#xff0c;和matplotlib&#xff0c;而前面两个主要是数据处理工具库&#xff0c;最后一个才是真正的作图展示工具库。本节来学习一下matploatlib工具库的使用。 Matplotlib常用绘图函数 pyplot简介 m…
阅读更多...
Oracle中TRUNC()函数详解

Oracle中TRUNC()函数详解

文章目录 前言一、TRUNC函数的语法二、主要用途三、测试用例总结 前言 在Oracle中&#xff0c;TRUNC函数用于截取或截断日期、时间或数值表达式的部分。它返回一个日期、时间或数值的截断版本&#xff0c;根据提供的格式进行截取。 一、TRUNC函数的语法 TRUNC(date) TRUNC(d…
阅读更多...
字符编码发展史5 — UTF-16和UTF-32

字符编码发展史5 — UTF-16和UTF-32

上一篇《字符编码发展史4 — Unicode与UTF-8》我们讲解了Unicode字符集与UTF-8编码。本篇我们将继续讲解字符编码的第三个发展阶段中的UTF-16和UTF-32。 2.3. 第三个阶段 国际化 2.3.2. Unicode的编码方式 2.3.2.2. UTF-16 UTF-16也是一种变长编码&#xff0c;对于一个Unic…
阅读更多...
1、如何查看电脑已经连接上的wifi的密码？

1、如何查看电脑已经连接上的wifi的密码？

在电脑桌面右下角的如下位置&#xff1a;双击打开查看当前连接上的wifi的名字&#xff1a;ZTE-kfdGYX-5G 按一下键盘上的win R 键, 输入【cmd】 然后&#xff0c;按一下【回车】。 输入netsh wlan show profile ”wifi名称” keyclear : 输入完成后&#xff0c;按一下回车&…
阅读更多...
浏览器前端向后端提供服务

浏览器前端向后端提供服务

WEB后端向浏览器前端提供服务是最常见的场景&#xff0c;前端向后端的接口发起GET或者POST请求&#xff0c;后端收到请求后执行服务器端任务进行处理&#xff0c;完成后向前端发送响应。 那浏览器前端向后端提供服务是什么鬼&#xff1f; 说来话长&#xff0c;长话短说。我在人…
阅读更多...
AFSim仿真系统 --- 系统简解_06 平台及平台类型

AFSim仿真系统 --- 系统简解_06 平台及平台类型

平台及平台类型 在AFSIM模拟中&#xff0c;当在被模拟的场景中定义平台时&#xff0c;创建仿真实体&#xff08;如车辆和结构&#xff09;。 AFSIM是一个用于创建仿真的对象框架&#xff0c;而平台封装了对象的原则身份或定义。 平台可以拥有系统&#xff08;或平台部分&#x…
阅读更多...
自然语言处理-语言转换

自然语言处理-语言转换

文章目录 一、语言模型二、统计语言模型1.含义与方法2.存在的问题 三、神经语言模型1.含义与方法2.one-hot编码3.词嵌入-word2vec4.模型的训练过程 四、总结 自然语言处理&#xff08;NLP&#xff09;中的语言转换方法主要涉及将一种形式的语言数据转换为另一种形式&#xff0c…
阅读更多...
[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

场景 在开发Cocoa程序时&#xff0c;由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法&#xff1f; 说明 开发界面的时候&#xff0c;经常是需要在子界面里传递数据给主界面&#xff0…
阅读更多...
Windows 搭建 Gitea

Windows 搭建 Gitea

一、准备工作 1. 安装 Git&#xff1a;Gitea 依赖 Git 进行代码管理&#xff0c;所以首先需要确保系统中安装了 Git。 下载地址&#xff1a;https://git-scm.com/downloads/win 2. 安装数据库&#xff08;可选&#xff09; 默认情况下&#xff0c;Gitea 使用 SQLite 作为内…
阅读更多...
Nginx的基础讲解之重写conf文件

Nginx的基础讲解之重写conf文件

一、Nginx 1、什么是nginx&#xff1f; Nginx&#xff08;engine x&#xff09;是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。 2、用于什么场景 Nginx适用于各种规模的网站和应用程序&#xff0c;特别是需要高并发处理和负载均衡的场…
阅读更多...
微信步数C++

微信步数C++

题目&#xff1a; 样例解释&#xff1a; 【样例 #1 解释】 从 (1,1) 出发将走 2 步&#xff0c;从 (1,2) 出发将走 4 步&#xff0c;从 (1,3) 出发将走 4 步。 从 (2,1) 出发将走 2 步&#xff0c;从 (2,2) 出发将走 3 步&#xff0c;从 (2,3) 出发将走 3 步。 从 (3,1) 出发将…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023