自学内容网 自学内容网
自学内容网 > 正文

Web开发（二）CSS3基础与进阶

🕗 发布于 2025-01-16 06:47 前端  css3  css  

Web开发（二）CSS3基础与进阶

写在前面

参考黑马程序员前端Web教程做的笔记，主要是想后面自己搭建网页玩。

这部分是前端HTML5+CSS3+移动web视频教程的CSS3基础与进阶部分，包括CSS3的选择器、文字控制属性、背景属性、显示模式等CSS基础特性。

CSS基础

基础选择器

CSS是给浏览器看的，作用：美化内容。

image-20250113171334799

示例如下。

image-20250113171612466

CSS引入方式

stylesheet，即样式表

image-20250113172317808

外部样式表示例：

image-20250113172228940

对应的css写法同内部style相同

image-20250113172244823

行内样式示例

image-20250113172442268

选择器

标签选择器

image-20250115091818520

image-20250115091753755

类选择器

最常用的选择器之一

image-20250115092241218

用多个类名例子：

image-20250115092316636

id选择器

image-20250115095210685

*通配符

通配符用于开发初期清楚标签默认样式使用

image-20250115095634458

image-20250115095627278

画盒子

image-20250115100058593

image-20250115100315013

文字控制属性

常见属性设定如下：

image-20250115100400428

font相关

通过Google的检查，可以进入调试工具来检查是否。Google中，默认字体的像素大小为16px。

image-20250115101701702

关于字体粗细，一般使用数字的写法，而比较少用关键字的写法。

image-20250115101623218

字体倾斜

image-20250115101958123

行高，由上间距、文本高度、下间距组成。通常上间距=下间距

image-20250115102229205

image-20250115102617705

使用行高可以实现文字垂直居中，通过设定和div相同的高度，即可完成垂直居中。（单行文字）

image-20250115102930052

字体族font-family。实际使用直接从已有网页（如京东、淘宝等）复制即可。

image-20250115103702623

font复合属性，实际使用中同样直接从已有网页（如京东、淘宝等）复制即可。

image-20250115103918623

image-20250115103956092

实际中，设定“是否倾斜”后，可以跳过“是否加粗”属性。

image-20250115104335426

文本缩进、对齐与修饰线

文本缩进。

em：em space或者叫em width。表示字母 “M” 的宽度，用作计量单位时，可以理解为相对于当前字体大小的倍数。

image-20250115104728466

文本对齐

image-20250115105338467

文本居中里面，居中的是文字内容，而不是标签。如下所示，h1标签大小并未发生变化。

image-20250115105630740

同样可以设置图片居中。

image-20250115105746323

文本修饰线

image-20250115110059579

文字颜色

RGB表示法，了解即可。十六进制中，两两一组，如果数字相同，可以化简为同一位。如#ffcc00->#fc0

image-20250115110641222

调试工具

错误出现在20-调试工具.html的第九行。

image-20250115111753335

通过勾选复选框可以调试代码属性。

image-20250115111932226

综合案例1——新闻详情

完成样式。

image-20250115113442198

对应代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <style>
        h1{
            font-weight: 400;
            font-size: 30px;
            text-align: center;
            color:#333;
        }
        div{
            font-size: 14px;
            color: #999;
        }
        p{
            font-size: 18px;
            text-indent: 2em;
            color: #333;
        }
        .img{
            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="img">
        <img src="./img/1.jpg" alt="CCTV1的拖拉机照片">
    </div>
    <p>
        王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。
    </p>
    <p>
        此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。
    </p>
</body>
</html>

综合案例2——CSS简介

完成样式

image-20250115132703562

代码如下

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

</body>
</html>

CSS进阶

复合选择器

image-20250115141922416

后代选择器

image-20250115142016763

注意，会选择父亲后代的所有选择器

image-20250115142210343

子代选择器

可用子代选择器只选儿子span

image-20250115142243737

image-20250115142339214

并集选择器

image-20250115142435858

image-20250115142522107

交集选择器（了解）

比如必须选择p标签和class=‘box’标签，这儿的点是“.box"中的点。

image-20250115142640173

image-20250115142742120

伪类选择器

基础

比如选择鼠标划过的状态，让它和其他的标签不一样（如图中的橙色）

image-20250115143039312

任何标签都可以设置鼠标悬停hover状态

image-20250115143322917

拓展（了解）

image-20250115143415242

image-20250115143729555

CSS三大特性

image-20250115150001267

继承性

image-20250115151022480

h1的默认font-size为2em，相当于父级font-size的两倍，所以body的font-size为30px，两倍是60px

image-20250115151324422

层叠性

即div应该为绿色。image-20250115151426842

这里同一个选择器被定义了多次，后面的属性就会覆盖前面的属性。

image-20250115151711158

优先级
基础

image-20250115151845706

image-20250115152239381

叠加计算规则

image-20250115152545364

方法

  1. 首先判断是否为important或者为继承。
  2. 再比较上述规则中的第一条。

PS：继承就是父级标签的样式，而没有特定到当前的子标签中。

例子1

  1. 这些选择器都直接控制文本，而不是间接控制的，故没有继承，也明显没有important。

  2. 所以直接比较优先度，最后为橙色

image-20250115153233367

例子2

.father为父类，所以为继承。因此最后为红色。

image-20250115153505662

例子3

其中，#father虽然为important，但是它是父类的important，即继承情况，因此优先度低。

image-20250115153824356

Emmet写法（简写方法）

其中div.类名还可以直接简化为“.类名"

image-20250115155319651

背景属性

image-20250115161831797

背景图image

在浏览器中，背景图默认效果为平铺，即复制。

image-20250115161809327

如下示例，原本图片是一只猫，结果被平铺（复制）为了四只猫。

image-20250115162011791

平铺方式repeat

可以通过repeat控制背景图的平铺方式。

image-20250115162122057

no-repeat示例，图片默认显示在左上角，剩余默认为背景色。

image-20250115162326140

背景图位置position

三种方法（包括关键字和坐标混用）都可。

如果坐标取负数，图片取负值的位置会被砍掉（因为该部分图片不包括在盒子中）

image-20250115162930514

背景图缩放size

image-20250115163309847

百分比缩放也是等比例缩放的，而且百分比针对的是宽度。

image-20250115163551854

背景图固定attachment

image-20250115163819549

背景复合属性background

image-20250115163951302

显示模式

基础

image-20250115165306692

image-20250115170053026

转换显示模式

image-20250115171749087

inline在工作中不常用。图片默认其底部与文字基线对齐，所以向上撑开。

image-20250115171546286

综合案例1——热词

任务目标：

image-20250115203421718

题目示例中文字为超链接，采用了将“a”修改为block的方法实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
        a{
            display: block;
            width: 200px;
            height: 80px;
            background-color:#3064bb;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            line-height: 80px;
            text-align: center;
        }
        a:hover{
            background-color: #608dd9;

        }
    </style>
</head>
<body>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">Vue</a>
    <a href="#">React</a>
</body>
</html>

实际上笔者写的时候选择了div块包裹a的方式实现，实现效果相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
        div{
            display: block;
            width: 200px;
            height: 80px;
            background-color:#3064bb;
  
            text-align: center;
        }
        div a{
            text-decoration: none;          
            color: #fff;
            font-size: 18px;
            line-height: 80px;
        }
        div:hover{
            background-color: #608dd9;
        }
    </style>
</head>
<body>
    <div><a href="#">HTML</a></div>
    <div><a href="#">CSS</a></div>
    <div><a href="#">JavaScript</a></div>
    <div><a href="#">Vue</a></div>
    <div><a href="#">React</a></div>
</body>
</html>

综合案例2——banner效果

完成目标

image-20250115204410625

对应代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>banner效果</title>
    <style>
        .banner{
            height: 500px;
            background-color: #f3f3f4;
            background-image: url(./img/bk.png);
            background-repeat: no-repeat;
            background-position: left bottom;

            /* 继承给子类 */
            text-align: right;
            color: #333;
        }
        .banner h2{
            font-size: 36px;
            font-weight: 400;
            line-height: 100px;
        }
        .banner p{
            font-size: 20px;
            font-weight: 400;
        }
        .banner a{
            /* display: block; */
            /* block元素会占一整行，所以不能向右对齐 */
            display: inline-block;
            background-color: #f06b1f;
            width: 125px;
            height: 40px;
            background-position: right;
            

            text-decoration: none;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;

        }
    </style>
</head>
<body>
    <div class="banner">
        <h2>让创造产生价值</h2>
        <p>
            我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。
        </p>
        <a href="#">我要报名</a>
    </div>
</body>
</html>

原文地址：https://blog.csdn.net/weixin_49119476/article/details/145169216

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025