【前端基础】CSS基础

目标:掌握 CSS 属性基本写法,能够使用文字相关属性美化文章页。

01-CSS初体验

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现美化内容)。

书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码

<title>CSS 初体验</title>
<style>/* 选择器 { } */p {/* CSS 属性 */color: red;}
</style><p>体验 CSS</p>

提示:属性名和属性值成对出现 → 键值对。

02-CSS引入方式

  • 内部样式表:学习使用
    • CSS 代码写在 style 标签里面
  • 外部样式表:开发使用
    • CSS 代码写在单独的 CSS 文件中(.css
    • 在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">
  • 行内样式:配合 JavaScript 使用
    • CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>

03-选择器

作用:查找标签,设置样式。

标签选择器

标签选择器:使用标签名作为选择器 → 选中同名标签设置相同的样式

例如:p, h1, div, a, img…

<style>p {color: red;}
</style>

注意:标签选择器无法差异化同名标签的显示效果。

类选择器

作用:查找标签,差异化设置标签的显示效果。

步骤:

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class=“类名”
<style>/* 定义类选择器 */.red {color: red;}
</style><!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

注意:

  • 类名自定义,不要用纯数字或中文,尽量用英文命名
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开

开发习惯:类名见名知意,多个单词可以用 - 连接,例如:news-hd。

id选择器

作用:查找标签,差异化设置标签的显示效果。

场景:id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式

步骤:

  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= “id名”
<style>/* 定义 id 选择器 */#red {color: red;}
</style><!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

规则:同一个 id 选择器在一个页面只能使用一次。

通配符选择器

作用:查找页面所有标签,设置相同样式。

通配符选择器: *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

* {color: red;
}

经验:通配符选择器可以用于清除标签的默认样式,例如:标签默认的外边距、内边距。

在这里插入图片描述

04-盒子尺寸和背景色

在这里插入图片描述

05-文字控制属性

字体大小

  • 属性名:font-size
  • 属性值:文字尺寸,PC 端网页最常用的单位 px
p {font-size: 30px;
}

经验:谷歌浏览器默认字号是16px。

字体样式(是否倾斜)

作用:清除文字默认的倾斜效果

属性名:font-style

属性值

  • 正常(不倾斜):normal
  • 倾斜:italic

行高

作用:设置多行文本的间距

属性名:line-height

属性值

  • 数字 + px
  • 数字(当前标签font-size属性值的倍数)
line-height: 30px;/* 当前标签字体大小为16px */
line-height: 2;

在这里插入图片描述

行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。

单行文字垂直居中

垂直居中技巧:行高属性值等于盒子高度属性值

注意:该技巧适用于单行文字垂直居中效果

div {height: 100px;background-color: skyblue;/* 注意:只能是单行文字垂直居中 */line-height: 100px;
}

字体族

属性名:font-family

属性值:字体名

font-family: 楷体;

拓展(了解):font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找

  • font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体

在这里插入图片描述

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

font复合属性

使用场景:设置网页文字公共样式

在这里插入图片描述

复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

div {font: italic 700 30px/2 楷体;
}

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

文本缩进

属性名:text-indent

属性值:

  • 数字 + px
  • 数字 + em(推荐:1em = 当前标签的字号大小
p {text-indent: 2em;
}

文本对齐方式

作用:控制内容水平对齐方式

属性名:text-align

在这里插入图片描述

text-align: center;

text-align本质是控制内容的对齐方式,属性要设置给内容的父级。

<style>div {text-align: center;}
</style><div><img src="./images/1.jpg" alt="">
</div>

文本修饰线

属性名: text-decoration

在这里插入图片描述

color 文字颜色

在这里插入图片描述

提示:只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色。

06-调试工具

作用:检查、调试代码;帮助程序员发现代码问题、解决问题

  1. 打开调试工具
  • 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
  • F12
  1. 使用调试工具

在这里插入图片描述

07-综合案例一-新闻详情

网页制作思路:

  1. 从上到下,先整体再局部
  2. 先标签,再 CSS 美化

在这里插入图片描述

HTML标签

<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div>来源:央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。湖北省通过大力推广新品种水稻,建设高标准农田等一系列措施,为秋粮稳产提供有力支撑。</p>
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p>
<div class="pic"><img src="./1.jpg" alt="">
</div>
<p>王化林说的新品种,是湖北省研发的杂交水稻“华夏香丝”,不仅产量高,还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内,像“华夏香丝”这样抗旱节水的品种还有20多个,这些水稻新品将在荆门全面推广,确保来年增产增收。</p>
<p>此外,湖北还大力推进高标准农田建设。截至今年6月,已建成3980万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p>

CSS样式

<style>h1 {text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {font-size: 14px;color: #999;}p {text-indent: 2em;font-size: 18px;color: #333;}/* div {text-align: center;} */.pic {text-align: center;}
</style>

08-综合案例二-CSS简介

在这里插入图片描述

HTML标签

<h1>CSS(层叠样式表)</h1>
<p>层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 <a href="#">样式表</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="#">详细参考手册</a> ,描述了 CSS 的各个属性与概念。</li>
</ul>

CSS样式

<style>h1 {color: #333;}p {text-indent: 2em;font-size: 14px;color: #444;line-height: 30px;}a {color: #0069c2;}li {font-size: 14px;color: #444;line-height: 30px;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466481.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一种高度集成的数字化管理平台:城市管理综合执法系统(源码)

什么是城市管理综合执法系统&#xff1f; 城市管理综合执法系统是一种高度集成的数字化管理平台&#xff0c;它旨在通过整合信息技术资源&#xff0c;实现对城市环境、秩序、设施等多方面的综合管理和高效执法。 城市管理综合执法系统通常包含以下几个核心要素和功能&#xff…

【Python】强大的正则表达式工具:re模块详解与应用

强大的正则表达式工具&#xff1a;re模块详解与应用 在编程和数据处理中&#xff0c;字符串的处理是不可避免的一项任务。无论是从文本中提取信息、验证数据格式&#xff0c;还是进行复杂的替换操作&#xff0c;正则表达式&#xff08;Regular Expression&#xff0c;简称Rege…

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

03.DDD六边形架构

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 什么是依赖DDD四层架构六边形架构代码实现 想要详细了解六边形架构&#xff0c;可以看我之前的一篇文章。是对六边形架构原文的翻…

前端开发实现自定义勾选/自定义样式,可复选,可取消勾选

基于后端返回数组实现多选、复选 以下代码基于vue2&#xff0c;如果有需要React/Vue3或者其他框架代码的&#xff0c;可以通过国内直连GPT4o进行代码转换&#xff0c;转换正确率99% 前端代码如下(直接拷贝到你的vue代码即可)&#xff1a; <!-- CustomCheckboxList.vue --&g…

新型智慧城市顶层设计方案(118页word)

文档介绍&#xff1a; 新型智慧城市顶层设计方案是一种全局性、前瞻性的规划&#xff0c;旨在通过整合城市各类资源&#xff0c;运用新一代信息技术&#xff0c;推动城市治理、民生服务、产业发展等领域的全面升级&#xff0c;以实现城市的可持续发展和居民生活质量的提升。该…

nginx-proxy-manager实现反向代理+自动化证书(实战)

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 cnginx-proxy-manager实现反向代理自动化证书 nginx-proxy-manager是什么搭建nginx-proxy-manage…

定时器入门:Air780E定时器基础与进阶

今天我们学习的是Air780E定时器基础与进阶&#xff0c;让大家更深入的了解定时器。 一、定时器(timer)的概述 在Air780E模组搭载的LuatOS系统中&#xff0c;定时器&#xff08;timer&#xff09;是一项基础且关键的服务。它允许开发者在特定的时间点或周期性地执行代码段&…

C语言复习第7章 自定义类型(结构体+位段+枚举+联合体)

目录 一、结构体1.1 内置类型和自定义类型1.2 结构体的概念1.3 结构体基本的声明1.4 区分两种创建结构体变量的方式1.5 结构体变量的定义和初始化1.6 区分一下typdef和变量列表1.7 匿名结构体类型1.8 访问结构体成员1.9 修改字符数组成员变量的时候 要用strcpy1.10 结构体的传参…

Twitter(X)2024最新注册教程

Twitter 现名为X&#xff0c;因为图标是一只小鸟的形象&#xff0c;大家也叫它小蓝鸟&#xff08;埃隆马斯克于 2023 年对该平台进行了品牌重塑&#xff09;&#xff0c;目前仍然是全球最受欢迎的社交媒体和微博平台之一&#xff0c;全球活跃用户量大概在4.5亿。尤其是欧美国家…

[单例模式]

[设计模式] 设计模式是软件工程中的一种常见做法, 它可以理解为"模板", 是针对一些常见的特定场景, 给出的一些比较好的固定的解决方案. 不同语言适用的设计模式是不一样的. 这里我们接下来要谈到的是java中典型的设计模式. 而且由于设计模式比较适合有一定编程经…

[mysql]DDL,DML综合案例,

综合案例 题目如下 目录 综合案例 ​编辑 ​编辑 # 1、创#1建数据库test01_library # 2、创建表 books&#xff0c;表结构如下&#xff1a; # 3、向books表中插入记录库存 # 4、将小说类型(novel)的书的价格都增加5。 # 5、将名称为EmmaT的书的价格改为40&#xff0c;并将…

day-81 打家劫舍 II

思路 与LCR 089. 打家劫舍相比&#xff0c;本题所有房屋围成了一圈&#xff0c;那么第一间房子和最后一间房子不能同时打劫&#xff0c;那么就可以分为两种情况&#xff1a;1.选第一间房打劫&#xff1b;2.选最后一间房打劫 解题过程 然后依次计算出以上两种情况的最大金额&am…

秃姐学AI系列之:GRU——门控循环单元 | LSTM——长短期记忆网络

RNN存在的问题 因为RNN模型的BPTT反向传导的链式求导&#xff0c;导致需要反复乘以一个也就是说会出现指数级别的问题&#xff1a; 梯度爆炸&#xff1a;如果的话&#xff0c;那么连乘的结果可能会快速增长&#xff0c;导致梯度爆炸梯度消失&#xff1a;如果的话&#xff0c;…

OpenHarmony 入门——ArkUI 自定义组件间的父子双向同步状态装饰器@Link语法(四)

文章大纲 引言一、组件间状态装饰器Link 父子双向同步1、使用规则2、支持的观察变化的场景和ArkUI 刷新UI3、Link变量值初始化和更新机制3.1、初始渲染&#xff1a;执行父组件的build()函数后将创建子组件的新实例。3.2、Link的数据源的更新&#xff1a;即父组件中状态变量更新…

机器学习与数据挖掘_使用梯度下降法训练线性回归模型

目录 实验内容 实验步骤 1. 导入必要的库 2. 加载数据并绘制散点图 3. 设置模型的超参数 4. 实现梯度下降算法 5. 打印训练后的参数和损失值 6. 绘制损失函数随迭代次数的变化图 7. 绘制线性回归拟合曲线 8. 基于训练好的模型进行新样本预测 实验代码 实验结果 实验…

机器学习与AI|如何利用数据科学优化库存周转率?

对于所有零售商来说&#xff0c;良好的库存管理都是非常重要的。众所周知&#xff0c;商品如果不放在货架上就无法出售&#xff0c;而如果库存过多则意味着严重的财务负担。 但是做好库存管理绝非易事&#xff0c;它依赖于对未来需求的准确预测和确保始终有合适库存的敏捷供应链…

Proteus中数码管动态扫描显示不全(已解决)

文章目录 前言解决方法后记 前言 我是直接把以前写的 51 数码管程序复制过来的&#xff0c;当时看的郭天祥的视频&#xff0c;先送段选&#xff0c;消隐后送位选&#xff0c;最后来个 1ms 的延时。 代码在 Proteus 中数码管静态是可以的&#xff0c;动态显示出了问题——显示…

如何快速搭建一个spring boot项目

一、准备工作 1.1 安装JDK&#xff1a;确保计算机上已安装Java Development Kit (JDK) 8或更高版本、并配置了环境变量 1.2 安装Maven&#xff1a;下载并安装Maven构建工具&#xff0c;这是Spring Boot官方推荐的构建工具。 1.3 安装代码编辑器&#xff1a;这里推荐使用Inte…

基于ViT的无监督工业异常检测模型汇总

基于ViT的无监督工业异常检测模型汇总 论文1&#xff1a;RealNet: A Feature Selection Network with Realistic Synthetic Anomaly for Anomaly Detection&#xff08;2024&#xff09;1.1 主要思想1.2 系统框架 论文2&#xff1a;Inpainting Transformer for Anomaly Detecti…