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

发布于:2024-11-28 ⋅ 阅读:(29) ⋅ 点赞:(0)


前言

  • 之前的学习和分享中,我们已经对 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>元素

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

2.类选择器

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

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

3.ID选择器

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

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

(二)声明块

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

1.属性名和属性值

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

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

2.注释的写法

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

在这里插入图片描述