css入门
moboyou 2025-06-15 19:10 4 浏览
文章目录
CSS入门
一、CSS概述
1、概述
2、CSS的作用
3、初体验
4、CSS基础语法
4、HTML引入CSS
二、选择器
1、基本选择器
2、扩展选择器
3、超链接选择器
三、样式权重问题
1、权重计算规则
2、权重示例
3、具体示例
4、 !important
四、CSS常用样式
1、字体和文本属性
2、背景属性
3、显示属性
4、浮动属性
五、盒子模型
CSS入门
一、CSS概述
1、概述
CSS（Cascading Style Sheet）层叠样式表，用于美化页面
层叠样式：对同一个标签，添加多个不同的样式，所有样式会叠加在一起展示出效果。
2、CSS的作用
HTML 标签也有属性，为什么还要 CSS ？
CSS 可以给任意标签添加样式（可以实现 HTML 做不到的效果）
解耦（让 HTML 专注于网页结构搭建，CSS 专注于样式效果）
CSS 实现了样式与内容的分离，提高了显示效果和样式的复用性。
3、初体验
4、CSS基础语法
CSS 基本语法：
样式名 和 样式值 之间 以 冒号 分隔。
一个样式名 可以跟 多个样式值，以 空格 分隔。
多个样式之间，以 分号 分割。
4、HTML引入CSS
CSS有自己单独的语法，但是必须要引入到HTML中才能使用。一般有以下三种方式：
优先级：
行内 > 内部 = 外部 （优先级低的样式会被优先级高的覆盖，一样的优先级看先后）
浏览器加载网页从上至下加载，属性相同会覆盖（后面的覆盖前面的），不相同会叠加。
位置：
style标签和link标签可以放在html中任意位置，一般放head标签内。
二、选择器
选择器 selector：
格式：选择器 {css样式}
作用：通过选择器，选中指定的标签，为选中的标签添加css样式
1、基本选择器
包括 标签选择器、id选择器、class选择器
2、扩展选择器
扩展选择器：基本选择器延伸出来的选择器，在某些场景下，用基本选择器太麻烦。
3、超链接选择器
三、样式权重问题
当多个规则适用于同一个元素时，CSS 会根据权重来确定使用哪个样式。权重较高的样式会覆盖权重较低的样式。
权重由选择器的类型和数量决定。
1、权重计算规则
CSS 的权重可以分为四个部分，通常用四个数字表示（a, b, c, d）：
a：行内样式的数量（例如：style="..."）。行内样式的权重最高。
b：ID 选择器的数量（如 #id）。
c：类选择器、伪类选择器、属性选择器的数量（如 .class、:hover、[type="text"]）。
d：元素选择器、伪元素选择器的数量（如 div、p、::before）。
2、权重示例
3、具体示例
在这个例子中，div 的背景颜色将被黄色覆盖，因为 行内样式 的权重最高。
4、 !important
使用 !important 可以强制某个规则获得更高的优先级，但应谨慎使用，因为这会影响代码的可维护性。
四、CSS常用样式
1、字体和文本属性
2、背景属性
3、显示属性
4、浮动属性
打破常规，让div也能变小（实际大小跟 宽和高）
五、盒子模型
在 html 中，所有的标签都可以看成一个盒子。
在浏览器 F12 可以看一下
相关推荐
- 在html5页面中如何使用vue3
-
今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:<html><scri...
- 分享几个css实用技巧
-
本篇将介绍几个css小技巧，目录如下：自定义引用标签的符号重置所有标签样式禁止文本选择制作小三角形自定义<q>引用标签的符号默认q标签引用符号是浏览器根据不同语言环境自动设置的，当然我们也...
- 复玥语 Web Fonts 的引入方法
-
CSS的font-face属性CSS的font-face是CSS3中允许使用自定义字体的一个模块，功能是支持WEB字体，能够将网络地址、自定义的Web上的字体嵌入到你的网页中。...
- 17个CSS知识点整理
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（点击页底“阅读原文”下载源代码）●●●1、对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机...
- JavaScript开发基础——CSS知识
-
JavaScript开发基础——CSS知识使用CSS技术可以对文档进行精细的页面美化，CSS不仅可以对单个页面进行格式化，还可以对多个页面使用相同的样式进行修饰，以达到统一的效果。CSS的相关概念CS...
- HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
-
为什么学习网页制作？互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则...
- 如何拥有渐变色 | css进阶
-
渐变色--线性渐变人类对美的追求是无止境的，色彩的搭配是对美的最基本要求，而其中的渐变，就能给人一种舒缓的感觉，它不那么的突兀，给人一种不逼迫、缓缓地和高逼格感觉。Css3引入了渐变的功能，有线性渐变...
- Tailwindcss 入门
-
是什么？Tailwindcss是一个功能类优先的CSS框架，通过flex,pt-4,text-center和rotate-90这种原子类组合快速构建网站，而不需要离开你的HTML。...
- html css js基础知识点
-
提示：点击上方"蓝色字体"↑可以订阅噢！1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更...
- (一)熟练HTML5+CSS3，每天复习一遍
-
前言学习网页的概念和分类，了解静态网页和动态网页的不同；了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念，制作简单的HTML页面的开发。什么是网页可以在internet上通过网页浏...
- JavaScript代码怎样引入到HTML中?
-
JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...
- 你知道HTML、CSS、JS文件在浏览器中是如何转化成页面的吗?
-
在前面一篇文章：「高频面试题」浏览器从输入url到页面展示中间发生了什么中，我们有对浏览器的渲染流程做了一个概括性的介绍，今天这篇文章我们将深入学习这部分内容。对于很多前端开发来说，平常做工主要专注...
- HTML页面中head标签有啥用?——零基础自学网页制作
-
head标签概述通过之前三节的学习，我们基本了解了HTML标记语言的基本语法，也明确了一个基本原则，那就是网页中所有的可视信息都是写在<body></body>标签之间的，在一...
- 一、什么是CSS3
-
一、什么是CSS3如何学习SEO搜索引擎优化CSS是什么CascadingSheet层叠级联样式表，表现，网页美化CSS发展史：CSS1.0CSS2.0DIV+CSSHTML和CSS结构分...
- html实现原生table并设置表格边框的两种方式
-
在HTML中实现原生表格并设置表格边框的详尽教程在HTML中，表格是展示结构化数据的重要工具。为了使表格更加清晰、美观，设置表格边框是常见的需求。本文将深入探讨两种原生方式来实现表格边框...
- 一周热门
- 最近发表
- 标签列表
-
- curseforge官网网址 (16)
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle 数据导出导入 (16)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- oracle修改端口 (15)
- 左连接 oracle (15)
- oracle 转义字符 (14)
- oracle安装补丁 (19)
- matlab归一化 (16)
- matlab脚本 (14)
- 共轭梯度法matlab (16)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- c语言编程小知识大全 (17)
- css class选择器用法 (25)
- css样式引入 (30)