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

CSS3笔记

news 2025/5/8 19:35:15

文章目录

  • 1.CSS的概念
  • 2.CSS的引入方式
  • 3.选择器
    • 3.1基础选择器
      • 3.1.1标签选择器
      • 3.1.2类选择器
      • 3.1.3id选择器
      • 3.1.4通配符选择器
  • 4.画盒子
  • 5.文字控制属性
    • 5.1 字体大小-`font-size`
    • 5.2 字体粗细-`font-weight`
    • 5.3 字体倾斜-`font-style`
    • 5.4 行高-`line-height`
    • 5.5 字体族-`font-family`
    • 5.6 字体复合属性-`font`
    • 5.7 文本缩进-`text-indent`
    • 5.8文本对齐-`text-align`
    • 5.9 修饰线-`text-decoration`
    • 5.10 颜色-`color`

1.CSS的概念

层叠样式表:(Cascading Style Sheets,缩写CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)
书写位置:title标签下方添加style双标签,style标签里面书写CSS代码

<title></title>
<style>
CSS代码
</style>

注意:CSS代码包括属性名:属性值,属性名和属性值要成对出现(键值对)

2.CSS的引入方式

  1. 内部样式表
  • CSS代码写在style标签里面
    ![[Pasted image 20250411132948.png]]
  1. 外部样式表
  • CSS代码写在单独的CSS文件中(.css)
  • 在HTML中使用link标签引入(link标签也写在title标签下方)
<link rel = "stylesheet" href = "./my.css">

![[Pasted image 20250411132828.png]]

rel属性是关系的意思,stylesheet表示样式表,href属性写css样式表的文件路径

  1. 行内样式
  • CSS代码写在标签的style属性值里()
<div style = "color : red;">这是div标签</div>

一般配合JavaScript使用

3.选择器

作用:查找标签,设置样式

3.1基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

3.1.1标签选择器

使用标签名作为选择器-选中同名标签设置相同的样式
![[Pasted image 20250411134608.png]]

特点:选中同名标签设置相同的样式,无法差异化同名标签的样式

3.1.2类选择器

作用:查找标签,差异化设置标签的显示效果
使用类选择器的步骤:

  • 定义类选择器-.类名
  • 使用类选择器-标签添加`class = “类名”``
    ![[Pasted image 20250411135347.png]]

当同时使用两个类选择器时,代码的书写方式:

  .setcolor{color:red;}.setsize{font-size: 30px;}<div class="setcolor setsize">这是div标签</div>

注意:

  • 类名自定义,不用用纯数字或中文,尽量用英文命名
  • 一个类选择器可供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开
  • 类名需要见名知意,多个单词可以用,多个单词之间可以用-连接

3.1.3id选择器

作用:查找标签,差异化设置标签的显示效果
场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式
id选择器的使用步骤:

  • 定义id选择器-#id名
  • 使用id选择器-标签添加id="id名"
    ![[Pasted image 20250411140811.png]]

注意:同一个id选择器在一个页面只能使用一次

3.1.4通配符选择器

作用:查找页面所有标签,设置相同样式
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

 * {CSS代码
}

4.画盒子

使用合适的选择器画盒子
属性:

  1. width-宽度
  2. height-高度
  3. background-color-背景色
    ![[Pasted image 20250415083736.png]]

5.文字控制属性

5.1 字体大小-font-size

属性值:文字尺寸,PC网页端最常用的单位px,属性值必须有单位px否则不生效
注意:浏览器默认的字体大小为16px
![[Pasted image 20250415090434.png]]

5.2 字体粗细-font-weight

属性值:

  • 数字(开发使用)-正常为400,加粗为700
  • 关键字-正常为normal,加粗为bold
<title>Document</title><style>/* 对h3去除加粗效果 */h3 {font-weight: 400;}/* 对p标签加上加粗效果 */p {font-weight: 700;}</tyle>
</head>
<body><h3>h3标签</h3><p>这是p标签</p>
</body>

5.3 字体倾斜-font-style

作用:清除文字默认的倾斜效果
属性值:

  • 正常(不倾斜):normal
  • 倾斜:italic

5.4 行高-line-height

作用:设置多行文本的间距
属性值:

  • 数字+px
  • 数字(当前标签font-size属性值的倍数)
    ![[Pasted image 20250415092518.png]]

行高的测量方法:从一行文字的最顶端(最低端)量到下一行文字的最顶端(最低端)

垂直居中
把行高属性值等于盒子高度属性值
只能用于单行文字
![[Pasted image 20250416191955.png]]

5.5 字体族-font-family

属性值:字体名

  • 如果属性值是多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找
  • font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体(sans-serif)
/* 字体族,更改字体 */
div {font-family: 楷体;
}

![[Pasted image 20250417104220.png]]

5.6 字体复合属性-font

使用场景:设置网页文字公共样式
复合属性:属性的简写方式,应该属性对应多个值的写法,各个属性值之间用空格隔开

font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

![[Pasted image 20250417111223.png]]

注意:字号和字体只必须书写,否则font属性不生效

5.7 文本缩进-text-indent

属性值:

  • 数字+px
  • 数字+em(推荐:1em = 当前标签的字号大小)

5.8文本对齐-text-align

作用:控制内容水平的对齐方式
属性值:

  • left-左对齐(默认)
  • center-居中对齐
  • right-右对齐
    给图片设置水平对齐方式
    属性要设置给内容的父级-把图片标签放到别的标签里面作为子级,给父级标签设置水平居中属性
    ![[Pasted image 20250417113048.png]]

5.9 修饰线-text-decoration

属性值:

  • none-无
  • underline-下划线
  • line-through-删除线
  • overline0上划线
    ![[Pasted image 20250417114021.png]]

5.10 颜色-color

属性值:

  • 英文单词
  • rgb(r,g,b)-r,g,b分别表示红色绿色,蓝色三原色,取值范围0~255
  • ogba(r,g,b,a)-a表示透明度,取值为0~1(0表示完全透明，数值增大,透明度降低)
  • #RRGGBB-开发使用(例:#000000,#00ff00也可以简写成#000,#0f0)
http://www.xdnf.cn/news/6373.html

相关文章：

  • 小知识合集 慢慢更新
  • vue，uniapp解决h5跨域问题
  • uniapp打包IOS私钥证书过期了，如何在非mac系统操作
  • PDK中technology file从tf格式转换为lef格式
  • 【AI插件开发】Notepad++ AI插件开发实践：支持配置界面
  • 双轮驱动能源革命：能源互联网与分布式能源赋能工厂能效跃迁
  • 在Ubuntu系统中安装和升级RabbitVCS
  • 【教程】无视硬件限制强制升级Windows 11
  • 《数据结构之美--链表oj练习》
  • 2026《数据结构》考研复习笔记三（C++高级教程）
  • 「数据可视化 D3系列」入门第十章：饼图绘制详解与实现
  • 《实战AI智能体》——邮件转工单的AI自动化
  • 「数据可视化 D3系列」入门第十一章：力导向图深度解析与实现
  • 设计模式 --- 装饰器模式
  • 通过 Zotero 的样式编辑器（Style Editor）自定义文献引用和参考文献列表的格式
  • 在阿里云虚拟主机上启用WordPress伪静态
  • Redis 的指令执行方式：Pipeline、事务与 Lua 脚本的对比
  • HTTP：九.WEB机器人
  • 探索 HumanoidBench：类人机器人学习的新平台
  • 甘果桌面tv版下载-甘果桌面安卓电视版使用教程
  • OpenAI 34页最佳构建Agent实践
  • Python（23）Python异常处理完全指南：从防御到调试的工程实践
  • 使用 Vue 开发登录页面的完整指南
  • 解决 Spring Boot 多数据源环境下事务管理器冲突问题（非Neo4j请求标记了 @Transactional 尝试启动Neo4j的事务管理器）
  • 数据库原理及应用mysql版陈业斌实验四
  • 若依同步企业微信架构及ACTIVITI
  • docker部署springboot(eureka server)项目
  • 珈和科技遥感赋能农业保险创新 入选省级卫星应用示范标杆
  • 从零开始物理引擎（六）- 重构完成与MVP理解
  • Windows程序包管理器WinGet实战