【海贼王航海日志：前端技术探索】CSS你了解多少？(二)

目录

1 -> 字体属性

1.1 -> 设置字体

1.2 -> 字体大小

1.3 -> 字体粗细

1.4 -> 文字样式

2 -> 文本属性

2.1 -> 文本颜色

2.1.1 -> 认识RGB

2.1.2 -> 设置文本颜色

2.2 -> 文本对齐

2.3 -> 文本装饰

2.4 -> 文本缩进

2.5 -> 行高

3 -> 背景属性

3.1 -> 背景颜色

3.2 -> 背景图片

3.3 -> 背景平铺

3.4 -> 背景位置

3.5 -> 背景尺寸

4 -> 圆角边框

4.1 -> 生成圆形

4.2 -> 生成圆角矩形

4.3 -> 展开写法

1 -> 字体属性

1.1 -> 设置字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}

  • 字体名称可以用中文，但是不建议使用中文。
  • 多个字体之间使用逗号分隔(从左到右查找字体，如果都找不到，就会使用默认字体)。
  • 如果字体名有空格，使用引号包裹。
  • 建议使用常见字体，否则兼容性不好。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-family .one {font-family: 'Microsoft YaHei';}.font-family .two {font-family: '宋体';}</style></head><body><div class="font-family"><div class="one">我是微软雅黑</div><div class="two">我是宋体</div></div></body>
</html>

展示结果：

1.2 -> 字体大小

p {
    font-size: 20px;
}

  • 不同的浏览器默认字号不一样，最好给一个明确值(chrome默认是16px)。
  • 可以给body标签使用font-size。
  • 要注意单位px不要忘记。
  • 标题标签需要单独指定大小。

注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或者矮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-size .one {font-size: 40px;}.font-size .two {font-size: 20px;}</style></head><body><div class="font-size"><div class="one">王路飞</div><div class="two">王路飞</div></div></body>
</html>

展示结果：

1.3 -> 字体粗细

p {
    font-weight: bold;
    font-weight: 700;
}

  • 可以使用数字表示粗细。
  • 700 == bold，400是不变粗 == normal。
  • 取值范围是[100，900]。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-weight .one {font-weight: 900;}.font-weight .two {font-weight: 100;}</style></head><body><div class="font-weight"><div class="one">王路飞</div><div class="two">王路飞</div></div></body>
</html>

展示结果：

1.4 -> 文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

 很少把某个文字变倾斜。但是经常要把em/i改成不倾斜。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-style em {font-style: normal;}.font-style div {font-style: italic;}</style></head><body><div class="font-style"><em>王路飞</em><div class="one">王路飞</div></div></body>
</html>

展示结果：

2 -> 文本属性

2.1 -> 文本颜色

2.1.1 -> 认识RGB

我们的显示器是由很多很多的“像素”构成的。每个像素视为一个点，这个点就能反映出一个具体的颜色。我们使用R(red)、G(green)、B(blue)的方式表示颜色(色光三原色)。三种颜色按照不同的比例搭配，就能混合出各种效果。

计算机中针对R、G、B三个分量，分别使用一个字节表示(8个比特位，表示的范围是0~255，十六进制表示为00~FF)。数值越大，表示该分量的颜色就越浓。(255，255，255)就表示白色；(0，0，0)就表示黑色。

2.1.2 -> 设置文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

鼠标悬停在vscode的颜色上，会出现颜色选择器，可以手动调整颜色。

color属性值的写法：

  • 预定义的颜色值。
  • 十六进制形式。
  • RGB方式。

十六进制形式表示颜色，如果两两相同，就可以用一个来表示。

#ff00ff => #f0f

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.color {color: red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}</style></head><body><div class="color">One Piece</div></body>
</html>

展示结果：

2.2 -> 文本对齐

控制文字水平方向的对齐。

不光能控制文本对齐，也能控制图片等元素居中或者靠右。

text-align: [值];

  • center：居中对齐。
  • left：左对齐。
  • right：右对齐。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-align .one {text-align: left;}.text-align .two {text-align: right;}.text-align .three {text-align: center;}
</style></head><body><div class="text-align"><div class="one">王路飞</div><div class="two">王路飞</div><div class="three">王路飞</div></div></body>
</html>

展示结果：

2.3 -> 文本装饰

text-decoration: [值];

常用取值：

  • underline 下划线。
  • none 什么都没有。可以给a标签去掉下划线。
  • overline 上划线。
  • line-through 删除线。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-decorate .one {text-decoration: none;}.text-decorate .two {text-decoration: underline;}.text-decorate .three {text-decoration: overline;}.text-decorate .four {text-decoration: line-through;}</style></head><body><div class="text-decorate"><div class="one">王路飞</div><div class="two">王路飞</div><div class="three">王路飞</div><div class="four">王路飞</div></div></body>
</html>

展示结果：

2.4 -> 文本缩进

控制段落的首行缩进(其他行不影响)。

text-indent: [值];

  • 单位可以使用px或者em。
  • 使用em作为单位更好。1个em就是当前元素的文字大小。
  • 缩进可以是负的，表示往左缩进(会导致文字就冒出去了)。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-indent .one {text-indent: 2em;}.text-indent .two {text-indent: -2em;}</style></head><body><div class="text-indent"><div class="one">王路飞</div><div class="two">王路飞</div></div></body>
</html>

展示结果：

2.5 -> 行高

行高指的是上下文本行之间的基线距离。

HTML中展示文字涉及到这几个基准线：

  • 顶线。
  • 中线。
  • 基线(相当于英语四线格的倒数第二条线)。
  • 底线。

内容区：底线和顶线包裹的区域，即下图深灰色背景区域。

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离。

line-height: [值];

注意1：行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的，此处字体大小是16px，行高40px，上下边距就分别是12px。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line-height .one {line-height: 40px;font-size: 16px;}</style></head><body><div class="line-height"><div>王路飞</div><div class="one">王路飞</div><div>王路飞</div></div></body>
</html>

展示结果：

注意2：行高也可以取normal等值。

这个取决于浏览器的实现。chrome上normal为21px。

注意3：行高等与元素高度，就可以实现文字居中对齐。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line-height .two {height: 100px;line-height: 100px;}</style></head><body><div class="line-height"><div class="two">王路飞</div></div></body>
</html>

展示结果：

3 -> 背景属性

3.1 -> 背景颜色

background-color: [指定颜色]

默认是transparent(透明)的。可以通过设置颜色的方式修改。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #f3f3f3;}.bgc .one {background-color: red;}.bgc .two {background-color: #0f0;}.bgc .three {/* 背景透明 */background-color: transparent;}</style></head><body><div class="bgc"><div class="one">王路飞</div><div class="two">刘索隆</div><div class="three">One Piece</div></div></body>
</html>

展示结果：

3.2 -> 背景图片

background-image: url(...);

比image更方便控制位置(图片在盒子中的位置)。 

注意：

  1. url不要遗漏。
  2. url可以是绝对路径，也可以是相对路径。
  3. url上可以加引号，也可以不加。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgi .one {background-image: url(images/云云.jpg);height: 3300px;}</style></head><body><div class="bgi"><div class="one">背景图片</div></div></body>
</html>

展示结果：

3.3 -> 背景平铺

background-repeat: [平铺方式]

 重要取值：

  • repeat：平铺。
  • no-repeat：不平铺。
  • repeat-x：水平平铺。
  • repeat-y：垂直平铺。

默认是repeat。

背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgr .one {background-image: url(images/前端技术.png);height: 300px;background-repeat: no-repeat;}.bgr .two {background-image: url(images/前端技术.png);height: 300px;background-repeat: repeat-x;}.bgr .three {background-image: url(images/前端技术.png);height: 300px;background-repeat: repeat-y;}</style></head><body><div class="bgr"><div class="one">不平铺</div><div class="two">水平平铺</div><div class="three">垂直平铺</div></div></body>
</html>

展示结果：

3.4 -> 背景位置

background-position: x y;

修改图片的位置。

参数有三种风格：

  1. 方位名词：(top，left，right，bottom)。
  2. 精确单位：坐标或者百分比(以左上角为原点)。
  3. 混合单位：同时包含方位名词和精确单位。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgp .one {background-image: url(images/前端技术.png);height: 500px;background-repeat: no-repeat;background-color: purple;background-position: center;}</style></head><body><div class="bgp"><div class="one">背景居中</div></div></body>
</html>

展示结果：

注意：

  • 如果参数的两个值都是方位名词，则前后顺序无关。(top left和left top等效)。
  • 如果只指定了一个方位名词，则第二个默认居中(left则意味着水平居中，top意味着垂直居中)。
  • 如果参数是精确值，则第一个肯定是x ，第二个肯定是y。(100 200意味着x为100，y为 200)。
  • 如果参数是精确值，且只给了一个数值，则该数值一定是x坐标，另一个默认垂直居中。
  • 如果参数是混合单位，则第一个值一定为x，第二个值为y坐标。(100 center表示横坐标为 100，垂直居中)

关于坐标系：

计算机中的平面坐标系，一般是左手坐标系(和高中数学上常用的右手系不一样。y轴是往下指的)。

3.5 -> 背景尺寸

background-size: length|percentage|cover|contain;

  • 可以填具体的数值：如40px 60px表示宽度为40px，高度为60px。
  • 也可以填百分比：按照父元素的尺寸设置。
  • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgs .one {width: 500px;height: 300px;background-image: url(images/前端技术.png);background-repeat: no-repeat;background-position: center;background-size: contain;}</style></head><body><div class="bgs"><div class="one">背景尺寸</div></div></body>
</html>

展示结果：

注意体会contain和cover的区别。当元素为矩形(不是正方形)时，区别是很明显的。

4 -> 圆角边框

通过border-radius使边框带圆角效果。

基本用法

border-radius: length;

length是内切圆的半径。数值越大，弧线越强烈。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;}</style></head><body><div>One Piece是真实存在的！！！</div></body>
</html>

展示结果：

4.1 -> 生成圆形

让border-radius的值为正方形宽度的一半即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;} */div {width: 200px;height: 200px;border: 2px solid skyblue;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;}</style></head><body><div></div></body>
</html>

展示结果：

4.2 -> 生成圆角矩形

让border-radius的值为矩形高度的一半即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;} *//* div {width: 200px;height: 200px;border: 2px solid skyblue;border-radius: 100px;/* 或者用 50% 表示宽度的一半 *//* border-radius: 50%;}  */div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 50px;}</style></head><body><div></div></body>
</html>

展示结果：

4.3 -> 展开写法

border-radius是一个复合写法。实际上可以针对四个角分别设置。

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;

等价于(按照顺时针排序)

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

感谢各位大佬支持！！！

互三啦！！！

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

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

相关文章

vue的nextTick是下一次事件循环吗

vue的nextTick是下一次事件循环吗

如题&#xff0c;nextTick的回调是在下一次事件循环被执行的吗&#xff1f; 是不是下一次事件循环取决于nextTick的实现&#xff0c;如果是用的微任务&#xff0c;那么就是本次事件循环&#xff1b;否则如果用的是宏任务&#xff0c;那么就是下一次事件循环。 我们看下Vue3中…
阅读更多...
【Canvas与艺术】黄色立体感放射光芒五角星

【Canvas与艺术】黄色立体感放射光芒五角星

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>黄色立体感放射光芒五角星</title><style type"text/c…
阅读更多...
Html详解——Vue基础

Html详解——Vue基础

HTML是什么&#xff1f; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表…
阅读更多...
[Vue]Vue3从入门到精通-综合案例分析

[Vue]Vue3从入门到精通-综合案例分析

一.Vue是什么&#xff1a; 概念&#xff1a;Vue是一个用于构建用户界面的渐进式的框架 以下的内容是自里向外的 声明式渲染(Vuejs核心包)组件系统(Vuejs核心包)客户端路由VueRouter大规模状态管理Vuex构建工具Webpack/Vite Vue的两种使用方式&#xff1a; Vue核心包开发-&…
阅读更多...
DSL domain specific language of Kola

DSL domain specific language of Kola

How we design Kola - ApiHugKola background, Kola a consumer driver tester frameworkhttps://apihug.com/zhCN-docs/kola/003_dsl_contract Concept 在 Kola 定位中 Kola 是什么, 是致力于提供一个让相关各方都能够理解共同创造的测试框架和工具。 同时 Kola 是建立于业界…
阅读更多...
node中使用http创建web服务器

node中使用http创建web服务器

1.案例代码 // 1.导入http模块 const http require(http)// 2.创建web服务器实例 const server http.createServer()// 3.为服务器实例绑定request事件&#xff0c;监听客户的请求 server.on(request,function(req,res){console.log(欢迎来到服务器);// req.url是客户端请求…
阅读更多...
Kubernets（k8s） 网络原理二：Pod访问外网

Kubernets（k8s） 网络原理二：Pod访问外网

上一篇文章中&#xff0c;我们介绍了pod与宿主机通信&#xff0c;并且通过network namespace模拟了通信过程。回顾整个流程&#xff0c;无非就涉及到两个东西&#xff0c;通信设备和路由规则。 本文要讲的&#xff0c;也离不开这两个东西&#xff0c;只不过需要对容器IP进行额…
阅读更多...
学习c语言第24天（练习）

学习c语言第24天（练习）

编程题 第一题 最大公约数最小公倍数求和 //求最大公约数和最小公倍数之和 //暴力求解 //int main() //{ // int n 0; // int m 0; // while (scanf("%d %d", &n, &m)2) // { // int min n < m ? n : m; // int max n > m ? n : m; //…
阅读更多...
Stable Diffusion 使用详解（7）---AI 摄影

Stable Diffusion 使用详解（7）---AI 摄影

目录 背景 底模的选择 例子 majicMix GirlFriendMix&#xff08; Lora&#xff09; 对比效果 LEOSAMs MoonFilm ADetailer 使用 说明 例子 问题 处理方式 效果 背景 魔法师使用魔法作的画有时候太过完美&#xff0c;以至于有点脱离真实摄影的感觉&#xff0c;我们…
阅读更多...
【电控笔记z14z16】增加霍尔元件分辨率

【电控笔记z14z16】增加霍尔元件分辨率

霍尔传感器用的不多?实际增量编码器更好 z14 假设60度内速度不变 z16(更简单的方法)BLDC
阅读更多...
【机器学习】BP神经网络正向计算

【机器学习】BP神经网络正向计算

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 BP神经网络正向计算1. 引言2. BP神经网络结构回顾3. 正向计算的基本原理4. 数学…
阅读更多...
7.3.1.算法设计与分析-总结及真题讲解

7.3.1.算法设计与分析-总结及真题讲解

总结 分治法特征&#xff1a;把一个问题拆分成多个小规模的相同子问题&#xff0c;一般可用递归解决。 经典问题&#xff1a;斐波那契数列、归并排序、快速排序、矩阵乘法、二分搜索、大整数乘法、汉诺塔 回溯法特征&#xff1a;系统的搜索一个问题的所有解或任一解。 经典问题…
阅读更多...
ctfhub文件上传

ctfhub文件上传

⽆验证 上传⼀句话⽊⻢&#xff0c;发现上传成功 1.php ⼀句话⽊⻢内容&#xff1a; <?php eval($_POST[cmd]);?> 上传⼀句话⽊⻢&#xff0c;发现上传成功 http://challenge-8b27d18368ecc25c.sandbox.ctfhub.com:10800/upload/1.ph p 前端验证 开启题⽬ 上传⼀个…
阅读更多...
[Modbus] Modbus协议开发-基本概念（一）

[Modbus] Modbus协议开发-基本概念（一）

历史 ModBus官网是Modicon&#xff08;Modicon早年已被施耐德收购&#xff09;公司为其PLC通讯而开发的一种通讯协议。 概述 通过Modbus协议&#xff0c;控制器之间、或控制器经由网络&#xff08;如以太网&#xff09;可以和其它设备之间进行通信。 优点 免费、好用、成熟…
阅读更多...
DIRB：一款强大的Web目录扫描工具使用指南

DIRB：一款强大的Web目录扫描工具使用指南

网安学习交流 DIRB是一款广泛使用的开源Web内容扫描工具&#xff0c;它专注于发现Web服务器上存在的目录和文件。对于安全研究员、渗透测试人员以及Web开发者来说&#xff0c;DIRB是一个不可或缺的工具&#xff0c;它能帮助他们识别潜在的入口点&#xff0c;从而进一步评估目标…
阅读更多...
Java学习Day20

Java学习Day20

Vue学习 nodejs的安装与环境配置 1.直接去官网下载合适版本的nodejs( https://nodejs.org/zh-cn/download/prebuilt-installer) 2.解压下载的安装包&#xff0c;将文件路径配置到系统变量的path中&#xff0c;然后确认后退出。可以使用终端来查看安装的nodejs版本。使用winR…
阅读更多...
【C++ Primer Plus】学习笔记 4

【C++ Primer Plus】学习笔记 4

文章目录 前言一、结构类型1.在程序中使用结构2.C11结构初始化3. 结构可以将 string 类作为成员吗4.其他特性5.结构数组 二、共用体三、枚举1.设置枚举量的值2. 枚举的取值范围 前言 该笔记内容为书第四章——复合类型&#xff0c;加油加油 一、结构类型 结构是用户定义的类型…
阅读更多...
文件：ls，ll，fcpgets，cpwr

文件：ls，ll，fcpgets，cpwr

1、fcpgets fgets和fputs用于处理文本文件&#xff0c;而不是二进制文件&#xff0c;因为会进行换行符的处理&#xff0c;图片文件包含二进制数据并且包含\0字符&#xff0c;会出现意外终止条件。 2、cprw fread&#xff1a;函数从文件流中读取数据&#xff0c;储存到指向空间…
阅读更多...
【Android Studio】gradle文件、配置、版本下载、国内源（SDK版本、gradle版本以及gradle-plugin（AGP）版本）

【Android Studio】gradle文件、配置、版本下载、国内源（SDK版本、gradle版本以及gradle-plugin（AGP）版本）

文章目录 AS查看gradle-plugin版本及gradle版本&#xff08;图形&#xff09;查看gradle-plugin版本及gradle版本&#xff08;配置文件&#xff09;配置文件分析解决gradle下载失败、版本错乱等问题。 Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的自动化构建工具&…
阅读更多...
Linux：多线程（二.理解pthread_t、线程互斥与同步、基于阻塞队列的生产消费模型）

Linux：多线程（二.理解pthread_t、线程互斥与同步、基于阻塞队列的生产消费模型）

上次讲解了多线程第一部分&#xff1a;Linux&#xff1a;多线程&#xff08;一.Linux线程概念、线程控制——创建、等待、退出、分离&#xff0c;封装一下线程&#xff09; 文章目录 1.理解Linux下线程——理解tid2. Linux线程互斥2.1相关概念2.2引入问题分析问题解决思路 2.3L…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023