《前端web开发-CSS3基础-1》

怒放的生命.2025-01-05 11:13

文章目录

《前端web开发-CSS3基础》

1.CSS引入方式

  • 内部样式表

    • CSS代码写在style标签里面；
    • 代码示例:

  • 外部样式表

    • CSS代码写在单独的CSS文件中；
    • 在HTML中使用link标签引入；
    • 语法：<link rel="stylesheet" hre="./my.css" >
    • 代码示例：

  • 行内样式表

    • 配合JavaScript使用
    • CSS代码写在标签的style属性值里面
    • 语法：<div style="font-size:20px;color:red">这是div标签\</div>

2.选择器-标签和类

  • 标签选择器
    • 使用标签名作为选择器，选中同名标签，设置相同的样式；
    • 特点:所有同名标签都会被设置相同的样式，无法差异化同名标签样式；
  • 类选择器
    • 作用：查找标签，差异化标签的显示效果；
    • 创建和使用步骤：1.定义类选择器.类名；2.使用类选择器class="类名"。
    • 注意：
      • 类名自定义，不能使用纯数字或中文，尽量使用英文；
      • 一个类选择器可以供多个标签使用；
      • 一个标签可以使用多个类名，类名之间用空格隔开；
      • 开发习惯：类名见名知意，多个单词可以使用-链接;

3.选择器-id和通配符选择器

  • id选择器
  • 作用：查找标签，差异化标签的显示效果；
  • 场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式；
  • 创建和使用步骤：1.定义id选择器#id名；2.使用id选择器，标签添加id=id名
  • 通配符选择器
  • 作用：查找页面所有便签，设置相同样式；
  • 通配符选择器不需要调用，浏览器会自定查找相同标签，设置相同样式；

4.画盒子

5.字体修饰属性

序号 描述 属性 备注
1 字体大小 font-size 常用单位为px
2 字体粗细 font-weight
3 字体倾斜 font-style
4 行高 line-height
5 字体族 font-family
6 字体复合属性 font
7 文本缩进 text-indent
8 文本对齐 text-align
9 修饰线 text-decoration
10 字体颜色 color

6.字体大小、粗细和倾斜

6.1字体大小

  • 扩展：在谷歌浏览器中文字的默认大小为16px；
  • 总结：font-size必须有单位，否则不生效；

6.2 字体粗细

  • 总结：需要掌握400是正常字体 700是加粗字体；

6.3字体倾斜

  • 总结：font-style属性用来清除文字的倾斜效果；

7.行高


  • 总结：行高可以用px设置，也可以用数字设置，如果用数字设置，表示当前标签字体大小的倍数；

  • div标签中文字垂直居中的技巧：设置行高属性值等于盒子高度属性值。

8.字体族

  • 字体族
  • 属性名:font-family
  • 属性值:字体名

  • font-family:楷体;

  • font-family: Microsoft YaHei, Heiti sc, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif；

  • 拓展(了解):font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。
  • font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体。
  • 代码示例：

9.font复合属性

  • 使用场景：设置网页文字公共样式；
  • 复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
  • font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
html 复制代码 
div {
	font:italic 700 30px/2 楷体;
}

  • 注意:字号和字体值必须书写，否则 font属性不生效

  • 代码测试效果：

10.缩进、对齐和修饰线

10.1 文本缩进

  • 属性名:text-indent
  • 属性值
    • 数字+ pX
    • 数字+em (推荐:1em=当前标签的字号大小)
    • 语法：text-indent:2em;首行缩进2个字
  • 代码效果测试

10.2 文本和图片对齐

  1. 文本对齐方式
    • 作用:控制内容水平对齐方式
    • 属性名:text-align属性值
    • 属性值：
      • left ：左对齐(默认)
      • center：居中对齐
      • right：右对齐
    • 本质：text-align本质是控制内容的对齐方式，属性要设置给内容的父级
  • 效果测试：
  1. 图片对齐方式
    • 本质：text-align本质是控制内容的对齐方式，属性要设置给内容的父级

10.3 文本修饰线

  • 属性名:text-decoration
  • 属性值
    • none ：无
    • underline：下划线
    • line-through：删除线
    • overline：上划线
  • 效果测试：

11.文字颜色

12.调试工具

  • 调试工具的细节
    1. 如果是错误的属性，有黄色叹号；
    2. CSS 属性的前面有多选框，如果勾选:这个属性生效:如果没有勾选:这个属性不生效；

13.综合案例1-新闻详情

html 复制代码 
<!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>
        h1 {
            text-align: center;
            font-size: 30px;
            font-weight: 400;
            color: #333;
        }
        div {
            font-size: 14px;
            color: #999;
        }
        p {
            text-indent: 2em;
            color: #333;
            font-size: 18px;
        }
        .div-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>在希望的田野上｜湖北秋收开镰 各地多举措保增产增收</h1>
    <div>来源：央视网 | 2222年12月12日 12:12:12</div>
    <p><strong>央视网消息：</strong> 眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
    <div class="div-center">
        <img src="./秋收.webp" alt="">
    </div>
    <p>王化林说的新品种，是湖北省研发的杂交水稻"华夏香丝"，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像"华夏香丝"这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
    <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>

</body>
</html>

效果如下：

14.综合案例2-CSS简介

代码示例:

html 复制代码 
<!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>
        h1 {
            color: #333;
        }
        p {
            text-indent: 2em;
            color: #444;
            font-size: 14px;
            line-height: 30px;
        }
        a {
            color: #0069c2;
        }
        li {
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>层叠样式表（Cascading Style Sheets，缩写为CSS）是一种<a href="#">样式表</a> 语言，用来描述HTML或XML(包括如 SVG、MahML、XHTML之类的XML分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
    <p><strong>C5S是开放网络的核心语言之一</strong> ，由 W3C 规范 实现跨测览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.cs 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1现已废弃，CSS2.1是推荐标准，CSS3 分成多个小模块且正在标准化中。
    </p>
    <ul>
        <li>CSS 介绍 如果你是 Web 开发的新手，選务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法</li>
        <li>CSS 教程 我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
        <li>CSS 参考 针对资深 Web 开发者的<a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
    </ul>
</body>
</html>

效果如下：

15.复合选择器

  • 后代选择器

    1. 后代选择器:选中某元素的后代元素选择器写法:
    2. 父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开。
    html 复制代码 
    <style>
div span {
color:red;
</style>
<span>span 标签</span>
<div>
<span>这是 div 的儿子 span</span >
</div>

  • 子代选择器

    html 复制代码 
    <div>
	<span>这是 div 里面的 span</span>
	<p>
		<span>这是 div 里面的 p里面的 span</span>
	</p>
</div>
    html 复制代码 
    <style>
	div > span {
	color: red;
	}
</style>
    1. 子代选择器:选中某元素的子代元素(最近的子级)。
    2. 选择器写法:父选择器>子选择器{CSS 属性}，父子选择器之间用 >隔开

  • 并集选择器

    1. 并集选择器:选中多组标签设置相同的样式。
    2. 选择器1,选择器2,..., 选择器N{CSS 属性}，选择器之间用，隔开选择器
    3. 写法:
    html 复制代码 
    <style>
	div,
	p,
	span {
	color:red;
	}
</style>

<div>div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

  • 交集选择器

    1. 交集选择器:选中同时满足多个条件的元素。

      html 复制代码 
      <p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

    2. 选择器写法:选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号。

      html 复制代码 
      p.box {
color:red;
}

    3. 注意:如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

16.伪类选择器

  • 伪类选择器:伪类表示元素状态，选中元素的某个状态设置样式鼠标悬停状态:选择器:hover{Css 属性}

    html 复制代码 
    <style>
	a:hover 
	color:red;
	.box:hover {
	color:green;
	}
</style>
<a href="#">这是a标签</a>
<div class="box">div 标签</div>

17.CSS三大特性

17.1 继承性

  • 继承性：子级标签默认集成父级的文字控制属性；
  • 注意：如果标签有自己样式，则生效自己的样式，不继承；

17.2 层叠性

  • 特点

    • 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性。
    • 不同的属性会叠加:不同的 CSS 属性都生效。
    html 复制代码 
    <style>
	div {
	color:red; 
	font-weight:700;
	}
	div {
	color:green; 
	font-size:30px;
	}
</style>
<div>div 标签</div>

17.3 优先级

  • 优先级:也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

    html 复制代码 
    <style>
	div {
	color:red;
	}
	.box{
	color: green;
	}
</style>
<div class="box">div 标签</div>

  • 规则：选择器优先级高的样式生效，

  • 公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

  • （选中标签的范围越大，优先级越低)

  • 优先级-叠加计算规则

    html 复制代码 
    <style>
div {
	color:red;
}
.box {
	color: green;
}
</style>
    html 复制代码 
    <style>
.box div {
	color:red;
}
.box {
	color:green;
}
</style>

  • 叠加计算：如果是复合选择器，则需要权重叠加计算。公式:(每一级之间不存在进位)

  • (行内样式，id选择器个数，类选择器个数，标签选择器个数)

  • 规则:

    • ·从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
    • !important 权重最高
    • 继承权重最低
相关推荐
易元几秒前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api1 分钟前
Elasticsearch 查询性能优化：从 3 秒到 300ms 的 6 个核心参数调优指南
前端
Pedantic29 分钟前
swift 日期与时间的三个结构体
前端
南方kenny29 分钟前
Mock.js：前端开发的假数据神器
前端·javascript
芹丸子30 分钟前
vue cli 创建项目一直失败
前端
鹏程十八少34 分钟前
6.android Vivo手机 指纹解锁动画 （附源码）
前端
AliciaIr34 分钟前
深入理解React Hook：useRef的底层机制与高级应用
前端·react.js
子林super34 分钟前
Linux下各种连接数配置及高并发Nginx优化
前端
Dream耀38 分钟前
CSS过渡 vs 动画：都有哪些技巧
前端·css
程思扬39 分钟前
无界设计新生态：Penpot开源平台与cpolar的云端协同创新实践
大数据·linux·服务器·前端·经验分享·ubuntu·开源
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02Coze 开源了，送上保姆级私有化部署方案【建议收藏】03扣子开源本地部署教程 丨Coze智能体小白喂饭级指南04全球最强模型Grok4，国内已可免费使用！（附教程）05KGG转MP3工具|非KGM文件|解密音频06腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）0701-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验08干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！09vue数据变化但页面不变10ChatGPT Agent 完全使用指南：2025年7月最新功能详解