前端学习、CSS

CSS可以嵌入到HTML中使用。

每个CSS语法包含两部分,选择器和应用的属性。

div用来声明针对页面上的哪些元素生效。

具体设置的属性以键值对形式表示,属性都在{}里,属性之间用;分割,键和值之间用:分割。

因为CSS的特殊命名风格,CSS不能进行算术运算。

注释:/* */

CSS的引入方式

1.内部样式

2.内联样式

使用style属性(每个标签都可以有style属性,里面就可以直接写CSS,不必写选择器,只是针对当前元素生效)

当给一个元素分多种方式设置样式时,如果是不同的属性,则会叠加,CSS就叫层叠样式表

如果是相同的样式,通过style属性的设置,优先级高于style标签。CSS的样式优先级,有一套复杂的规则。

3.外部样式

把CSS写到一个单独的.css文件中,通过link标签引入到html文件里

外部样式和内联样式冲突了,内联样式优先级高。

外部样式和内部样式冲突了,看谁离元素更近。

实际开发中,最主要的写法是外部样式,外部样式可以让页面结构和样式分离开。

同时也就可以复用样式到其他页面中了。内联样式往往是修修补补,比较直接,具有针对性。

样式格式

紧凑风格

p{color:red; font-size; 30px;}

展开风格

p{

color:red;

font-size:30px;

}

CSS选择器

描述了我们要选中页面中的哪个元素

{}的样式就是针对这些元素生效的。

CSS选择器有多种写法:

1.标签选择器

写个标签名字,标签名就表示针对当前页面中所有的指定标签,都会被选中。

2.类选择器

可以让样式差异化效果

类选择器允许让多个元素,引用同一个类。

类选择器是CSS选择器中,最灵活的一种方式,也是最常用的方式

3.id选择器

每个元素都有一个id属性,需要id值在页面中是唯一的。使用id选择器来选中到对应的元素上。

#开头表示是id选择器,后面的the-id对应到页面上的id位'the-id'的元素

4.通配符选择器

*{}

选中页面中的所有元素,可以让页面所有元素都被选中,通常用于干掉浏览器的默认样式。例如:文本默认的颜色,字体大小,默认段落间距等,这种没有指定样式,也会默认带的,这是浏览器赋予的默认样式,在不同浏览器上可能不一样。

上述这四个成为基础选择器,还有一类,符合选择器,简单来说就是把多个基础选择器给组合起来了。

复合选择器

1.后代选择器

即在指定的元素里面去筛选后代元素。

具体的写法:元素1 元素2 {样式声明}

元素1和元素2可以是标签选择器,也可以是类选择器,还可以是id选择器

效果一样

2.子选择器

和后代选择器类似,但是只能选择子标签,无法选择孙子及其以后得标签

3.并集选择器

针对多个不同的选择器,应用相同的样式属性。

4.伪类选择器

是选中元素的不同状态。主要先学两个:

:hover鼠标放上去

:active鼠标按下去

常用元素属性

字体类型、字体大小、字体粗细(100-900的整数)、文字倾斜。

rgb:计算机表示颜色的基本方式

三原色,可以构成各种颜色。计算机中典型的标识方式,就是使用一个字节,表示R,一个字节表示G,一个字节表示B。每种颜色的取值范围在0-255。合在一起,颜色的取值种类就很多了。

前端里就是这样表示颜色的。

rgba比rgb多一个参数,表示透明度(取值为0-1),透明度是1时,表示不透明。

十六进制也能表示颜色,全0表示黑色,#ff0000表示红色。这六位里,只有前两位为f表示红色,只有中间两位为f表示绿色,只有最后两位为f表示蓝色。

十六禁止的表示方式可以缩写,例如#AABBCC就可以缩写成#ABC。#AABCDD不能缩写

text-align:left、center、right。左对齐、居中对齐、右对齐。

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

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

相关文章

二次元风格地址发布页源码

二次元风格地址发布页源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面 下载地址 https://www.qqmu.com/2347.html

Benchmark学习笔记

小记一篇Benchmark的学习笔记 1.什么是benchmark 在维基百科中,是这样子讲的 “As computer architecture advanced, it became more difficult to compare the performance of various computer systems simply by looking at their specifications.Therefore, te…

Unity 游戏设计模式:单例模式

本文由 简悦 SimpRead 转码, 原文地址 mp.weixin.qq.com 单例模式 在 C# 游戏设计中,单例模式是一种常见的设计模式,它的主要目的是确保一个类只有一个实例,并提供一个全局访问点。单例模式在游戏开发中具有以下几个作用&#xf…

LeetCode41题:缺失的第一个正数(python3)

这道题写的时候完全没有思路,看了很久的题解,才总结出来。 class Solution:def firstMissingPositive(self, nums: List[int]) -> int:nums_set set(nums)n len(nums)for i in range(1, n 1):if i not in nums_set:return ireturn n 1

N皇后问题详解:回溯算法的应用与实践(dfs)

目录 一.问题描述二.思路分析1.DFS三.代码实现与解析1.分析2.完整代码 一.问题描述 题目如上图所示,在一个n*n的国际象棋棋盘上怎么摆放能使得皇后互相攻击不到(也就是在任意一列、一行、一条对角线上都不存在两个皇后) 二.思路分析 1.DFS …

基于springboot+vue的人格障碍诊断系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

CI/CD:安装配置Gitlab Runner

CI/CD笔记 安装配置Gitlab Runner - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/136296840 Address of this art…

Linux学习-C语言-运算符

目录 算术运算符: - * /:不能除0 %:不能对浮点数操作 :自增与运算符 i:先用再加 i:先加再用 --:自减运算符 常量,表达式不可以,--,变量可以 赋值运算符 三目运算符 逗号表达式 size…

计算机组成原理2

大家好我是jiantaoyab,这是我参考网上很多博主写的文章,所总结作为学习的笔记,在这里分享给大家,还有一些书籍《深入理解计算机系统》《计算机组成:结构化方法》《计算机体系结构:量化研究方法》 什么是性能呢? 在日常的生活中,我…

Linux信号【systemV】

目录 前言 正文: 1消息队列 1.1什么是消息队列? 1.2消息队列的数据结构 1.3消息队列的相关接口 1.3.1创建 1.3.2释放 1.3.3发送 1.3.4接收 1.4消息队列补充 2.信号量 2.1什么是信号量 2.2互斥相关概念 2.3信号量的数据结构 2.4…

【每日一题】3.2 求逆序对

题目描述 给定一个长度为 n的整数数列&#xff0c;请你计算数列中的逆序对的数量。 逆序对的定义如下&#xff1a;对于数列的第 i个和第 j个元素&#xff0c;如果满足 i<j 且 a[i]>a[j]&#xff0c;则其为一个逆序对&#xff1b;否则不是。 输入格式 第一行包含整数 n…

Unity 切换场景

场景切换前必须要将场景拖动到Build中 同步加载场景 using System.Collections; using System.Collections.Generic; //using UnityEditor.SearchService; using UnityEngine; // 场景管理 需要导入该类 using UnityEngine.SceneManagement;public class c3 : MonoBehaviour {…

【深度学习笔记】计算机视觉——图像增广

图像增广 sec_alexnet提到过大型数据集是成功应用深度神经网络的先决条件。 图像增广在对训练图像进行一系列的随机变化之后&#xff0c;生成相似但不同的训练样本&#xff0c;从而扩大了训练集的规模。 此外&#xff0c;应用图像增广的原因是&#xff0c;随机改变训练样本可以…

unity 场景烘焙中植物叶片(单面网络)出现的白面

Unity版本 2021.3.3 平台 Windows 在场景烘焙中烘焙植物的模型的时候发现植物的叶面一面是合理的&#xff0c;背面是全白的&#xff0c;在材质球上勾选了双面烘焙&#xff0c;情况如下 这个问题可能是由于植物叶片的单面网格导致的。在场景烘焙中&#xff0c;单面网格只会在一…

【Pytorch】模型部署

文章目录 0. 进行设置1. 获取数据2. FoodVision Mini模型部署实验概要3. 创建 EffNetB2 特征提取器4. 创建 ViT 特征提取器5. 使用训练好模型进行预测并计时6. 比较模型结果、预测时间和大小7. 通过创建 Gradio 演示让 FoodVision Mini 呈现8. 将Gradio demo变成可部署的应用程…

面试准备:排序算法大汇总 C++

排序算法总结 直接插入排序 取出未排序部分的第一个元素&#xff0c;与已排序的部分从后往前比较&#xff0c;找到合适的位置。将大于它的已排序的元素向后移动&#xff0c;将该元素插入到合适的位置。 //1. 直接插入排序 void InsertionSort(vector<int>& nums){f…

Unity 佳能SDK 及数据获取

1. 填写信息跟官方申请SDK,大概1-2个工作日会邮件回复你 佳能(中国)- 佳定制(佳能影像产品),SDK,EDSDK,CCAPI,软件开发包下载 2. 将SDK这两个文件放到 Unity Plugins文件夹 3. 把CameraControl 下面只要是绿色的 .cs 文件都复制到Unity 中

武汉灰京文化:多样化推广与创新引领游戏行业

作为专业的游戏推广服务商&#xff0c;武汉灰京文化注重多样化的推广策略&#xff0c;通过与各大媒体、社交平台和游戏社区建立紧密的合作关系&#xff0c;为游戏企业提供全方位的推广服务。他们通过精确的广告投放、内容创作和社交媒体互动等方式&#xff0c;将游戏信息传播给…

框架漏洞-->Struts2 Docker_Vulnhub搭建

来浅浅的讲一下Struts2漏洞 目录 1.Docker_Vulnhub搭建 2.Struts2 3.Struts2的框架特征 4.S2-029-->Remote Code Execution 5.漏洞复现 1.RCE 2.Getshell 1.Docker_Vulnhub搭建 因为我用的是Linux&#xff0c;所以我选择直接搭个docker&#xff0c;这里我建议先换个…

SpringCloud微服务-统一网关Gateway

统一网关Gateway 文章目录 统一网关Gateway1、为什么需要网关?2、gateway快速入门3、路由断言工厂Route Predicate Factory4、过滤器工厂-路由过滤器GatewayFilter5、全局过滤器**GlobalFilter**6、各种过滤器的执行顺序7、跨域问题的解决 1、为什么需要网关? 网关与各个服务…