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

CSS3笔记

news 来源：原创 2025/4/21 0:07:04

文章目录

  • 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)

相关文章：

  • 设计模式 --- 外观模式
  • 基于FPGA的AES加解密系统verilog实现,包含testbench和开发板硬件测试
  • 【ESP32-IDF笔记】06-触摸传感IO配置
  • 基于尚硅谷FreeRTOS视频笔记——6—滴答时钟—上下文切换
  • OpenAI重返巅峰：o3与o4-mini引领AI推理新时代
  • Qt QThread 两种线程管理方法
  • 【 解决Cline插件无法激活及DeepSeek模型请求卡顿或者无法加载问题】
  • C++ `unique_ptr` 多线程使用
  • SpringAI+DeepSeek大模型应用开发——5 ChatPDF
  • 深入解析C++驱动开发实战：优化高效稳定的驱动应用
  • Spring_MVC 快速入门指南
  • 汽车免拆诊断案例 | 2011款雪铁龙世嘉车刮水器偶尔自动工作
  • wordpress 垂直越权（CVE=2021-21389）漏洞复现详细教程
  • 初识Redis · C++客户端string
  • 先导木工机床与养老领域的探索之旅
  • 仿腾讯会议项目实现——设置配置文件
  • 【特殊场景应对1】视觉设计：信息密度与美学的博弈——让简历在HR视网膜上蹦迪的科学指南
  • 6.7.图的深度优先遍历(英文缩写DFS)
  • EnlightenGAN：低照度图像增强
  • 【计算机网络 | 第一篇】计算机网络基础知识
  • 《“四有”好老师系列丛书》发布，由顾明远总主编
  • 德国男中音马蒂亚斯·格内：古典音乐的未来在亚洲
  • 张宝亮履新临沂市委书记表态：不断提升在全省全国经济版图中的发展位势
  • 人民网评：官方轻踩刹车，智能驾驶不能“蒙眼狂奔”
  • 亲诚惠容行大道，命运与共开新篇——中共中央政治局委员、外交部长王毅谈习近平主席对越南、马来西亚、柬埔寨进行国事访问
  • 马克龙：美乌欧在法磋商乌克兰问题“积极且有建设性”