小白入门 CSS 语法规则

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 CSS 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

这篇文章给大家介绍 CSS(层叠样式表)的基本语法和规则,对于初学者来说,了解这些规则是有必要的。

1.选择器(Selectors): CSS 规则通常以选择器开始,选择器用于指定 HTML 元素的样式。例如,要选择所有段落元素,可以使用段落选择器:

p {/* 样式规则在这里 */
}

2.声明块(Declaration Block):在选择器之后,使用大括号 {} 包含一个或多个样式声明。每个声明以分号 ; 结束。

p {color: blue;font-size: 16px;margin: 10px;
}

在上面的示例中,设置了段落元素的文本颜色、字体大小和外边距。

3.属性(Properties):在每个声明中,属性用于指定要更改的样式属性。例如,color 属性用于定义文本颜色,font-size 用于定义字体大小。

4.值(Values):属性后面是一个冒号 :,后面紧跟着一个值,表示要为属性设置的具体样式。例如,color: blue; 中的 blue 是颜色属性的值。

5.注释(Comments):你可以在 CSS 中添加注释,注释不会影响样式规则的应用。注释以 /* 开始,以 */ 结束。

/* 这是一个注释 */
p {color: red; /* 这也是一个注释 */
}

6.层叠性(Cascading):如果多个样式规则应用于同一个元素,浏览器将使用层叠规则来决定哪些样式最终生效。通常,具有更高特权的选择器或具体性的规则将覆盖其他规则。

7.继承性(Inheritance):某些样式属性会被子元素继承,这意味着如果你在父元素上设置了某个属性,子元素通常会继承该属性。例如,如果你在 <body> 元素上设置了字体属性,它将应用于整个页面。

8.CSS 规则的应用:CSS 样式规则可以通过以下方式应用到 HTML 元素上:

    内联样式(Inline Styles): 直接在 HTML 元素上使用 style 属性来定义样式。

    内部样式表(Internal Stylesheets): 在 HTML 文档的 <head> 部分使用 style> 元素来定义样式规则。

    外部样式表(External Stylesheets): 将样式规则保存在一个独立的 .css 文件中,并通过 link> 元素将其链接到 HTML 文档中。

9.后代选择器(Descendant Selectors):你可以选择特定元素的后代元素。例如,选择所有段落元素的 <a> 链接可以使用 p a 选择器。

 p a {/* 样式规则在这里 */
}

这些是 CSS 的基本语法和规则。通过理解这些基本概念,可以从编写简单的样式规则开始,逐渐构建更复杂的样式,从而美化和布局网页。不断实践和尝试是学习 CSS 的关键。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust里的Fn/FnMut/FnOnce和闭包匿名函数关系

闭包&#xff08;英语&#xff1a;Closure&#xff09;&#xff0c;又称词法闭包&#xff08;Lexical Closure&#xff09;或函数闭包&#xff08;function closures&#xff09;&#xff0c;是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在&#xff0c;即使…

Linux线程安全,互斥量和条件变量

文章目录 一、 Linux线程互斥1. 进程线程间的互斥相关背景概念&#xff08;1&#xff09; 临界资源和临界区&#xff08;2&#xff09; 互斥和原子性 2. 互斥量mutex3. 互斥量的接口4. 互斥量实现原理探究 二、 可重入VS线程安全1. 概念2. 常见的线程不安全的情况3. 常见的线程…

【superset】基于MySQL的BI数据分析可视化实战案例(已更新)

1.熟悉、梳理、总结下superset可视化分析实战案例知识体系,一直想探索有效可用的可视化分析方案,大多收费或不好用,这里,借此机会总结、更新下。 2.复杂度高,遇到并解决的问题较多,尝试了很多次。 3.欢迎批评指正,跪谢一键三连! 基于MySQL的BI数据分析可视化实战案例文…

leetcode46-Permutations

题目 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 分析 求全排列&#xff0c;我们可以用…

Crossplane 实战:构建统一的云原生控制平面

1 什么是 Crossplane Crossplane 是一个开源的 Kubernetes 扩展&#xff0c;其核心目标是将 Kubernetes 转化为一个通用的控制平面&#xff0c;使其能够管理和编排分布于 Kubernetes 集群内外的各种资源。通过扩展 Kubernetes 的功能&#xff0c;Crossplane 对 Kubernetes 集群…

rv1126的rknn1.7.5自有模型训练部署

几乎一年前, 弄过一次rv1126的平台的推理部署, 一年时间过去了, rknn从1.7.1, 进化到了1.7.5,原有的代码不太好用了, 因为最近有个客户要做1126平台的推理, 今天下午就花了几个小时, 从头再捋了一遍. 模型训练 这部分, 跟3588平台差不多, clone下yolov5的仓库, 并check out到…

《QT实用小工具·五十五》带有标签、下划线的Material Design风格输入框

1、概述 源码放在文章末尾 该项目实现了一个带有标签动画、焦点动画、正确提示、错误警告的单行输入框控件。下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef LABELEDEDIT_H #define LABELEDEDIT_H#include <QObject> #include <QWidget>…

Day15-JavaWeb开发-Maven高级-分模块设计与开发继承与聚合私服

1. Maven高级-分模块设计与开发 2. Maven高级-继承与聚合 2.1 继承关系实现 2.2 版本锁定 2.3 聚合实现 3. Maven高级-私服 3.1 私服-介绍 3.2 私服-资源上传与下载 4. Web开发-完结

Nginx(参数设置总结)

文章目录 Nginx&#xff08;工作机制&参数设置&#xff09;1.Master&Worker工作机制1.示意图2.解释3.Nginx争抢机制4.accept_mutex解决惊群现象5.多进程结构不用多线程结构的好处6.IO多路复用&#xff0c;实现高并发7.优势 2.参数配置1.work_processes1.基本介绍2.work…

15_Scala面向对象编程_访问权限

文章目录 Scala访问权限1.同类中访问2.同包不同类访问3.不同包访问4.子类权限小结 Scala访问权限 知识点概念 private --同类访问private[包名] --包私有&#xff1b; 同类同包下访问protected --同类&#xff0c;或子类 //同包不能访问(default)(public)默认public --公…

代码随想录,第43天

1049.最后一块石头的重量 //每次取俩块石头进行碰撞&#xff0c;撞完后&#xff0c;剩下石头块&#xff0c;又可以与新取的石头进行碰撞。。。。 //不断进行反复&#xff0c;取舍 //类似与分割等和子集问题 class Solution { public:int lastStoneWeightII(vector<int>&…

【电子通识】为什么IC内部偏置会用到恒流源?

在查看芯片手册时&#xff0c;我们经常会发现芯片框图中出现恒流源。下图所示LM358运算放大器规格书中功能框图的恒流源&#xff1a; 电源芯片SS端内部的恒流源&#xff1a; 其实&#xff0c;IC内部电路的偏置&#xff0c;大多通过恒流源或者恒压源来提供。这与电源波动影响到…

【微服务】分布式事务(通过Seata解决分布式事务问题)

分布式事务 分布式事务Seata微服务集成SeataXA模式XA模式使用 AT模式AT模式实现 分布式事务 在分布式系统中&#xff0c;如果一个业务需要多个服务合作完成&#xff0c;而且每一个服务都有事务&#xff0c;多个事务必须同时成功或失败&#xff0c;这样的事务就是分布式事务&am…

力扣 647. 回文子串

题目来源&#xff1a;https://leetcode.cn/problems/palindromic-substrings/description/ C题解1&#xff1a;暴力解法。不断地移动窗口&#xff0c;判断是不是回文串。 class Solution { public:int countSubstrings(string s) {int len s.size();int res 0;for(int i 0;…

vscode如何配置python

Visual Studio Code配置Python环境 打开Visual Studio Code&#xff0c;点击主界面最左侧最下的选项&#xff08;extension&#xff09;,在搜索框中输入“python”,点击“Install”进行安装。 如下图所示&#xff1a; 重启或点击“Reload”(重载)后&#xff0c;即可使用&…

Vue工程化开发和脚手架Vue CLI

目录 一、介绍 二、使用步骤 1. 全局安装&#xff08;一次&#xff09; 2.查看Vue版本 3.创建项目架子&#xff08;项目名不能使用中文&#xff09; 4.启动项目 一、介绍 Vue CLI是Vue官方提供的一个全局命令工具。可以帮助我们快速创建一个开发的Vue项目的标准化基础架子…

C++进阶:AVL树

AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但 如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查 找元素相当于在顺序表中搜索元素&#xff0c;效率低下 。因此&#xff0c;两位俄罗斯的数学家 G.M. A delson- V elskii 和 E.M. L andis 在 1962 …

C++进阶 | [2] 多态

摘要&#xff1a;多态的概念&#xff0c;多态的条件&#xff0c;虚函数的重写&#xff0c;抽象类&#xff0c;多态的原理&#xff0c;虚函数与虚函数表&#xff0c;与多态有关的问答题 1. Concept 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就…

java入门-常用Dos命令

进入Dos窗口的快捷键&#xff1a;WinR 输入cmd &#xff08;1&#xff09;查看软件版本&#xff1a; java -version (2)切换盘符&#xff1a;eg:切换到D盘 (英文模式下) D: &#xff08;3&#xff09;查看当前目录的文件信息 dir (4&#xff09;进入当前盘下的某个目录&#…

有关css基础的基础选择器、字体文本属性、Emmet语法及复合选择器

这里写目录标题 一级目录二级目录三级目录 基础选择器、字体文本属性一、语法规范1.2.代码风格 二、基础选择器1.标签选择器2.类选择器&#xff1a;样式点.定义&#xff0c;结构类class调用3.id选择器&#xff1a;样式#定义&#xff0c;结构id调用&#xff0c;只能调用一次4.通…