从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程

devtools/2024/11/28 23:17:56/

从 HTML 到 CSS:开启网页样式之旅(一)——CSS 初体验与网页样式新征程

  • 前言
  • 一、为什么需要 CSS?
  • 二、CSS的引用
    • (一)行内样式
    • (二)内部样式
    • (三)外部样式
    • (四)样式表的优先级
  • 三、CSS语法规范
    • (一)选择器
      • 例子(后面会详细讲)
      • 1.元素选择器
      • 2.类选择器
      • 3.ID选择器
    • (二)声明块
      • 1.属性名和属性值
      • 2.注释的写法


前言

  • 之前的学习和分享中,我们已经对 HTML(超文本标记语言)有了较为深入的了解。HTML 就像是搭建房屋的骨架,它为我们的网页提供了基本的结构内容框架,让我们能够在浏览器中呈现出文字、图片、链接等各种元素。**然而,仅仅有骨架可不够,要让我们的网页真正变得美观、吸引人,就需要 CSS(层叠样式表)登场啦!**今天,就让我们在 HTML 讲解结束的基础上,正式开启对 CSS 的探索之旅

在这里插入图片描述
HTML(结构)

它负责定义网页的结构和内容。例如,<html>、<body>、<div>、<p>等标签用于构建网页的基本框架,确定页面上元素的位置和层次关系。

CSS(表现)

CSS(层叠样式表)用于控制网页的外观和样式。==它可以设置元素的颜色、大小、字体、布局等。==例如,color: red;可以将文本颜色设置为红色,font - size: 16px;可以设置字体大小为 16 像素。

JavaScript(行为)

JavaScript 是一种脚本语言,用于实现网页的动态效果和交互功能。==例如,它可以用于创建下拉菜单、表单验证、动画效果等。==当用户点击按钮、输入文本或在页面上进行其他操作时,JavaScript 可以响应这些操作并执行相应的代码。


一、为什么需要 CSS?

  • 当我们只用 HTML 构建网页时,会发现所有的元素都是以一种非常朴素、原始的状态呈现的。文本就是简单的纯文本样式,没有颜色、字体大小的区分,图片也只是按照默认的方式显示,各个元素之间的布局也相对简单和生硬。CSS 的出现,就是为了弥补 HTML 在样式呈现方面的不足

它可以让我们轻松地控制网页中每个元素的外观,包括但不限于以下几个方面:

    1. 字体样式
    1. 颜色与背景
    1. 布局与定位
    1. 边框与装饰

二、CSS的引用

在网页开发中,CSS样式可以通过多种方式被应用到HTML页面中,常见的有行内样式、内部样式和外部样式这三种引用方法

(一)行内样式

  • 行内样式是将CSS代码直接写在HTML标签的style属性中,也被称为内联样式

例子

<h1 style="color:red; font - size:60px;">欢迎来到我的博客</h1>

(二)内部样式

  • 内部样式是将所有的CSS代码提取出来,放在HTML页面内部的

例子

<style>
h1 {color: red;font - size: 40px;
}
</style>
color:red;表示设置字体颜色为红色
font - size:60px;表示设置字体大小为60像素

(三)外部样式

  • 外部样式是将CSS代码写在一个单独的.css文件中,然后在HTML文件中引入该.css文件来应用样式
  • CSS文件
h1 {color: red;font - size: 40px;
}
  • 然后,在HTML文件中使用<link>标签引入这个.css文件:
  • HTML文件
<head><link rel="stylesheet" href="styles.css">
</head>

(四)样式表的优先级

在这里插入图片描述

  • 在网页开发中,当存在多种样式表引用方式时就需要了解样式表的优先级规则,以确定最终应用到 HTML 元素上的样式
  • 总体规则是行内样式 > 内部样式 = 外部样式。这意味着当一个元素同时受到行内样式、内部样式和外部样式影响时,行内样式具有最高的优先级,会优先被应用。而内部样式和外部样式在优先级上是相同的

三、CSS语法规范

  • CSS语法规范由两部分构成:选择器声明块

在这里插入图片描述

(一)选择器

选择器的主要作用是找到要添加样式的元素

例子(后面会详细讲)

1.元素选择器

这是最基本的选择器类型,直接使用HTML元素的名称作为选择器。例如,h1就是一个元素选择器,它会选择页面中所有的<h1>元素

html">h1 {color: green;font - size: 40px;
}

2.类选择器

类选择器允许我们给特定的一组元素添加相同的样式,而这些元素不一定是同一种HTML元素。它通过在HTML元素中添加一个class属性来标识,然后在CSS中通过.加上类名来选择这些元素

html"><p class="highlight">这是一段需要突出显示的段落。</p>
<div class="highlight">这是一个需要突出显示的div元素。</div>

3.ID选择器

ID选择器用于选中具有特定ID的唯一元素。在HTML中,每个元素的ID应该是唯一的。它通过在HTML元素中添加一个id属性,然后在CSS中通过#加上ID名来选择该元素

html"><p id="unique - paragraph">这是一个独一无二的段落。</p>

(二)声明块

声明块用于设置具体的样式,它是由一个或多个声明组成的。声明的格式为:属性名:属性值。

1.属性名和属性值

在CSS中,有许多属性可以用来设置元素的样式,如color(颜色)、font - size(字体大小)、background - color(背景颜色)等。每个属性都有其对应的属性值

  • 例如,color: green中,color是属性名,表示要设置元素的颜色,green是属性值,表示将颜色设置为绿色。
  • 对于多个属性的设置在声明块中用分号;隔开。如{color: green; font - size: 40px;},这里分别设置了颜色为绿色和字体大小为40像素

2.注释的写法

  • CSS中可以添加注释来对样式进行说明,方便自己和其他开发者理解代码。注释的格式是/* 注释内容 */
html">/* 给h1元素添加样式 */
h1 {/* 设置文字颜色为红色 */color: red;/* 设置文字大小为40px */font - size: 40px;
}
CSS的引言到此结束,下一节后面我们会详细讲CSS的选择器内容,喜欢的话记得三连哦

在这里插入图片描述


http://www.ppmy.cn/devtools/137776.html

相关文章

论文笔记 网络安全图谱以及溯源算法

​ 本文提出了一种网络攻击溯源框架&#xff0c;以及一种网络安全知识图谱&#xff0c;该图由六个部分组成&#xff0c;G <H&#xff0c;V&#xff0c;A&#xff0c;E&#xff0c;L&#xff0c;S&#xff0c;R>。 1|11.知识图 ​ 网络知识图由六个部分组成&#xff0c…

职业技术学校新方向,无人机组装、调试、维修技术培训详解

职业技术学校开展无人机组装、调试、维修技术培训&#xff0c;是紧跟时代步伐、满足市场需求的重要举措。以下是对这一培训方向的详细解析&#xff1a; 一、培训目标 无人机组装、调试、维修技术培训旨在培养具备无人机组装、调试、维修以及应用能力的专业技术人才。学员通过…

Tourtally:颠覆传统的AI智能旅行规划革命

# Tourtally&#xff1a;颠覆传统的AI智能旅行规划革命 在快速变化的旅行科技世界里&#xff0c;一个划时代的平台正在重新定义我们探索世界的方式。让我们一起认识 Tourtally&#xff0c;这个由人工智能驱动的旅行规划助手&#xff0c;正在彻底改变旅行体验。 ## 旅行规划的…

SpringBoot框架助力欢迪迈手机商城快速开发

2 相关技术 2.1 SSM框架介绍 本课题程序开发使用到的框架技术&#xff0c;英文名称缩写是SSM&#xff0c;在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等&#xff0c;作为一个课题程序采用SSH框架也可以&#xff0c;SSM框架也可以&#xff0c;SpringMVC也可以。SSH框架…

Pod 动态分配存储空间实现持久化存储

配置 Pod 以使用 PersistentVolume 作为存储 ​ 关于持久卷的介绍&#xff0c;可以看官方文档 https://kubernetes.io/zh-cn/docs/concepts/storage/persistent-volumes/ ​ 持久卷根据存储位置&#xff0c;可以使用本地存储和云存储&#xff0c;如果有云服务平台&#xff0c…

树莓派3:64位系统串口(UART)使用问题的解决方法

前言 当我们要使用串口进行zigbee的短距离通信时,发现无法使用串口. 原因 树莓派3bCPU内部有两个串口,一个硬件串口(就是我们平时使用的UART),还有一个迷你串口(mini-uart),在老版本的树莓派中把硬件串口分配在GPIO上,可以单独使用.但是在新的树莓派中官方把硬件串口给了蓝牙…

Android Audio实战——音频多声道基础适配(七)

通过《Android Audio基础——音频输出声道设置》这篇文章,我们了解了 Android 11 中通道掩码校验的时候最好只校验到 7.1 声道(8声道),而在通道常量参数中有定义了 7.1.2 声道(10 声道)和 7.1.4声道(12 声道)。如果这里我们 Android 11 的项目想要使用 7.1.4 声道就需要…

Android Audio实战——音频多声道混音适配(八)

上一篇文章我们修改了在 Android 11 中适配 7.1.4 声道的相关常量定义及部分代码,这里我们来看一下另外两个部分重要逻辑的修改及优化。 在音频处理过程中,经常需要将不同采样率的音频统一到相同的采样率,以便进行进一步处理。而在 AudioMixer 中,很可能会使用 AudioResamp…