前端学习----css基础语法

CSS概述

CAscading Style Sheets(级联样式表)

CSS是一种样式语言,用于对HTML文档控制外观,自定义布局等,例如字体,颜色,边距等

可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分

HTML与CSS的关系

HTML是网页端内容

CSS定义页面的样式

CSS基本语法

样式修饰表

行内样式表

通过标签的style属性来设置元素的样式

<!--直接在行内定义样式-->
<p style="color: pink ;font-size: 10px;font-weight: bold;">窗前明月光</p>

内嵌样式表

<!--修饰所有<p></p>-->
<style type = "text/css">p{font-size: 16px;color: pink;}
</style>

在CSS文件中设置样式

可以创建一个.css文件用于保存样式

只需要在html文件中导入即可使用

<link href="css/index.css" rel="stylesheet"/>

CSS选择器

标签选择器

p{font-size: 16px;color: pink;}

ID选择器

#title{font-size: 16px;color: pink;
}

类选择器

<p class = "p1"></p>
<p class = "p2"></p>
.p1{color:"green";
}
.p2{color:"red";
}

通配选择器

可以选中匹配所有标签

*{font-family:楷体;
}

选择器组合

可以为多个选择器定义相同的样式表

#title,.p1,.p2{font-family:楷体;
}

选择器修饰优先级

若两个样式表对同一个内容修饰,优先使用ID选择器,其次类选择器,最后标签选择器

CSS修饰文本

● color:字体颜色
● font-size:字体大小
● font-family:字体
● text-align:文本对齐
● text-decoration:line-through:定义穿过文本下的一条线
● text-decoration:underline:定义文本下的一条线
● text-decoration:none:定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进

CSS修饰背景

● background-color背景颜色
● background-image背景图片
● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置

CSS修饰列表

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。

CSS伪类

CSS伪类专门用来表示标签的一种特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
/*当鼠标放在标签上*/
a:hover{color:blue;background-color:aqua;}
/*当鼠标点击标签时*/
a:active{color:yellow;
}
/*向拥有鼠标焦点的标签进行修饰*/
.txt1:focus{background-color:aqua;
}

透明

定义透明效果的属性是opacity

opacity 属性设置标签的不透明级别  值为1。
规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。

块级,行级,行级块标签

块级标签

无论内容多少,都会独占一行

可以设置宽高,通过width和height

例如


行级标签

只占自身大小的标签,不会占一行

例如

行级块标签

不占一行,可以设置宽高

例如

Display

block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none :隐藏标签(标签将在页面中完全消失)

div和span

div和span都是纯净的标签,用于方便对其进行修饰

div

div是块级标签,没有任何附加样式,可以放置任何标

<div>div是一个纯净版的块级标签 
</div>

span

span是行级标签,是一个纯净版的行级标签

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

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

相关文章

freertos中的链表1 - 链表的数据结构

1.概述 freertos中链表的实现在 list.c 和 list.h。旨在通过学习freertos中的链表的数据结构&#xff0c;对freertos中的链表实现有一个整体的认识。freertos使用了三个数据结构来描述链表&#xff0c;分别是&#xff1a;List_t&#xff0c; MiniListItem_t&#xff0c;ListIt…

智能合约中时间依赖漏洞

时间依赖漏洞 时间依赖漏洞是智能合约中一个常见的安全问题&#xff0c;特别是在以太坊等区块链环境中。这是因为区块链的区块时间戳可以被矿工在一定程度上操纵&#xff0c;这使得依赖于时间戳的智能合约容易受到攻击。攻击者可以通过控制区块时间戳来触发合约中的某些条件&a…

B3637 最长上升子序列

最长上升子序列 题目描述 这是一个简单的动规板子题。 给出一个由 n ( n ≤ 5000 ) n(n\le 5000) n(n≤5000) 个不超过 1 0 6 10^6 106 的正整数组成的序列。请输出这个序列的最长上升子序列的长度。 最长上升子序列是指&#xff0c;从原序列中按顺序取出一些数字排在一起…

产品创新:驱动企业增长的核心动力

在当今快速变化的市场环境中&#xff0c;产品创新已成为企业生存和发展的关键。产品创新不仅涉及全新产品或服务的开发&#xff0c;也包括对现有产品或服务的持续改进和优化。本文将深入探讨产品创新的定义、重要性以及如何通过创新驱动企业增长&#xff0c;并结合实际案例进行…

Java核心: JarIndex的使用

在讲解Java类加载器的时候&#xff0c;我们发现URLClassLoader加载类或资源时通过访问ClassPath下的每一个路径&#xff0c;来确定类是否存在的&#xff0c;假设我们执行的命令是这样的 java -classpath D:\DiveInSpring\target\classes;C:\lib\spring-expression.jar;C:\lib\…

力扣第196题“删除重复的电子邮件

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在本篇文章中&#xff0c;我们将详细解读力扣第196题“删除重复的电子邮件”。通过学习本篇文章&#xff0c;读者将掌握如何使用SQL语句来解决这一问题&#xff0c;并了解相关的…

前端下载图片的几种方式

1.后端返回文件流&#xff0c;前端利用Blob解析文件流下载 2.下载资源必须是与页面地址同源时&#xff0c;直接利用a标签下载 注意点&#xff1a;下载资源必须与页面地址同源 3.利用fetch或者xhr从图片地址获取二进制数据&#xff08;blob&#xff09;进行下载 代码如下&am…

Robust Tiny Object Detection in Aerial Images amidst Label Noise

文章目录 AbstractIntroductionRelated WorkMethodsClass-aware Label CorrectionUpdateFilteringTrend-guided Learning StrategyTrend-guided Label ReweightingRecurrent Box RegenerationExperimentpaper Abstract 精确检测遥感图像中的小目标非常困难,因为这类目标视觉信…

Facebook开户|Facebook广告设计与测试优化

早上好家人们~今天Zoey给大家伙带来的是Facebook广告设计与测试优化&#xff0c;需要的家人们看过来啦&#xff01; 一、避免复杂用图和过多的文字 根据Facebook的数据显示&#xff0c;用户平均浏览一个贴文的时间在手机上仅花1.7秒、在电脑上则为2.5秒。因此&#xff0c;广告…

【Linux】进程7——进程地址空间

1.再谈fork 之前提到了fork之后对父子进程返回不同的id值&#xff0c;给父进程返回子进程的pid&#xff0c;给子进程返回0&#xff0c;所以对于一个id如何存储两个值的说法&#xff0c;在我们之前已经提到过了一个概念叫做写时拷贝&#xff0c;就是在子进程要想修改父进程的id…

首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题

首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题 我们的简约风格&#xff0c;以纯洁的白色和深邃的紫色为主色调&#xff0c;为您提供了一种清新、时尚的浏览体验。在这个简洁而美丽的界面中&#xff0c;您可以轻松畅享各种精彩短视频。我们专注于简单的…

C++命名空间的定义、C++命名空间的使用、C++输入输出等的介绍

文章目录 前言一、C命名空间的定义1. C命名空间产生的原因2. 作用域限定符3. C变量的访问顺序 二、C命名空间的使用1. 加命名空间名称及作用域限定符2. 使用using将命名空间中某个成员引入3. 使用using namespace 命名空间名称 引入4. 嵌套命名空间使用 三、 C输入&输出总结…

向AI请教如何说不

面对父母的催婚&#xff0c;你可以采取以下几个步骤来进行沟通和表达自己的立场&#xff1a; 理解与尊重&#xff1a;首先&#xff0c;要理解父母催婚背后的关心和期望。他们可能出于对你未来幸福和生活稳定的考虑。表达对他们关心的感激&#xff0c;这有助于建立良好的沟通基础…

超详解——python条件和循环——小白篇

目录 1. 缩进和悬挂else 2. 条件表达式 3. 和循环搭配的else 4. 可调用对象 总结&#xff1a; 1. 缩进和悬挂else 在Python中&#xff0c;代码块是通过缩进来表示的。条件判断和循环结构的代码块需要正确缩进。悬挂else指的是else子句和相应的if或循环在同一级别的缩进。 …

⌈ 传知代码 ⌋ 基于曲率的图重新布线

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

扩散模型Stable Diffusion

扩散模型构成 Text Encoder(CLIPText) Clip Text为文本编码器。以77 token为输入&#xff0c;输出为77 token 嵌入向量&#xff0c;每个向量有768维度。 Diffusion(UNetScheduler) 在潜在空间中逐步处理扩散信息。以文本嵌入向量和由噪声组成的起始多维数组为输入&#xff0c…

1909java内部知识管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java内部知识管理系统是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助采用了java设计&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开 发环境为TOMCAT7.0,Myeclipse8.5开发&…

近邻算法的详细介绍

近邻算法&#xff08;Nearest Neighbor Algorithm&#xff09;&#xff0c;通常称为 k-近邻算法&#xff08;k-Nearest Neighbors&#xff0c;简称 k-NN&#xff09;&#xff0c;是一种基本的分类和回归方法。它的工作原理非常直观&#xff1a;通过测量不同特征值之间的距离来进…

Matlab速通知识点(半小时速通)

#跟着网上课程学习了matlab的基础用法&#xff0c;在这里给大家整合出来&#xff0c;形成知识点的形式&#xff0c;以便大家查阅或者学习&#xff0c;知识点全&#xff0c;有注解~ %% a[1,2,3;4,5,6;7,8,9];%矩阵写法b1:1:10;%开始&#xff1a;步长&#xff1a;结束c1:10;%遇上…

热题系列章节5

169. 多数元素 给定一个大小为 n 的数组&#xff0c;找到其中的多数元素。多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1: 输入: [3,2,3] 输出: 3 示例 2: 输入: [2,2,1,1,1,2,2] 输出:…