《前端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 权重最高
    • 继承权重最低
相关推荐
鱼大大博客2 小时前
Edge Scdn的应用场景有哪些？
前端·edge
两只鱼丿3 小时前
Edge安装问题，安装后出现：Could not find Edge installation
前端·edge
screct_demo5 小时前
通俗易懂的讲一下Vue的双向绑定和React的单向绑定
前端·javascript·html
有心还是可以做到的嘛6 小时前
ref() 和 reactive() 区别
前端·javascript·vue.js
xcLeigh8 小时前
HTML5实现好看的博客网站、通用大作业网页模板源码
前端·课程设计·html5
mit6.8248 小时前
[Qt] 输入控件 | Line | Text | Combo | Spin | Date | Dial | Slider
前端·qt·学习·ubuntu
狗狗显卡9 小时前
一些计算机零碎知识随写（25年1月）
前端
Burt9 小时前
【unibest】可以去掉hbx模版了，base模板一统天下
前端·微信小程序·uni-app
拖孩9 小时前
💥大家好，我是拖孩🎤
前端·javascript·后端
CHANG_THE_WORLD9 小时前
Linux 基础七 内存
linux·服务器·前端
热门推荐
01渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了02半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)03HCIA-datacom数通题库和录播视频资料04【bug记录】清除僵尸进程，释放GPU显存05新手学习VR全景需要知道的几个问题06校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站07【模型压缩】 LPPN论文阅读笔记08ubuntu22.04.5本地apt源部署09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10音频——I2S TDM 模式(六)