CSS基础 - 基础

news2025/11/4 19:00:19

目录

一. 简介

二. 基本用法

三. 总结


一. 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。

一、基本作用

  1. 外观设计
    • CSS 可以控制网页中元素的颜色、字体、大小、粗细、样式（如斜体、下划线等）。例如：
   p {
       color: blue;
       font-size: 16px;
       font-weight: bold;
   }

这段 CSS 代码会将网页中所有<p>段落元素的文本颜色设置为蓝色，字体大小设为 16 像素，字体加粗。

  1. 布局控制
    • 可以定义网页元素的位置、大小、排列方式等。比如使用 CSS 的浮动（float）属性可以实现多列布局，使用定位（position）属性可以精确地将元素放置在页面的特定位置。
    • 示例：
  .sidebar {
       width: 200px;
       float: left;
       background-color: #f2f2f2;
   }
  .content {
       margin-left: 200px;
   }

这里将.sidebar类的元素设置为宽度 200 像素并向左浮动，作为侧边栏，而.content类的元素通过设置左边距为 200 像素，使其内容不会被侧边栏遮挡，实现了一种常见的两栏布局。

二、语法结构

  1. 选择器

    • 选择器用于指定要应用样式的 HTML 元素。常见的选择器类型有：
      • 元素选择器：直接选择 HTML 元素名称，如p选择所有<p>段落元素。
      • 类选择器：以点（.）开头，用于选择具有特定class属性的元素。例如.myClass选择所有class="myClass"的元素。
      • ID 选择器：以井号（#）开头，用于选择具有特定id属性的元素。例如#myId选择id="myId"的元素。
    • 还可以使用更复杂的选择器组合，如后代选择器、子选择器、相邻兄弟选择器等，来更精确地选择元素。

  2. 声明块

    • 选择器后面跟着一对花括号{}，在花括号内是声明块，包含一个或多个属性和值的对。每个属性和值之间用冒号（:）分隔，不同的属性声明之间用分号（;）分隔。例如：
   h1 {
       color: red;
       font-size: 24px;
   }

这里h1是选择器，{color: red; font-size: 24px;}是声明块，其中color和font-size是属性，red和24px是相应的值。

三、引入方式

  1. 内联样式（Inline Styles）
    • 直接在 HTML 元素的style属性中定义 CSS 样式。例如：
   <p style="color: blue; font-size: 16px;">这是一段蓝色、16 像素字体大小的文本。</p>

内联样式的优先级最高，但会使 HTML 代码变得混乱，不适合大量样式的定义。

  1. 内部样式表（Internal Style Sheets）
    • 在 HTML 文件的<head>标签内使用<style>标签来定义 CSS 样式。例如：
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>内部样式表示例</title>
       <style>
           p {
               color: green;
               font-size: 18px;
           }
           h1 {
               background-color: yellow;
           }
       </style>
   </head>
   <body>
       <h1>这是一个标题</h1>
       <p>这是一段绿色、18 像素字体大小的段落文本。</p>
   </body>
   </html>

内部样式表适用于单个 HTML 页面的样式定义。

  1. 外部样式表（External Style Sheets）
    • 将 CSS 代码写在一个独立的.css文件中，然后在 HTML 文件中通过<link>标签链接到这个 CSS 文件。例如：
    • 首先创建一个名为styles.css的文件，内容如下：
   p {
       color: purple;
       font-size: 20px;
   }
   h2 {
       text-decoration: underline;
   }
  • 然后在 HTML 文件中这样链接：
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>外部样式表示例</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <h2>这是一个带有下划线的标题</h2>
       <p>这是一段紫色、20 像素字体大小的段落文本。</p>
   </body>
   </html>

外部样式表实现了样式与内容的分离，有利于代码的维护和复用，适用于多个 HTML 页面共享相同样式的情况。

四、盒模型（Box Model）

  1. 组成部分

    • CSS 的盒模型是用来设计和布局网页元素的基础概念。它描述了一个 HTML 元素在页面上所占据的空间。盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
    • 例如，一个<div>元素，其内容是实际显示的文本或其他内部元素，内边距是内容与边框之间的空白区域，边框围绕着内容和内边距，外边距是元素与周围其他元素之间的空白区域。

  2. 计算尺寸

    • 元素的总宽度和高度的计算方式如下：
    • 对于标准盒模型（在大多数现代浏览器中默认）：
      • 元素宽度 = 内容宽度（width）+ 左内边距（padding-left）+ 右内边距（padding-right）+ 左边框宽度（border-left-width）+ 右边框宽度（border-right-width）
      • 元素高度 = 内容高度（height）+ 上内边距（padding-top）+ 下内边距（padding-bottom）+ 上边框宽度（border-top-width）+ 下边框宽度（border-bottom-width）
    • 可以通过 CSS 属性来调整这些部分的大小，以达到所需的布局效果。

五、响应式设计（Responsive Design）中的 CSS

  1. 媒体查询（Media Queries）
    • 媒体查询是 CSS3 引入的一种技术，它允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式。通过媒体查询，可以创建适应不同设备的响应式网页。
    • 例如：
   /* 当屏幕宽度小于 768px 时应用以下样式 */
   @media screen and (max-width: 768px) {
       body {
           font-size: 14px;
       }
      .sidebar {
           display: none;
       }
   }

这里当屏幕宽度小于 768 像素时，将网页的字体大小设为 14 像素，并隐藏.sidebar类的侧边栏元素。

  1. 弹性布局（Flexbox）和网格布局（Grid）在响应式设计中的应用
    • Flexbox 和 Grid 是 CSS3 中用于布局的强大工具，在响应式设计中非常有用。
    • Flexbox 可以轻松实现项目的对齐、排序、换行等操作，适应不同屏幕尺寸下的布局变化。例如，在小屏幕设备上可以让项目自动换行，而在大屏幕设备上可以水平排列。
    • Grid 可以将网页划分为网格状结构，更方便地进行复杂的布局规划。在响应式设计中，可以根据不同的屏幕尺寸重新定义网格的列和行，以适应不同设备的显示需求。

总之，CSS 在网页设计中起着至关重要的作用，它不仅能够美化网页外观，还能实现各种复杂的布局和响应式设计，以适应不同设备和用户需求。

六. 优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

内联样式, ID 选择器,类选择器.这三种选择器的优先级相同，当它们发生冲突时，后面定义的样式会覆盖前面的。

二. 基本用法

一、选择器的用法

  1. 元素选择器
    • 用法：通过 HTML 元素的名称来选择元素。它会选择页面上所有该类型的元素。
    • 实例：
   p {
       color: blue;
       font-size: 16px;
   }

这段 CSS 代码会将网页中所有<p>段落元素的文本颜色设置为蓝色，字体大小设为 16 像素。

  1. 类选择器
    • 用法：以点（.）开头，用于选择具有特定class属性的元素。可以将相同的样式应用于多个不同的元素，只要它们具有相同的类名。
    • 实例：
 .highlight {
       background-color: yellow;
       font-weight: bold;
   }

然后在 HTML 中，可以这样使用：

   <p class="highlight">这是一段被突出显示的文本。</p>
   <div class="highlight">这是另一个具有相同样式的元素。</div>

这里的<p>和<div>元素都具有highlight类，它们的背景颜色会变为黄色，字体加粗。

  1. ID 选择器
    • 用法：以井号（#）开头，用于选择具有特定id属性的唯一元素。在一个 HTML 页面中，每个id应该是唯一的。
    • 实例：
   #header {
       height: 100px;
       background-color: gray;
   }

在 HTML 中：

   <header id="header">这是网页的头部。</header>

这里的<header>元素具有id为header，它的高度被设置为 100 像素，背景颜色为灰色。

  1. 后代选择器
    • 用法：用于选择作为另一个元素后代的元素。它通过在选择器之间用空格分隔来表示。
    • 实例：
   ul li {
       list-style-type: none;
   }

这将选择<ul>元素内部的所有<li>元素，并将它们的列表样式类型设置为无。

  1. 子选择器
    • 用法：选择作为另一个元素直接子元素的元素。它通过在选择器之间用大于号（>）分隔来表示。
    • 实例：
   div > p {
       margin-top: 10px;
   }

这将选择<div>元素的直接子元素<p>，并为它们设置顶部边距为 10 像素。

二、属性的用法

  1. 字体属性
    • font-family：用于设置文本的字体。例如：
   body {
       font-family: Arial, sans-serif;
   }

这里将网页正文的字体设置为 Arial，如果 Arial 字体不可用，则使用浏览器默认的无衬线字体。

  • font-size：设置字体大小。可以使用像素（px）、百分比（%）等单位。例如：
   h1 {
       font-size: 24px;
   }

将<h1>标题的字体大小设置为 24 像素。

  • font-weight：设置字体的粗细。可以是normal（正常）、bold（粗体）等。例如：
   strong {
       font-weight: bold;
   }

将<strong>标签内的文本设置为粗体。

  1. 颜色属性
    • color：设置文本的颜色。可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000表示红色）、RGB 值（如rgb(255, 0, 0)表示红色）等。例如：
   p {
       color: #00FF00;
   }

将段落文本颜色设置为绿色（十六进制值#00FF00表示绿色）。

  • background-color：设置元素的背景颜色。用法与color类似。例如：
   div {
       background-color: lightgray;
   }

将<div>元素的背景颜色设置为浅灰色。

  1. 布局属性
    • margin：设置元素的外边距，即元素与周围其他元素之间的空白区域。可以分别设置上、下、左、右的外边距，也可以使用简写形式。例如：
   div {
       margin: 20px; /* 四个方向的外边距都是 20 像素 */
   }

或者

   div {
       margin-top: 10px;
       margin-bottom: 15px;
       margin-left: 5px;
       margin-right: 5px;
   }
  • padding：设置元素的内边距，即内容与边框之间的空白区域。用法与margin类似。例如：
   p {
       padding: 10px;
   }

将段落的内边距设置为 10 像素。

  • float：用于实现浮动布局，使元素可以向左或向右浮动。例如：
 .image {
       float: left;
       margin-right: 10px;
   }

这里将具有image类的元素向左浮动，并设置其右边距为 10 像素。

  • position：用于定位元素。有static（默认，正常流定位）、relative（相对定位，相对于其正常位置进行偏移）、absolute（绝对定位，相对于其最近的已定位祖先元素进行定位）和fixed（固定定位，相对于浏览器窗口进行定位）等取值。例如：
 .menu {
       position: fixed;
       top: 0;
       right: 0;
   }

这里将具有menu类的元素设置为固定定位，使其始终位于浏览器窗口的右上角。

三、实例：创建一个简单的网页布局

以下是一个简单的 HTML 和 CSS 代码示例，创建一个具有头部、侧边栏、内容区域和底部的网页布局：

HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>网页布局示例</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header id="header">
    <h1>网站标题</h1>
  </header>
  <aside class="sidebar">
    <ul>
      <li><a href="#">链接 1</a></li>
      <li><a href="#">链接 2</a></li>
      <li><a href="#">链接 3</a></li>
    </ul>
  </aside>
  <section class="content">
    <p>这是主要的内容区域。</p>
  </section>
  <footer id="footer">
    <p>版权所有 © 2024</p>
  </footer>
</body>

</html>

CSS 代码（styles.css）：

#header {
  height: 80px;
  background-color: gray;
  text-align: center;
}

.sidebar {
  width: 200px;
  float: left;
  background-color: lightblue;
  padding: 10px;
}

.content {
  margin-left: 200px;
  padding: 20px;
}

#footer {
  clear: both;
  background-color: gray;
  color: white;
  text-align: center;
  padding: 10px;
}

在这个例子中，通过 CSS 对不同的 HTML 元素进行样式设置，实现了一个简单的网页布局，包括具有特定样式的头部、侧边栏、内容区域和底部。

三. 总结

到这就能看的那些heml和css的用法了,熟能生巧.

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

电子电气架构 --- 车辆模式管理

电子电气架构 --- 车辆模式管理

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
【开源】嵌入式Linux（IMX6U）应用层综合项目（4）--音乐播放器APP

【开源】嵌入式Linux（IMX6U）应用层综合项目（4）--音乐播放器APP

1.简介 此文章并不是教程&#xff0c;只能当作笔者的学习分享&#xff0c;只会做一些简单的介绍&#xff0c;其他的各位结合着代码和运行现象自己分析吧&#xff0c;相信通过函数名和注释&#xff0c;基本上是不难看懂代码的&#xff0c;其中涉及到的一些技术栈&#xff0c;也…
阅读更多...
springboot员工健康管理系统论文源码调试讲解

springboot员工健康管理系统论文源码调试讲解

1系统成功运行案例 2 相关技术 2.1 springboot框架介绍 本课题程序开发使用到的框架技术&#xff0c;英文名称缩写是springboot&#xff0c;在JavaWeb开发中使用的流行框架有SSH、SSM、springboot、SpringMVC等&#xff0c;作为一个课题程序采用SSH框架也可以&#xff0c;SSM框…
阅读更多...
2002年-至今阿拉斯加北部的北极地区测量数据集（气候、冰层、生态系统和人类活动）

2002年-至今阿拉斯加北部的北极地区测量数据集（气候、冰层、生态系统和人类活动）

Measurements in the Arctic region north of Alaska in 2002 2002年-至今阿拉斯加北部的北极地区测量数据集 简介 2002年阿拉斯加北部的北极地区测量数据集提供了关于该地区环境变化的重要信息&#xff0c;涵盖气候、冰层、生态系统和人类活动等多个方面。以下是该数据集的…
阅读更多...
【socket编程】UDP网络通信 {简单的服务器echo程序；简单的远程控制程序；简单的网络聊天室程序}

【socket编程】UDP网络通信 {简单的服务器echo程序；简单的远程控制程序；简单的网络聊天室程序}

今天我们通过以下的几个surver/client模型了解一下&#xff35;&#xff24;&#xff30;网络通信 一、简单的服务器echo程序 以下部分内容转载自「网络编程」简单UDP网络通信程序的实现_socket udp-CSDN博客 1.1 服务端 首先明确&#xff0c;这个简单的UDP网络程序分客户端…
阅读更多...
v2rayU 将对你的电脑造成伤害 弹窗问题

v2rayU 将对你的电脑造成伤害 弹窗问题

如果删除v2rayU软件了还是反复弹窗&#xff0c;网上其他方法都不行的话&#xff0c;不妨试试这个方法&#xff0c;亲测有效&#xff1a; 在系统搜索 登陆&#xff0c;找到登陆项&#xff1a; 将「允许在后台」关闭后&#xff0c;不再提示。
阅读更多...
java -- SpringMVC表现层数据封装详解

java -- SpringMVC表现层数据封装详解

表现层数据封装 介绍 1. ModelAndView ModelAndView是Spring MVC提供的一个对象&#xff0c;用于封装模型数据和视图信息。当Controller处理完用户请求后&#xff0c;会返回一个ModelAndView对象给DispatcherServlet&#xff0c;DispatcherServlet再解析这个对象&#xff0c…
阅读更多...
河南建筑装饰资质延期资料准备步骤详解

河南建筑装饰资质延期资料准备步骤详解

河南建筑装饰资质延期资料的准备是一个细致且重要的过程&#xff0c;以下是详细的准备步骤&#xff1a; 一、前期准备与规划 了解政策与要求 访问河南省住房和城乡建设厅的官方网站、政务服务平台等权威渠道&#xff0c;获取最新的建筑装饰资质延期政策、要求、流程和时间节点…
阅读更多...
从 Pandas 到 Polars 四十四：Polars 和 数据可视化库Seaborn

从 Pandas 到 Polars 四十四：Polars 和 数据可视化库Seaborn

在我对Matplotlib感到沮丧并发表帖子时&#xff0c;我的朋友让我试试Seaborn库。近年来我一直在使用Altair&#xff0c;因此并没有过多考虑Seaborn。然而&#xff0c;Seaborn的新界面给我留下了深刻印象&#xff0c;并且我很高兴地发现&#xff0c;Seaborn将直接接受Polars的Da…
阅读更多...
4.7.深层循环神经网络

4.7.深层循环神经网络

深层循环网络 ​ 就是更深了&#xff0c;因为之前的网络都只有一层隐藏层&#xff0c;弄多一点 ​ 我们将多层循环神经网络堆叠在一起&#xff0c;通过对几个简单层的组合&#xff0c;产生了一个灵活的机制。上图展示了一个具有 L L L个隐藏层的深度循环神经网络&#xff0c;每…
阅读更多...
滑动验证码的介绍！

滑动验证码的介绍！

一、什么是滑动验证&#xff1f; 滑动验证&#xff08;通常也被称为滑块验证&#xff09;是一种用户交互式的验证方法。它要求用户通过鼠标或触摸屏&#xff0c;将滑块按照指定的路径或方向滑动到正确的位置&#xff0c;以完成验证过程。这种验证方式不仅增加了自动化攻击的难…
阅读更多...
mysql源码编译启动debug

mysql源码编译启动debug

对于没有C语言基础的同学来说&#xff0c;想看看源码&#xff0c;在搞定编辑器做debug的时候就被劝退了&#xff0c;发生点啥了&#xff0c;完全看不懂&#xff0c;不知道从哪里入手去做debug&#xff1b;我为了看看 mysql 的 insert buffer 到底存的是索引页还是数据页&#x…
阅读更多...
Tik Tok账号被限流什么原因？怎么解决？

Tik Tok账号被限流什么原因？怎么解决？

TikTok账号被限流&#xff0c;无疑是让众多内容创作者头疼的问题。浏览量骤减&#xff0c;账号活跃度下降&#xff0c;究竟是什么原因导致的限流&#xff1f;今天&#xff0c;我们将深入探讨TikTok限流的几大成因&#xff0c;大家运营的时候尽量避免这些问题&#xff0c;同时也…
阅读更多...
极狐GitLab与无问芯穹达成战略合作，共探AI落地软件智能研发场景新机遇

极狐GitLab与无问芯穹达成战略合作，共探AI落地软件智能研发场景新机遇

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…
阅读更多...
教程 | USB-IF USBCV软件工具使用指南

教程 | USB-IF USBCV软件工具使用指南

一. 概述 CVTest 是基于 USBCV 软件工具的合规性测试&#xff0c;可以验证设备是否符合 USB 规范和标准。USBCV 则是 USB-IF 提供的一款免费 USB 装置测试软体&#xff0c;简要做 USB2.0 及 USB3.0 装置相关测试。本文将基于 NXP LPC5516 HID 类键盘简要讲解 USBCV 中公有 USB…
阅读更多...
两个向量的余弦相似度如何计算

两个向量的余弦相似度如何计算

两个向量的余弦相似度是通过测量两个向量在方向上的相似性来计算的。它是向量空间中两个向量夹角的余弦值。如果两个向量的方向相同&#xff0c;它们的余弦相似度接近1&#xff1b;如果两个向量的方向完全相反&#xff0c;它们的余弦相似度接近-1&#xff1b;如果两个向量正交&…
阅读更多...
求职Leetcode题目（5）

求职Leetcode题目（5）

1.分割回文串 每一个结点表示剩余没有扫描到的字符串&#xff0c;产生分支是截取了剩余字符串的前缀&#xff1b;产生前缀字符串的时候&#xff0c;判断前缀字符串是否是回文。如果前缀字符串是回文&#xff0c;则可以产生分支和结点&#xff1b;如果前缀字符串不是回文&#…
阅读更多...
[ERR] 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘（已解决）

[ERR] 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘（已解决）

今天在使用navicate Premium运行sql文件时出现如下错误&#xff1a; 错误&#xff1a;1273 - Unknown collation: utf8mb4_0900_ai_ci 报错原因&#xff1a; 生成转储文件&#xff08;也就是sql文件&#xff09;的数据库版本为8.0,而要运行sql文件的数据库版本为5.6,因为是高版…
阅读更多...
Redis 实现消息队列

Redis 实现消息队列

Redis 实现消息队列 文章目录 Redis 实现消息队列导引1. 基于List结构的消息队列2. 基于PubSub的消息队列3. 基于Stream的消息队列(推荐)3.1 XADD3.2 XREAD3.3 XGROUP 导引 消息队列(Message Queue)&#xff0c;从概念上来理解就是用来存放消息的队列&#xff0c;最简单的消息…
阅读更多...
芯片外置电阻RC如何实现振荡器功能？

芯片外置电阻RC如何实现振荡器功能？

大家好，这里是大话硬件。 这篇文章来实现DC-DC控制器内部的振荡器模块功能。 在调试DC-DC控制器时，如果要改变其开关频率，通常是修改芯片外围的RC参数， 如下图所示。 结合常用芯片UC3842系列的内部框图，实现方式如下： 实现方案如下： 根据上述的原理，实现的思路：…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023