Web之CSS笔记

news2024/12/22 23:16:22

Web之HTML、CSS、JS

      • 二、CSS（Cascading Style Sheets层叠样式表）
        • CSS与HTML的结合方式
        • CSS选择器
        • CSS基本属性
        • CSS伪类
        • DIV
        • CSS轮廓
        • CSS边框
        • 盒子模型
        • CSS定位

Web之HTML笔记

二、CSS（Cascading Style Sheets层叠样式表）

Css是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

优势

  • 格式和结构分离：有利于格式的重用以及网页的修改与维护。
  • 精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
  • 实现多个网页同时更新。
CSS与HTML的结合方式

方式一：内联/行内样式
在HTML标签上通过style属性来引用CSS代码。

  • 优点：简单方便
  • 缺点：只能对一个标签进行修饰
<body>
    <div style="color: blue">聚沙成塔，滴水穿石。</div>
</body>

方式二：内部样式表
通过<style>标签来声明CSS。

  • 优点：可以通过多个标签进行统一的样式设置
  • 缺点：只能在本页面上进行修饰

语法： 选择器 {属性:值; 属性:值}

<style>
    div {
        color: blueviolet;
    }
</style>

<body>
    <div>聚沙成塔，滴水穿石。</div>
</body>

方式三：外部样式表
单独定义一个CSS文件，CSS文件的后缀名就是.css。
在<head>中使用<link>标签引用外部的css文件

/* test.css */
div {
    color: blueviolet
}
<!DOCTYPE html>
<html lang="en">   <!-- 英文 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello, HTML!</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div>聚沙成塔，滴水穿石。</div>
</body>

</html>

<meta>标签

属性描述
charset规定 HTML 文档的字符编码。
content定义与 http-equiv 或 name 属性相关的元信息。
http-equiv把 content 属性关联到 HTTP 头部。
name把 content 属性关联到一个名称。
scheme定义用于翻译 content 属性值的格式。
CSS选择器

元素（标签）选择器
它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称。

<style>
    div {
        color: cyan
    }
</style>

<body>
    
    <div>聚沙成塔，滴水穿石。</div>
    <div>千里之行，始于足下。</div>
</body>

类选择器 & id选择器
类选择器在使用时使用 . 来描述，它描述的是元素上的class属性值。
id选择器只能选择一个元素，使用 # 引入，引用的是元素的id属性值。（比类选择器更具唯一性）

<style>
    .a {
        color: cyan
    }

    #b {
        color: blue
    }
</style>

<body>
    <div class="a">聚沙成塔，滴水穿石。</div>
    <div id="b">千里之行，始于足下。</div>
</body>
CSS基本属性

背景属性

  • background-color 设置元素的背景颜色。
  • background-image 把图像设置为背景。
  • background-repeat 设置背景图像的墙纸效果，是否及如何重复 repeat：在垂直方向和水平方向重复 repeat-x：仅在水平方向重复 repeat-y：仅在垂直方向重复 no-repeat：仅显示一次
  • background-position 设置背景图像的起始位置
  • background-attachment 背景图像固定或随着页面滚动 默认值是 scroll：默认情况下，背景会随文档滚动 可取值为fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			background-color: red;
			font-size: 40px;
		}
		.p1{
			font-family: 隶书;
		}
		body{
			/*background-color:yellow;
			background-image: url("image/wudaojiaoshi.jpg");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: 20px 30px;*/
			background:yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 30px 40px;
		}
	</style>
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">baidu</p>
	<p class="p1">百度</p>
</body>
</html>

文本属性

  • 指定字体：font-family : value
  • 字体大小：font-size : value 
    •  px：像素  

    •  em：倍数
  • 字体加粗：font-weight : normal / bold
  • 规定斜体文本： font-style : italic倾斜，强调实现斜体字 / oblique倾斜，更注重实现倾斜效果（常用）/ normal正常显示（默认值）
  • 文本颜色：color : value
  • 文本方向：dircetion : ltr, rtl
  • 字符间距：letter-spacing : npx(n可以是负数)
  • 行高：line-height : value
  • 文本排列：text-align : left / right / center/ ustify:两端对齐(应用在多行文本中，单行文本不生效)
  • 文字修饰：text-decoration : none / underline / line-through（删除线）/ overline
  • 文本设置阴影：text-shadow
  • 首行文本缩进：text-indent : value（nem, npx）
  • 大小写字母转换：text-transform : uppercase(全部大写) / lowercase(全部小写) / capitalize(在所有小写单词中，首字母大写)
  • 列表属性 类型：list-style-type : disc(圆点) / circle(圆圈) / square(方块) / decimal(数字)… 位置：list-style-position : outside(外) / inside
  • 图像：list-style-image : url(…)
CSS伪类

用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。

动态伪类作用
:link链接没有被访问前的样式效果
:visited链接被访问后的样式效果
:hover鼠标悬停在元素上面时的样式效果
:active点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus用于元素成为焦点时的样式效果，常用与表单元素
a:link{
	color:red;
}
a:visited{
	color: green;
}
a:hover{
	color: yellow;
	font-size: 30px;
}
a:active{
	color:blue;
}
label:hover{
	color:red;
}
input:hover{
	background-color: red;
}
input:active{
	background-color: blue;
}
input:focus{
	background-color: yellow;
}
结构伪类作用
:first-child选择某个元素的第一个子元素
:last-child选择某个元素的最后一个子元素
:nth-child()选择某个当前元素的兄弟节点下的一个或多个特定的子元素
:nth-last-child()选择某个当前元素的兄弟节点的一个或多个特定的子元素，从后往前数
:first-of-type选择一个父级元素下第一个同类型子元素
伪元素选择器作用
::selection选择指定元素中被用户选中的内容
::before可以在内容之前插入新内容
::after可以在内容之后插入新内容
::first-line选择指定选择器的首行
::first-letter选择文本的第一个字符
/*可以将p换成h1*/
p::before{
	content: "终于找到你，";
}
/*可以将body也换成h1*/
body::after{
	content: "依依不舍离开你，";
}
p::first-line{
	background-color: yellow;
}
p::first-letter{
	font-size: 30px;
}
p::selection{
	background-color: red;
}
DIV

DIV是层叠样式表中的定位技术，全称DIVision；有时把div称为图层，更多时候称为“块”。

DIV溢出处理效果

  • 超出div宽度高度的文字或图片进行隐藏处理
  • 超出div宽度高度的文字或图片增加滚动条
overflow属性描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。
CSS轮廓

CSS轮廓是用于在元素周围绘制线条的属性，位于边框边缘的外围，可以起到突出元素的作用。轮廓的样式、颜色和宽度可以通过CSS outline属性进行规定，轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓属性说明
outline-color设置轮廓的颜色
outline-style设置轮廓的样式 solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（凹槽）、ridge（垄脊）、inset（内嵌）、outset（外凸）或 none（无轮廓）
outline-width设置轮廓的宽度
outline-offset设置轮廓与元素边框之间的距离 像素值或正值百分比
CSS边框

指定元素边框的样式、宽度和颜色。

border属性说明
border-width指定边框的宽度
border-style指定边框的样式
border-color指定边框的颜色
#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	top:150px;
	left:150px;
	position: absolute;
	overflow: hidden;
	/*outline: none;*/
	border-bottom: solid;
}

#div2{
	top:150px;
	left:350px;
	position: absolute;
	/*border-bottom: solid;*/
}

input{
	border:none;
	border-bottom: solid;
	outline: none;
}
盒子模型

CSS 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） 构成，这就是 盒子模型。
在这里插入图片描述

div{
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin-left: 20px;
}
#div1{
	background-color: yellow;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
#div2{
	background-color: blue;

}

*{
	/*margin:0px 0px 0px 0px;*/
	/*margin:0px 0px;*/
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right:0px;
}

行级元素与块级元素的区别

  • 行级元素：行内元素和其他行内元素都会在一条水平线 上排列，都是在同一行的；a标签、label、img、span等
  • 块级元素：块级元素在默认情况下，会独占一行；div 、h标签、li、table等
CSS定位

CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种；其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。

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

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

相关文章

3D建模基础教程：可编辑多边形建模的基础认识

3D建模基础教程：可编辑多边形建模的基础认识

可编辑多边形建模是3D建模中的一种常见方法&#xff0c;它允许用户对模型进行细致的调整和编辑。以下是对可编辑多边形建模的详细介绍&#xff1a; 1、层级概念&#xff1a;在可编辑多边形建模中&#xff0c;有五个层级&#xff0c;分别是点层级、边层级、边界层级、面层级和元…
阅读更多...
2023年亚太杯数学建模思路 - 案例：异常检测

2023年亚太杯数学建模思路 - 案例：异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…
阅读更多...
[内存泄漏][PyTorch](create_graph=True)

[内存泄漏][PyTorch](create_graph=True)

PyTorch保存计算图导致内存泄漏 1. 内存泄漏定义2. 问题发现背景3. pytorch中关于这个问题的讨论 1. 内存泄漏定义 内存泄漏&#xff08;Memory Leak&#xff09;是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放&#xff0c;造成系统内存的浪费&#xff0c;导致…
阅读更多...
（离散数学）命题公式及其真值表

（离散数学）命题公式及其真值表

阅读更多...
蓝桥杯每日一题2023.11.18

蓝桥杯每日一题2023.11.18

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 本题使用搜索&#xff0c;将每一个格子进行初始赋值方便确定是否为相邻的数&#xff0c;将空出的两个格子首先当作已经填好数值为100&#xff0c;此时从第一个格子右边的格子开始搜索&#xff…
阅读更多...
vscode编写verilog的插件【对齐、自动生成testbench文件】

vscode编写verilog的插件【对齐、自动生成testbench文件】

vscode编写verilog的插件&#xff1a; 插件名称&#xff1a;verilog_testbench,用于自动生成激励文件 安装教程&#xff1a;基于VS Code的Testbench文件自动生成方法——基于VS Code的Verilog编写环境搭建SP_哔哩哔哩_bilibili 优化的方法&#xff1a;https://blog.csdn.net…
阅读更多...
ROSCon 2023 大会回顾

ROSCon 2023 大会回顾

系列文章目录 文章目录 系列文章目录前言一、会议内容二、其他活动 前言 我们与 ROSCon 2023 全体 700 多名与会者的合影。 视频回放链接 一、会议内容 ROSCon 2023 是我们第十二届年度 ROS 开发者大会&#xff0c;于 2023 年 10 月 18 日至 20 日在路易斯安那州新奥尔良举行。…
阅读更多...
字符串函数详解

字符串函数详解

一.字母大小写转换函数. 1.1.tolower 结合cppreference.com 有以下结论&#xff1a; 1.头文件为#include <ctype.h> 2.使用规则为 #include <stdio.h> #include <ctype.h> int main() {char ch A;printf("%c\n",tolower(ch));//大写转换为小…
阅读更多...
ThinkPHP 系列漏洞

ThinkPHP 系列漏洞

目录 2、thinkphp5 sql注入2 3、thinkphp5 sql注入3 4、 thinkphp5 SQL注入4 5、 thinkphp5 sql注入5 6、 thinkphp5 sql注入6 7、thinkphp5 文件包含漏洞 8、ThinkPHP5 RCE 1 9、ThinkPHP5 RCE 2 10、ThinkPHP5 rce3 11、ThinkPHP 5.0.X 反序列化漏洞 12、ThinkPHP…
阅读更多...
anaconda安装依赖报错ERROR: Cannot unpack file C:\Users\33659\AppData\Loca...|问题记录

anaconda安装依赖报错ERROR: Cannot unpack file C:\Users\33659\AppData\Loca...|问题记录

执行命令&#xff1a; # 安装matplotlib依赖 pip install matplotlib-i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com出现问题&#xff1a; ERROR: Cannot unpack file C:\Users\33659\AppData\Local\Temp\pip-unpack-0au_blfq\simple (downloa…
阅读更多...
U-boot(二):主Makefile

U-boot(二):主Makefile

本文主要探讨210的主Makefile。 Makefile uboot版本号&#xff1a; VERSION&#xff1a;主板本号 PATCHLEVEL&#xff1a;次版本号 SUBLEVEL&#xff1a;再次版本号 EXTRAVERSION:附加信息 VERSION 1 PATC…
阅读更多...
二元分类模型评估方法

二元分类模型评估方法

文章目录 前言一、混淆矩阵二、准确率三、精确率&召回率四、F1分数五、ROC 曲线六、AUC&#xff08;曲线下面积&#xff09;七、P-R曲线类别不平衡问题中如何选择PR与ROC 八、 Python 实现代码混淆矩阵、命中率、覆盖率、F1值ROC曲线、AUC面积 指标 公式 意义 真正例 (TP)被…
阅读更多...
无需API开发，伯俊科技实现电商与客服系统的无缝集成

无需API开发，伯俊科技实现电商与客服系统的无缝集成

伯俊科技的无代码开发实现系统连接 自1999年成立以来&#xff0c;伯俊科技一直致力于为企业提供全渠道一盘货的服务。凭借其24年的深耕零售行业的经验&#xff0c;伯俊科技推出了一种无需API开发的方法&#xff0c;实现电商系统和客服系统的连接与集成。这种无代码开发的方式不…
阅读更多...
java的包装类

java的包装类

目录 1. 包装类 1.1 基本数据类型和对应的包装类 1.2 装箱和拆箱 1.3 自动装箱和自动拆箱 1. 包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了 一个包装类型。 若想了解…
阅读更多...
MySQL用逗号分割的id怎么实现in (逗号分割的id字符串)。find_in_set(`id`, ‘1,2,3‘) 函数

MySQL用逗号分割的id怎么实现in (逗号分割的id字符串)。find_in_set(`id`, ‘1,2,3‘) 函数

1.MySQL 1.1.正确写法 select * from student where find_in_set(s_id, 1,2,3); 1.2.错误示范 select * from student where find_in_set(s_id, 1,2 ,3); -- 注意&#xff0c;中间不能有空格。1、3 select * from student where find_in_set(s_id, 1,2, 3); -- 注意…
阅读更多...
sqli-labs关卡19(基于http头部报错盲注)通关思路

sqli-labs关卡19(基于http头部报错盲注)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十九关通关思路1、判断注入点2、爆数据库名3、爆数据库表4、爆数据库列5、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随意去尚…
阅读更多...
IDEA创建文件添加作者及时间信息

IDEA创建文件添加作者及时间信息

前言 当使用IDEA进行软件开发时&#xff0c;经常需要在代码文件中添加作者和时间信息&#xff0c;以便更好地维护和管理代码。 但是如果每次都手动编辑 以及修改那就有点浪费时间了。 实践 其实我们可以将注释日期 作者 配置到 模板中 同时配置上动态获取内容 例如时间 这样…
阅读更多...
【MyBatisPlus】快速入门

【MyBatisPlus】快速入门

文章目录 1. 简单使用2. 条件构造器 —— 针对于复杂查询3. 自定义SQL4. IService4.1 基本接口方法4.1.1 新增4.1.2 删除4.1.3 修改4.1.4 查找 4.2 开发基础业务接口4.3 开发复杂业务接口4.4 Lambda方法4.5 批量新增 5. 代码生成6. 分页功能6.1 分页插件基本使用6.1 通用分页实…
阅读更多...
数据结构与算法设计分析——常用搜索算法

数据结构与算法设计分析——常用搜索算法

目录 一、穷举搜索二、图的遍历算法&#xff08;一&#xff09;深度优先搜索&#xff08;DFS&#xff09;&#xff08;二&#xff09;广度优先搜索&#xff08;BFS&#xff09; 三、回溯法&#xff08;一&#xff09;回溯法的定义&#xff08;二&#xff09;回溯法的应用 四、分…
阅读更多...
node 第十九天 使用node插件node-jsonwebtoken实现身份令牌jwt认证

node 第十九天 使用node插件node-jsonwebtoken实现身份令牌jwt认证

实现效果如下 前后端分离token登录身份验证效果演示 node-jsonwebtoken 基于node实现的jwt方案&#xff0c; jwt也就是jsonwebtoken, 是一个web规范可以去了解一下~ 一个标准的jwt由三部分组成 第一部分&#xff1a;头部 第二部分&#xff1a;载荷&#xff0c;比如可以填入加密…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023