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

2024-06-02 21:12

本文主要是介绍【魅力网页的背后】: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>

此时.infop都选中了这个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

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求