前端入门笔记 02 —— CSS

news2024/11/7 18:05:17

CSS标签通常要配合html或者js使用

CSS本身的构造

p{color : red}
	/*color 属性 red 值*/
	/*p选择器 括号内内容 生命*/

配合html

<style>
	p{color : red}

<\style>

或者直接引入整个css文件

<head>
    <style type = text/css>
        @import "1.3.css";
    </style>
</head>

前端变量、类等推荐的命名方法

BME命名法

css选择器

类型 类 ID

先在html中创建对应的段落,并声明他们的类

<p> first paragraph </p>
<p class = "paragraph"> second paragraph </p>
<p class = "paragraph extra-para" > third paragraph </p>
<p id = "para" >forth paragraph </p>

在css中设置类

p{color : blue}
.paragraph{color : red}
.extra-para{font-size: 30;}
#para{color : green;}

在这里插入图片描述
优先级
I D > 类 > 标签 ID>类>标签 ID>>标签

一般ID是不复用的,类可以多次复用

标签属性

控制所有带某个标签的对象

<img src = https://img-blog.csdnimg.cn/04466f73407b403abb502e86e6ad52a9.png>
img[src]{width: 200; height: 100;}

伪类 伪元素

只会在鼠标指针悬浮到这个元素上的时候选择这个元素

<a href = http://www.baidu.com>A hypertext</a>
a:hover{color : red}

这时候超链接就会变红色

后代选择器

用来选择特定元素或元素组的后代

<div>
     <span>
         span 1
         <span>span 2</span>
     </span>
 </div>
 <span>span 3</span>
span{background-color: aqua;}
div span{background-color:coral;}

在这里插入图片描述
若第二句css指令不执行 span全为蓝色

css常用属性

p{
 width:200px;
 height:100px;
 color: red;
 border: 1px solid #a8a8a8; /*边框*/
 text-align: center;/*文字位置 可选left center right*/
 line-height: 50px; /*行间距*/
 letter-spacing : 4px;/*字母间距*/
 word-spacing : 10px;/*单词间距*/
 font-size: 15px;/*字体大小*/
 font-family:serif /*字体设置*/
}
.eclipse{
	width: 100px;
	white-space: nowrap;/*连续空白符被合并*/
	overflow:hidden;/*隐藏溢出的内容*/
	text-overflow:ellipsis;/*省略号代替溢出*/
}
.trans{/*简单动画*/
	width: 100px;
	height: 100px;
	background: red;
	box-shadow: 1px 10px 5px #888888 /*阴影x轴偏移量 y轴 模糊半径 颜色*/
	transition: width 2s; /*width 从100px变300px,过渡时间2s*/
}
.trans:hover{width:300px;}
.rotate{
	width: 100px;
	height: 100px;
	background: green;
	transform: rotate(7deg); /*旋转角度*/
}
.box{
	width: 100px;
	height: 100px;
	border: 4px solid green;/*边框*/
	border-bottom: 8px;
	border-radius:20px;/*圆角边框*/
	/*border-radius参数改成50%就是圆*/
	
	padding: 25px ;/*改变内容和边框的距离*/
	/*可设置1 2 4 个参数 分别对应 1.总体设置四个边距 2.上下和左右边距 3.单独设置上下左右编剧*/
	margin: 25px;/*对象和其他对象的间距*/
	/*也可设置1 2 4个参数*/
}
ul{
	list-sytle-type:none; /*引导列表元素的标志*/
	diaplay:flex /*横着排列*/
}
li a{
	text-decoration:none;/*超文本修饰线*/
	margin:10px;
}	

加载动画效果

.loading{
	width: 35px;
	height: 35px;
	border:5px solid rgba(189, 189, 189, 0.25);
	border-left-color:rgba(3, 155, 229 1);
	border-top-color:rgba(3, 155, 229 1);
	border-radius: 50%;

	animation: rotate 1s infinite linear;
	/*旋转 一秒 无限循环 线性播放*/
}
@keyframs rotate
{
	from{
		transform: rotate(0)
	}
	to{
		transform: rotate(1turn)
	}
}

CSS盒模型

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【vue组件之间的数据传递和组件的生命周期】一.组件之间的通信;二.组件的声明周期

目录 一.组件之间的通信 1.组件之间的关系&#xff1a;父子关系、兄弟关系、跨级关系 2.父子组件之间的通信&#xff08;数据传递&#xff09;&#xff1a; &#xff08;1&#xff09;父组件----》子组件&#xff1a;使用props &#xff08;2&#xff09;子组件----》父组件…

为什么互联网公司不欢迎中年人?

除开几个“越老越值钱”的岗位&#xff08;如医生、教师、建筑师&#xff09;外&#xff0c;大多数公司就是不欢迎中年人的。 你很难见到30岁的地推、40岁的销售、50岁的文员&#xff0c;但是20岁的年轻小伙一抓一大把&#xff0c;我们的互联网经济&#xff0c;就是建立在人口密…

RHEC——ansible配置yum源仓库

1.挂载本地光盘到/mnt 2.配置yum源仓库文件通过多种方式实现 1&#xff09;、仓库1 &#xff1a; Name: RH294_Base Description&#xff1a; RH294 base software Base urt: file:///mnt/BaseOS 不需要验证钦件包 GPG 签名 启用此软件仓库 2&#xff09;、仓库 2: Name: RH29…

立创eda专业版学习笔记(1)

之前那些博客对应的是立创eda标准版&#xff0c;版本号是6.5.4以前 最近开始使用专业版&#xff0c;原本以为专业版是标准版的基础上添加了些功能&#xff0c;现在才发现不是这么回事&#xff0c;专业版跟标准版在界面上的区别很大&#xff0c;几乎就是另外一个软件了&#xff…

外贸客户接待的基本环节有哪些?

外贸客户来了&#xff0c;接待人员一定要有耐心&#xff0c;那么怎么接待呢&#xff1f;以下是米贸搜为您整理的外贸客户接待流程。希望对你有帮助。外贸客户接待流程既然客人愿意来我们公司参观&#xff0c;他们一定有很大的诚意。但从这几年的案例来看&#xff0c;大部分来访…

JavaSE学习day1_01,计算机基础知识

学习正式开始&#xff1a; 学习之前先了解一些计算机基本常识&#xff1a; 1. CMD 1.1 什么是CMD&#xff1f; 先看一张图&#xff1a; 这是黑客大佬使用的命令。 这是现代计算机的图形化界面。学过操作系统的同学应该知道这是操作系统提供的一个接口&#xff0c;它严格意义…

ORB-SLAM2 --- KeyFrame::SetBadFlag函数

目录 1.函数作用 2.code 3.函数解析 1.函数作用 真正地执行删除关键帧的操作。 需要删除的是该关键帧和其他所有帧、地图点之间的连接关系。 2.code void KeyFrame::SetBadFlag() { // Step 1 首先处理一下删除不了的特殊情况{unique_lock<mutex> lock(mMutexConn…

visual studio控制台中文乱码问题

踩坑经历&#xff1a; 这是一个向文件中写入文字&#xff08;中文&#xff0c;在将文件中文字读取出来的代码。读取出来的结果是符号码。 这个问题在网上找了很多的解决办法&#xff0c;都没有完全解决。 其实要不出现乱码&#xff0c;就要保持控制台编码和源代码编码相一致就可…

照片恢复软件哪个好用?5个好用的照片恢复软件推荐

照片可以勾起回忆&#xff0c;让我们想起与最亲近的人一起度过的时光&#xff0c;这就是为什么仅仅丢失一张重要照片就会让人感觉完全毁灭性的——几乎就像你失去了记忆本身一样。好消息是&#xff0c;大多数丢失或意外删除的照片都可以使用照片恢复软件恢复&#xff0c;而且我…

XILLINX时钟约束相关说明

时钟说明 primary clock 基准时钟&#xff0c;primary这里有“基本的”更贴切&#xff0c;虽然其有“主要的、首要的、初级的、原发性的”意思。 提供的基准时钟有俩种情况&#xff1a; 时钟由外部时钟源提供&#xff0c;通过输入引脚进入FPGA&#xff1b;高速收发器(GT)的时…

Google编程规范

Google编程规范总结一、前言二、头文件三、类构造函数可拷贝类型和可移动类型struct和class接口存取控制和声明顺序四、来自Google的奇技所有权与智能指针cpplint五、其他C特性六、命名约定(重点)七、注释(重点)八、代码格式(重点)九、结束语一、前言 昨天听了雷军的演讲&#…

猪齿鱼知识沉淀

数据源知识沉淀 1、下拉框与Lov的注意点&#xff1a; 下拉框 {name: intertradeType,lookupCode: "HCMS.INTERTRADE_TYPE",label: intl.get(${prefix}.table.intertradeType).d(贸易性质),required: true, }, {name: intertradeTypeMeaning,label: intl.get(${pref…

2023 docker安装gitlab-ce

公司搭建私服git来管理代码。这里使用docker来安装gitlab&#xff0c;过程相对简单。需要服务器至少有4g内存。这里安装的gitlab-ce社区版。前提是安装了docker 安装gitlab-ce 下载镜像&#xff0c;等待下载… docker pull gitlab/gitlab-ce:latest建立了目录 /opt/docker/git…

基础知识一览

这里写目录标题1.类1.1 类和对象的关系1.2 构造函数1.2.1 概念1.2.1.1 修饰符1.2.1.2 返回值类型1.2.1.3 函数名1.2.1.4 参数列表1.2.1.5 return语句1.2.1.6 扩展2.继承2.1 继承的好处和限制2.2 子父类中定义了一模一样的成员变量1.类 1.1 类和对象的关系 类是对象的抽象,对象…

利用宝塔配置jdk环境

首先&#xff0c;下载linux对应版本jdk(注意是Linux版本)&#xff0c;然后通过宝塔传到服务器上。选择相应的jdk文件&#xff0c;将其从本机上传到服务器上的对应文件夹。 上传后可以看到对应如下&#xff1a; 然后将其解压到对应的目录下&#xff0c;使用如下命令&#xff1…

使用Jmeter轻松实现AES加密测试

大家在自己公司做接口测试的时候&#xff0c;有没有遇到过接口做加密处理的情况呢&#xff1f;相信我们的读者朋友们都有一定的概率会遇到这种情况&#xff0c;尤其是对接口数据安全有一定要求的公司接口数据一定会做加密处理。那么遇到加密情况&#xff0c;大家使用工具JMeter…

CAD快速看图怎么转换成PDF格式?这一款软件就足够

CAD快速看图怎么转换成PDF格式&#xff1f;CAD文件是一种比较专业的文件&#xff0c;一般用于设计、绘图等&#xff0c;这种文件需要特殊的软件才可以打开&#xff0c;不过对于大多数人来说&#xff0c;都很少会安装这种软件&#xff0c;因为下载和安装软件需要很多时间&#x…

【计算机视觉】OpenCV 4高级编程与项目实战(Python版)【2】:操作像素

像素是构成图像的基本单位。现在看图1所示的花卉图像,这幅图看着很细腻,不过将图像的白框区域放大,会看到如图2所示的效果,细腻的图像不见了,取而代之的是一个一个的小方块,每一个小方块就是一个像素。 图6 花卉 图7 放大的花卉局部

分库分表解决方案

前言 因为每个学校学生用餐人数太多&#xff0c;一天订单20万量增长&#xff0c;而且学校使用也在不停的增多&#xff0c;公司最近在搞分库分表&#xff0c;数据分离到不同的库中或表中&#xff0c; 所以这段时间了解过数据库的分库分表&#xff0c;也读过很多大神写的博文&…

elasticsearch 7.9.3知识归纳整理(五)之es的索引生命周期管理

es的索引生命周期管理 一、常见概念及命令 1.1、概念 ILM定义了四个生命周期阶段&#xff1a; Hot&#xff1a;正在积极地更新和查询索引。 Warm&#xff1a;不再更新索引&#xff0c;但仍在查询。 cold&#xff1a;不再更新索引&#xff0c;很少查询。信息仍然需要可搜索&…