《前端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 权重最高
    • 继承权重最低
相关推荐
莫空0000几秒前
深入理解JavaScript属性描述符：从数据属性到存取器属性
前端·面试
guojl1 分钟前
深度剖析Kafka读写机制
前端
FogLetter2 分钟前
图片懒加载：让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan2 分钟前
vscode webview 插件开发（精装篇）
前端
Mxuan3 分钟前
vscode webview 插件开发（交付篇）
前端
Mxuan5 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录5 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee5 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我6 分钟前
React 开发通关指南：用 HTML 的思维写 JS🚀🚀
前端·react.js·html
Mxuan7 分钟前
vscode webview 插件开发（毛坯篇）
前端
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南