【前端技术】CSS基础入门篇

一、 CSS简介

css(Cascading Style Sheets,缩写为 CSS,也叫作层叠样式表)是一套美化HTML标签所编写出页面的语法,CSS描述了如何在不同设备上渲染内容的方法。

二、 CSS基本引入方法

<!-- Cascading style shet:层叠样式表(CSS)
css引入方法 -->
<html lang="en"><head><meat charset="UTF-8"><title>CSS引入方法</title><!-- 2.页面级引入在style标签中编写 --><style type="text/css">div {Width: 100px;Height: 100px;Background-color: green;}</style><!-- 3.外部引入css文件div{Width:100px;Height:100px;Border-radius:50%;Background-color:black;}将该内容保存为tp.css,在相对路径下,内容为宽高各100像素,形状是圆角形,背景颜色为黑色在计算机中,同步和异步与生活中的正确理解是正好相反的,也就是说,生活中,两个人在同一时间吃饭是同步,而在计算机中,这个过程是叫做异步--><link rel="stylesheet" type="text/css" href="tp.css">
</head><body><!-- 1.行间样式 style中的就是CSS代码--><div style="Width:100px;height:100px;Background-color:red;"></div>
</body></html>

三、CSS选择器

 /* 1.通配符选择器 */* {margin: 0px;padding: 0px;/* !important表示优先使用 */Background-color: red !important;}/* css选择器 2.id选择器 */#only {Background-color: red;}/* css选择器 3.CLASS选择器背景颜色为绿色,class为demo的都加上该CSS
*/.demo {Background-color: green;}/* css选择器 4.标签选择器 
设置字体颜色为橘色,font-weight设置字体为加粗 标签选择器表示所有div都采用该格式
*/div {Background-color: black;Color: #f40;Font-weight: bold;}/*css选择器 5.分组选择器  > 组合器选择前一个元素的直接子代的节点 */div,span,p {color: red;}/*css选择器 6.直接子代选择器 */ul>li {font-size: 20px;}/* css选择器 7.一般兄弟组合器   p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素 */p~span {color: #f40;}/* css选择器 8.紧邻兄弟选择器   h3 + p 会匹配紧邻在 h2 元素后的第一个 <p> 元素 */h3+p {color: #000;}/* css选择器 9.结构伪类选择器 first-child:查找第一个元素last-child:查找最后一个元素nth-child(n):查找第n个元素,第一个元素n为1
*/p:first-child {color: red;}/* css选择器 9.伪类选择器 */a:hover {color: #00f;}/* css选择器 10.属性选择器 '[ ]'可以选择任何有值得属性填入其中,调用这个css样式 也可以只给这个一个属性加上样式(id="ls") */[id] {Background-color: blue;}/* css选择器 11.父子选择器/派生选择器 */div span {background-color: red;}

四、 CSS优先级问题

选择器的优先级:

  • !important > 内联样式 > id 选择器> class选择器 == 属性选择器 == 伪类选择器 > 标签选择器 > 通配符选择器
  • 权重值越高优先级越大,多种选择器叠加使用可以通过权重值相加,从而得出最终的权重
  • css权重是属于256进制,0到1之间隔了256位后才进的1
选择器权重优先级
!importantInfinity(正无穷)最高
内联样式1000第一
id选择器100第二
class、伪类、属性选择器10第三
标签选择器、伪元素选择器1第四
通用选择器、子选择器、一般兄弟选择器,紧邻兄弟选择器0

五、寄语

1.css是前端重要的组成部分,学会css可以有很多的玩法;
2.多学习、多看、学想、多实操,成为更好的你;
3.喜欢的小伙伴可以点赞、关注、收藏哟!

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

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

相关文章

[Android]Jetpack Compose状态管理

在 Jetpack Compose 中&#xff0c;状态管理是构建交互式应用程序的核心。Compose 设计思想强调了不变性和重新组合的概念&#xff0c;以支持高效的 UI 更新。 一、使用 Remember 和 MutableState 管理状态 remember 和 mutableStateOf 是管理状态的基础工具&#xff0c;特别…

ctfshow web入门 SQl注入 web191--web200

web191 多了一个正则绕过 上脚本布尔盲注 用ord #author:yu22x import requests import string url"http://70adf0cb-2208-4974-b064-50a4f4103541.challenge.ctf.show/api/index.php" sstring.ascii_lettersstring.digits flag for i in range(1,45):print(i)for j…

【C 数据结构】二叉树

文章目录 【 1. 基本原理 】1.1 二叉树的性质1.2 满二叉树1.3 完全二叉树 【 2. 二叉树的顺序存储结构 】2.1 完全二叉树的顺序存储2.2 普通二叉树的顺序存储2.3 完全二叉树的还原 【 3. 二叉树的链式存储结构 】【 4. 二叉树的先序遍历 】4.1 递归实现4.2 非递归实现 【 5. 二…

面试算法十问2(中英文)

算法题 1: 数组和字符串 Q: How would you find the first non-repeating character in a string? 问&#xff1a;你如何找到字符串中的第一个不重复字符&#xff1f; Explanation: Use a hash table to store the count of each character, then iterate through the strin…

计算质数算法

// 计算质数// 输入&#xff1a;n 10// 输出&#xff1a;4// 解释&#xff1a;小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。public static int countPrimes1(int n){boolean[] isPrim new boolean[n];Arrays.fill(isPrim,true);for (int i 2; i*i<n ; i…

项目九:学会python爬虫数据保存(小白圆满级)

前言 前篇我们能够学会爬虫的请求和解析的简单应用&#xff0c;也能看懂爬虫的简单代码和运用&#xff0c;这一次我们学一下爬虫页面请求解析的数据通过什么样的方法来保存。 目录 前言 存储方法 1.文本文件 2.CSV文件 3.Excel文件 4.HTML文件 5.JSON文件 6.XML文件 …

[可达鸭四月月赛——入门赛第六场(周六) T4]原初数题解

本题解署名&#xff1a;王胤皓 正文开始 题意 时间限制&#xff1a;1秒 内存限制&#xff1a;256M 题目描述 如果一个数字只由若干个不同的质数相乘得到&#xff0c;那么我们就称这个数字为“原初数”。本题中指的数字都是大于 1 1 1 的数字。 小可认为&#xff0c;原初…

QT Sqlite 内存模式 简单读写

//本文描述了QT Sqlite 内存模式 &#xff0c;使用QT 自带库文件&#xff0c;写入和读取。 //QT 6.2.4 MSVC2019调试通过。 //需要在pro文件中加入QT sql #include <QCoreApplication> #include <QSqlDatabase> #include <QSqlQuery> #include <QDebu…

在android 源代码中 使用gradlew 编译android 模块

gradle 编译子模块 在Gradle中编译子模块通常涉及到以下步骤&#xff1a; 1、确保你的项目结构是模块化的&#xff0c;每个子模块都是一个独立的目录2、在项目的根目录下的setting.gradle文件中&#xff0c;包含需要编译的子模块。例如&#xff1a;include ‘:submodule-name…

3D开发工具HOOPS SDK在电子设计自动化(EDA)中的应用

在当今电子行业中&#xff0c;电子设计自动化&#xff08;EDA&#xff09;软件的重要性日益突显。这些软件不仅需要能够处理大量的电子设计数据&#xff0c;而且需要提供高效的设计工作流程、准确的分析模拟功能以及直观的可视化界面。为了满足这些需求&#xff0c;开发者们寻求…

Kafak简单使用

Concept 待后续填坑…Push Data from kafka import KafkaProducer import jsondef push_kafka(sqlstring, valuelist):# logging.info("kafka string ----- [%s]" % (sqlstring % valuelist))producer KafkaProducer(bootstrap_servers["ip1:9092", &quo…

真实世界的密码学(一)

原文&#xff1a;annas-archive.org/md5/655c944001312f47533514408a1a919a 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 序言 当你拿起这本书时&#xff0c;你可能会想&#xff0c;为什么又一本关于密码学的书&#xff1f;甚至&#xff0c;为什么我要读这本…

软考高级架构师:AI 通俗讲解软件维护的类型:正确性维护、适应性维护、完善性维护、预防性维护

软件维护是指在软件交付使用后进行的一系列活动&#xff0c;其目的是修复错误、提升性能或更新软件以适应变化的需求。通常&#xff0c;软件维护可以分为四种类型&#xff1a;正确性维护、适应性维护、完善性维护和预防性维护。下面我将用简单的例子和通俗的语言来解释这四种类…

实验4 数字频率计

实验目的&#xff1a; 1、使用铆孔U7输出一个脉冲&#xff0c;频率不定。 2、使用铆孔V7测量脉冲频率&#xff0c;并在数码管上显示。 实验内容及步骤&#xff1a; 设计原理 测量频率的方法有很多&#xff0c;按照其工作原理分为无源测量法、比较法、示波器法和计数法等。…

【Java】文件操作(一)

文章目录 ✍一、文件的基本认识1.文件是什么&#xff1f;2.文本文件和二进制文件3.文件权限4.相对路径和绝对路径1.1绝对路径1.2相对路径 ✍二、文件的基本操作1.FIle的属性2.File的构造方法3.File类的方法3.1File类的获取操作3.2File类的判断操作3.3文件创建和删除3.4其他的常…

深入理解JavaScript:对象什么时候创建

&#x1f31f; 我们在chrome浏览器中debug程序。为了好debug我们会写一些在日常开发中基本不会采用的代码书写方式。 JavaScript中创建对象有3中方式&#xff1a; 1、对象字面量&#xff1b; 2、new&#xff1b; 3、Object.create(对象)&#xff1b; 1、使用new创建对象 fun…

玩转PyCharm

玩转PyCharm PyCharm是由JetBrains公司开发的提供给Python专业的开发者的一个集成开发环境&#xff0c;它最大的优点是能够大大提升Python开发者的工作效率&#xff0c;为开发者集成了很多用起来非常顺手的功能&#xff0c;包括代码调试、高亮语法、代码跳转、智能提示、自动补…

SWOT分析法:知彼知己的战略规划工具

文章目录 一、什么是SWOT分析法二、SWOT分析法如何产生的三、SWOT分析法适合哪些人四、SWOT分析法的应用场景五、SWOT分析法的优缺点六、SWOT分析实例 一、什么是SWOT分析法 SWOT分析法是一种用于评估组织、项目、个人或任何其他事物的战略规划工具。SWOT是Strengths&#xff…

PotPlayer详细安装教程

安装步骤 进入官网&#xff1a; https://potplayer.tv/ 根据自己电脑的windows系统选择对应的版本安装 选择合适的字体 下载完成 优化设置 刚下好的potplayer仅限于能用&#xff0c;所有设置均为默认状态&#xff0c;我们需要进行优化 首先打开potplayer 右击选择选项 在…

C语言洛谷题目分享(10)最厉害的学生和明明的随机数

目录 1.前言 2.俩则题目 1.最厉害的学生&#xff08;p5740&#xff09; 1.题目描述 2.输入格式 3.输出格式 4.输入输出样例 5.题解 2. 明明的随机数 1.题目描述 2.输入格式 3.输出格式 4.输入输出样例 5.题解 3.小结 1.前言 哈喽大家好啊&#xff0c;今天继续为大…