【魅力网页的背后】：CSS基础魔法，从零打造视觉盛宴

2024-06-02 21:12
文章标签 css 魔法 网页 盛宴 视觉 魅力 打造 背后 基础 frontend

本文主要是介绍【魅力网页的背后】：CSS基础魔法，从零打造视觉盛宴，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

      • 🚀一、css基础知识
        • ⭐1. 认识css
      • 🌈二、选择器初级
        • ❤️id与class命名

🚀一、css基础知识

在这里插入图片描述

⭐1. 认识css

概念

  • CSS(英文全称：Cascading Style Sheets)，层叠样式表。它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。
  • CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
  • CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性

写在哪

css代码分为内部样式、外部样式、行内样式三种写法。

  • 内部样式

    写在HTML文档的style标签中，style通常放置于头部：

<head><style>/*这里写css代码*/选择符{样式名：样式;}</style>
</head>

 html部分<p id='zixuan'>  我是p标签  </p>样式部分#zixuan{color:red}

style标签可以加上type="text/css"这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。

  • 外部样式

    单独创建.css后缀的文件，然后通过link标签引入，link通常放置于头部：

<head><link href="CSS文件的路径"  rel="stylesheet">
</head>
  • 行内样式/内联样式

直接写在标签属性中：

<body><p style="css代码">段落文字</p>
</body>
  • 三种方式比较
样式表优点缺点使用情况使用场景
行内样式表书写方便，权重高没有实现结构与样式分离，不便于维护，不可以重复利用极少某个标签需要单独的样式设置时使用
内部样式表部分结构与样式分离，较便于维护没有彻底实现结构与样式分离，不可以重复利用一般css代码量不多，且和当前页面联系紧密不需要复用时使用
外部样式表完全实现结构与样式分离，可重复利用如果代码量较少情况下，引入法更麻烦最多，推荐css代码量大时，或者需要重复利用时使用

如何写

/*选择器{属性:值;属性:值;}*/
p{color: red;font-size: 20px;
}
/*
规范：值以分号结束推荐换行书写，可读性更强推荐 值 与 : 号之间加空格，可读性更强
*/

🌈二、选择器初级

在这里插入图片描述

CSS选择器是用来在HTML文档中定位和选择元素的模式，以便对这些元素应用样式。

  1. 元素选择器（Element Selector）：
    直接通过元素名称来选择元素，如 p 会选择所有段落元素。

  2. 类选择器（Class Selector）：
    使用.加上类名来选择具有该类的所有元素，如 .my-class 会选中class="my-class"的所有元素。

  3. ID选择器（ID Selector）：
    使用#加上ID名来选择具有该ID的元素，如 #my-id 会选中id="my-id"的元素。ID在文档中应该是唯一的。

  4. 通配符选择器（Universal Selector）：
    使用*可以匹配任意元素，如 * 会选择页面上的所有元素。

  5. 后代选择器（Descendant Selector）：
    通过空格分隔两个或多个选择器，用于选择某个元素内部的所有特定后代元素，如 div p 会选择所有位于 div 内的 p 元素。

  6. 子代选择器（Child Selector）：
    使用>符号连接两个选择器，仅选择作为某元素直接子元素的元素，如 div > p 会选择所有直接嵌套在 div 下的 p 元素。

  7. 相邻兄弟选择器（Adjacent Sibling Selector）：
    使用+符号，选择紧接在另一元素后的元素，如 p + ul 会选择所有紧接在段落后面的无序列表。

  8. 一般兄弟选择器（General Sibling Combinator）：
    使用~符号，选择某个元素之后的所有特定兄弟元素，如 h1 ~ p 会选择所有跟在 h1 元素后的 p 元素。

  9. 属性选择器（Attribute Selector）：
    选择具有特定属性或属性值的元素，如 [type=“text”] 会选择所有type属性为"text"的input元素。

  10. 伪类选择器（Pseudo-class Selector）：
    用来选择元素的特定状态，如 a:hover 选择鼠标悬停在链接上的状态。

  11. 伪元素选择器（Pseudo-element Selector）：
    用于向文档树中插入特定的元素，如 ::before, ::after 用于在元素内容前后插入内容。

❤️id与class命名
  • id命名唯一，单个标签不允许拥有多个id名，同页面中不存出现重复的id名（id重名会影响js代码获取标签）
  • class命名不唯一，单个标签可以拥有多个class名，不同标签允许使用相同class名
  • 命名规范
    • 允许 大写字母 小写字母 数字 -，必须以字母开头，单词一般小写；
    • 见名知意，不允许单个字母做名字，各命名词汇英文参考：命名词汇 ；
    • 单词之间使用-号连词或者驼峰连词，具体看公司整体规范；
    • 单词不要简写过渡，可以不影响理解的前提下简写。

选择器分类（初级版）

  • id选择器

    eg：#wrap，选中id名为wrap的标签。

  • class选择器

    eg：.nav，选中所有class名为nav的标签。

  • 标签选择器

    eg：p，选中所有p标签。

  • 后代选择器

    eg：#wrap .nav，选中#wrap标签中所有拥有nav类名的后代标签。

  • 通配选择符

    eg：*，选中页面中所有元素

选择器权重
CSS选择器的权重，也称为Specificity，是一个衡量不同选择器优先级的数值系统，它决定了当有多个规则应用到同一个元素上时，哪个规则会最终生效。

/*css代码*/
.info{color: green;}
p{color: red;}

<!--HTML代码-->
<p class="info">段落文字</p>

此时.info和p都选中了这个p标签，并且两者规定了不同的字体颜色，那么最终显示出的颜色就要根据选择器的优先级来决定。

  • !important > 行内 > id > class > 标签 > 通配符|兄弟|相邻兄弟|子代 > 继承
  • 先比较级别，级别一样比较各级别选择器出现的次数
  • 当两个选择器权重一样时，以最后出现的为准

基础知识介绍
CSS中常用的颜色表示法有以下几种：
在这里插入图片描述

  1. 颜色关键字（Color Keywords）：
    直接使用颜色的英文名称，如 red, blue, green 等。CSS定义了许多预定义的颜色名称，便于记忆和使用。
.example {color: red; /* 红色 */
}
  1. 十六进制表示法（Hexadecimal Notation）：
    使用 # 后跟6位或3位十六进制数字表示颜色。6位表示法中，每两位分别代表红、绿、蓝三原色的强度，范围从00到FF（或简写为0到F）。例如，#FF0000 表示红色，可以简写为 #F00。3位简写形式也是类似的，如 #ABC 等同于 #AABBCC。
.example {background-color: #FF0000; /* 红色，完整形式 */background-color: #F00;     /* 红色，简写形式 */
}
  1. RGB表示法（Red, Green, Blue）：
    使用 rgb() 函数，内部包含三个介于0到255之间的整数，分别代表红、绿、蓝三种颜色的强度。例如，rgb(255, 0, 0) 表示红色。
.example {color: rgb(255, 0, 0); /* 红色 */
}
  1. RGBA表示法（Red, Green, Blue, Alpha）：
    类似于RGB，但增加了一个透明度通道，alpha 值是一个介于0（完全透明）到1（完全不透明）之间的数字。例如，rgba(255, 0, 0, 0.5) 表示半透明的红色。
.example {background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}
  1. HSL表示法（Hue, Saturation, Lightness）：
    使用 hsl() 函数，参数分别是色相（Hue，0到360度）、饱和度（Saturation，百分比）和亮度（Lightness，百分比）。例如，hsl(0, 100%, 50%) 表示红色。
.example {color: hsl(0, 100%, 50%); /* 红色，Hue为0度（红色），饱和度100%，亮度50% */
}
  1. HSLA表示法（Hue, Saturation, Lightness, Alpha）：
    在HSL的基础上增加了透明度通道，使用方法与RGBA类似。例如，hsla(0, 100%, 50%, 0.5) 表示半透明的红色。
.example {background-color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

像素（Pixel），通常缩写为px，是计算机图形和数字图像领域中使用的最基本单位。像素代表了屏幕上显示数据的最基本的点，是构成图像的最小可见元素。每个像素都有自己的颜色值，这些颜色值的集合共同形成了我们看到的图像或图形。

在HTML中，像素（px）是一种常用的长度单位，用来指定元素的宽度、高度、边距、填充等尺寸。虽然像素最初与物理屏幕上的点相对应，但随着高分辨率屏幕的普及，CSS引入了视窗相关单位（如vw, vh, rem等）和分辨率无关单位（如pt, em），以提供更加灵活和响应式的布局设计。然而，像素仍然是最基础且广泛使用的单位之一，特别是在精确控制布局和元素尺寸时。

这篇关于【魅力网页的背后】：CSS基础魔法，从零打造视觉盛宴的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1025100。

相关文章

RedHat运维-Linux文本操作基础-AWK进阶

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理，跟着敲一遍，有个印象，然后把它保存到本地，以后要用再去看，如果有了新东西，你自个再添加。这是我参考牛客上的shell编程专项题，只不过换成了问答的方式而已。不用背，就算是我自己亲自敲，我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
零基础STM32单片机编程入门(一)初识STM32单片机

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据6.FALSH编程时间，擦写次数7.I/O高低电平电压表格8.外设接口
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
问题-windows-VPN不正确关闭导致网页打不开

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢？ 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开，我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候，会把ip链接断掉，如果你不正确关掉，ip链接没有断掉，此时你vpn又是没启动的，没有域名解析，所以就打不开网站。 你可以在打不开网页的时候，把vpn打开，你会发现网络又可以登录了。 方法一 注意：方法一虽然方便，但是可能会有
阅读更多...
ps基础入门

ps基础入门

1.基础      1.1新建文件      1.2创建指定形状      1.4移动工具          1.41移动画布中的任意元素          1.42移动画布          1.43修改画布大小          1.44修改图像大小      1.5框选工具      1.6矩形工具      1.7图层          1.71图层颜色修改          1
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2