前端-css-01

1.CSS 长度单位和颜色设置

1.1CSS 中的长度单位

px 像素
em 字体大小的倍数(字体默认是16px)
%  百分比

1.2CSS 中的颜色设置方式 

1.2.1使用颜色名表示颜色

red、orange、yellow、green、cyan、blue、purple、pink、deeppink、skyblue、greenyellow ...

1.2.2rgb 方式表示颜色

 计算机三元色
 red         0~255   0%~100%
 green       0~255   0%~100%
 blue        0~255   0%~100%
background: rgb(100, 200, 120);
background: rgb(255, 0, 0);
background: rgb(255, 0, 255);

三个元色 取相同的数值  灰色 
数值越大颜色越浅,全是255是白色,数值越小颜色越深,全是0是黑色 
background: rgb(255, 255, 255);
background: rgb(0, 0, 0);
background: rgb(100, 100, 100);
background: rgb(199, 199, 199);

使用百分比 
background: rgb(45%, 80%, 74%);
 

 十六进制方式表示颜色

十六进制 原理同rgb一样 
 十进制:    0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20 21 ... 99 100 ...
 二进制:    0 1 10 11 100 101 110 111 1000 ...
 十六进制:  0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 ... 1f 20 21 ... ff 100 ...

 十进制255 = 十六进制ff
 两位十六进制的数字可以表示一种原色,六位十六进制数字能够表示三元色
 

 使用6位十六进制的数字表示颜色 每两位表示一个元色 
background: #4fa8bb;
background: #0000ff;
background: #ababab;
background: #131313;

表示一种元色的两个数字是相同的,且三组元色各自都是相同, 可以简写为3位十六进制数字 
background: #a8c;  #aa88cc 
background: #bbb;  #bbbbbb 
background: #ab2233;  不可简写 
 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* body{width: 600px;height: 500px;background: #ccc;} */.box2{width: 300px;height: 200px;background: red;}.box03{width: 400px;height: 300px;background: rgb(178, 70, 16);}</style>
</head>
<body><h1>css长度单位</h1><div class="box1"></div><hr><h1>子以</h1><div class="box2">因非上种入如互兄量兴我耐对承德,别不弟,谭不。</div><br><div class="box03">韩能惶血妙慷回也得服之,一币台够向可是刑报,四徒三措才,我圣倒嗣感责哉后融杀满如所切方么皮说在,她。</div>
</body>
</html>

 

2.CSS 基本选择器 

2.1标签名(元素名)选择器

         body{width: 600px;height: 500px;background: #ccc;} 

2.2类名选择器 

.类名 {}

1. 多个元素可以设置相同的类名
2. 一个元素可以设置多个类名

<div class="box2 bx">因非上种入如互兄量兴我耐对承德,别不弟,谭不。</div>.box2{width: 300px;height: 200px;background: red;}

2.3ID 选择器 

#ID名 {}  元素的ID名必须是唯一的!

#ww{width: 100px;height: 100px;background: blue;}
<div id="ww">失读上希老想啊非所交。</div>

2.4全局(通配)选择器

* {}

2.5基本选择器之间的权重

1. ID选择器 > 类选择器 > 标签名选择器 > 全局选择器
2. 行内式大于所有的选择器

3.盒子模型(显示模式)

3.1元素的显示模式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item {width: 400px;height: 100px;background: #900;border: 2px solid #880;}span {width: 400px;height: 100px;background: #080;}input {width: 300px;height: 40px;}</style>
</head>
<body><h1>元素的显示模式</h1><hr><h2>块级 block</h2><div class="item">我是div</div><div class="item">我是div</div><div class="item">我是div</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.<h2>行内 inline</h2><span>我是span</span><span>我是span</span><span>我是span</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.<h2>行内块元素</h2><input type="text"><input type="text"><input type="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officiis porro, eius adipisci harum consequatur similique iure illum enim eos.
</body>
</html>

3.1.1 块级元素 block

显示模式是块级的元素称为块级元素,特点:

1. 在页面中是一个块,能够独占一行
2. 可以设置宽度和高度

3.1.2行内元素 inline

显示模式是行内的元素称为行内元素,特点:

1. 显示在行内,不能独占一行
2. 无法设置宽度和高度

3.1.3行内块元素 inline-block

按照最早的标准,行内块元素也被当做行内元素!

显示模式是行内块的元素称为行内块元素,特点:

1. 显示在行内,不能独占一行
2. 可以设置宽度和高度

3.2 HTML 元素的默认显示模式

3.2.1默认显示模式是 block 的元素:

排版标签: h1~h6、p、pre、hr、div
列表标签: ul、ol、li、dl、dt、dd
表单标签: form、option

3.2.2默认显示模式是 inline 的元素:

文本标签: em、strong、del、ins、sub、sup、span
超链接标签: a
表单标签: label

3.2.3默认显示模式是 inline-block 的元素:

图片标签: img
表单标签: input、button、textarea、select
框架标签: iframe

3.2.4修改元素的显示模式、

使用CSS属性 display可以设置元素的显示模式,该属性的值如下:

inline
block
inline-block

按照最早的标准只有行内和块级,默认显示模式是行内块的元素,无法设置成真正的行内 

4.字体样式

属性名作用属性值
font-size字体大小长度
font-weight字体粗细

normal:正常。

lighter:细。

bold:粗。

100~900数字:100~300是细体,400、500正常,600以及以上粗体

font-style斜体字

normal:正常。

italic:斜体字。

font-family字体族科字体名称、字体列表
font设置多种字体样式多个值,使用空格分隔

4.1字体族科 font-family

字体族科的设置:

font-family: 字体名称;
font-family: "字体名称";   如果字体名称中有空格,如 Microsoft YaHei 建议使用引号包裹

设置字体列表:

font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
font-family: "Microsoft YaHei", 微软雅黑, 宋体, sans-serif;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.box{width: 800px;height: 800px;font-family: 宋体;}h1{font-family: 微软雅黑;font-weight: 800;}</style></head><body><h1>字体样式</h1><div class="box">基地啦咖啡</div></body>
</html>

衬线字体和非衬线字体:

serif 表示衬线字体,笔画粗细不一致,如宋体、仿宋体、楷体等
sans-serif 表示非衬线字体,笔画粗细一致,如微软雅黑、黑体、Helvetica 

4.2复合属性 font 

最少两个值 字体大小 字体族科 
font: 20px 宋体;
font: 20px "Microsoft YaHei",微软雅黑,宋体,sans-serif;

粗体字 字体大小 字体族科  
font: 800 16px "Microsoft YaHei",微软雅黑,宋体,sans-serif;

斜体字 字体大小 字体族科 
font: italic 16px "Microsoft YaHei",微软雅黑,宋体,sans-serif;

又粗又斜 字体大小 字体族科 
font: 800 italic 16px "Microsoft YaHei",微软雅黑,宋体,sans-serif;
font: italic italic 16px "Microsoft YaHei",微软雅黑,宋体,sans-serif;

4.3子属性和复合属性的关系 

1. 复合属性写在子属性的后面,前面的子属性全部失效,复合属性即使没写对应的值也会用默认值覆盖掉子属性
2. 子属性写在复合属性的后面,子属性会覆盖掉复合属性中与之对应的样式

5.文本颜色 

属性名作用属性值
color设置文字颜色颜色

6.文本样式 

属性名作用属性值
letter-spacing字间距长度
word-spacing词间距(中文无效果)长度
text-decoration文本修饰线

none:无修饰线。

underline:下划线。

overline:上划线。

line-throuth:删除线

text-indent首行缩进长度
text-align文本水平对齐方式

left:左对齐。

right:右对齐。

center:居中对齐

vertical-align与同行文本如何对齐

baseline:基线对齐。

top:顶线对齐。

middle:中线对齐。

bottom:底线对齐。

sub:下标字。

super:上标字。

长度:元素底部与基线的距离

line-height行高长度

6.1vertical-align

1. 设置行内元素或行内块元素与同行文本如何对齐,如 基线对齐、顶线对齐、中线对齐、底线对齐等
2. 设置上标字和下标字
3. 设置单元格中内容的纵向对齐方式,只能用于 td、th

6.2 line-height 设置行高

6.2.1行高的概念:

第一行文字中线与元素顶部距离是行高一半,最后一行文字中线与元素底部距离是行高一半!

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高练习</title><style>.box{width: 500px;height: 400px;background: rgb(200, 122, 23);font-size: 20px;margin-top: top;line-height: 80px;}</style>
</head>
<body><h1>行高练习</h1><div class="box">文畴将自俭连元拢的是快诗明被志选,洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi.</div>
</body>
</html>

1. 上一行文字中线与下一行文字中线的距离称为行高
2. 上一行文字底线与下一行文字顶线的距离称为行距,调整行高大小,行距受到影响

6.2.2line-height 是 font 的子属性:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高练习</title><style>.box{width: 500px;height: 400px;background: rgb(200, 122, 23);font-size: 20px;margin-top: top;line-height: 80px;}.box2{font: bold 55px/100px 微软雅黑;//55字体大小,100行间距}</style>
</head>
<body><h1>行高练习</h1><div class="box">文畴将自俭连元拢的是快诗明被志选,洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi.</div><br><div class="box box01">Lorem ipsum dolor </div><br><div class="box box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ad fuga sequi.</div>
</body>
</html>

 

由上图可以看出font覆盖了line-height属性 

行高可选值:
1.normal:由浏览器根据文字大小决定的一个默认值。
2.像素(px)
3.数字:参考自身font-size的倍数(很常用。通常是1.5~2倍之间)
4.百分比:参考自身font-size的百分比。
备注:由于字体设计的原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。

注意:
1.行高过小:导致文字重叠,且最小值是0,不能为负数(负数会无效,默认为normal)。
2.行高是可以继承的。

6.2.3使用行高实现元素中的一行文字垂直居中,满足以下条件:

1. 只有一行文字
2. 设置行高与高度一致

.box01{width: 200px;height: 100px;line-height: 100px;}<div class="box box01">Lorem ipsum dolor </div>

 

 

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

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

相关文章

【漏洞复现】通天星CMSV6弱口令漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

机器学习-生存分析:基于QHScrnomo模型的乳腺癌患者风险评估与个性化预测

一、引言 乳腺癌作为女性常见的恶性肿瘤之一&#xff0c;对女性健康构成威胁。随着医疗技术的不断进步&#xff0c;个性化医疗逐渐成为乳腺癌治疗的重要方向。通过深入研究乳腺癌患者的风险评估和个性化预测&#xff0c;可以帮助医生更准确地制定治疗方案&#xff0c;提高治疗效…

篇二.软件需求管理办法

二、软件需求管理办法 第1章 总则 第1条 目的。 为使软件产品满足规定的需求而确定软件的体系结构、组成模块划分和接口说明等&#xff0c;并将上述结果翻译成代码&#xff0c;以实现软件所要求的功能&#xff0c;确保软件项目的顺利实施和高质量交付&#xff0c;特制定的软件…

人工智能中的数学计算和数学思想

1.人工智能中的数学计算 在人工智能&#xff08;AI&#xff09;领域&#xff0c;数学计算扮演着至关重要的角色&#xff0c;支撑着众多算法的设计与实现。以下是一些人工智能中常见的数学计算&#xff1a; 线性代数&#xff1a; 向量和矩阵运算&#xff1a;用于表示和处理高维…

强制不换行,

white-space:nowrap强制不换行&#xff0c;效果如下

NC21302 被3整除的子序列

题目描述 给你一个长度为50的数字串,问你有多少个子序列构成的数字可以被3整除 答案对1e97取模 输入描述: 输入一个字符串&#xff0c;由数字构成&#xff0c;长度小于等于50 输出描述: 输出一个整数 示例1 输入 132 输出 3 示例2 输入 9 输出 1 示例3 输入 …

[Java面试题]Java字符串比较面试题详解

字符串比较 通过字面量赋值创建字符串&#xff08;如&#xff1a;String s”hi”&#xff09;&#xff0c;会先在常量池中查找是否存在相同的字符串&#xff0c;若存在&#xff0c;则直接指向该字符串&#xff1b;若不存在&#xff0c;则在常量池中生成一个字符串&#xff0c;再…

FebHost:荷兰.NL域名一个富有影响力域名

作为荷兰的国家顶级域名,.NL域名可以说是荷兰互联网发展史上的一个重要里程碑。早在1986年,这个国家域名就已经正式推出,见证了荷兰从互联网新手到如今科技强国地位的转变。 时至今日,.NL域名在全球范围内已经享有广泛知名度。根据统计,截至2023年8月,已经注册的.NL域名数量高…

使用poco结构体转json

c结构体直接转成json字符串&#xff0c;代码示例 main.cpp #include <iostream> #include "global.h" #include "client_param.h" #include "md5.h" #include "common_func.h"using namespace std; using namespace demo;int ma…

vulhub打靶记录——driftingbox

文章目录 主机发现端口扫描目录扫描爆破子域名提权总结 主机发现 使用nmap扫描局域网内存活的主机&#xff0c;命令如下&#xff1a; nmap -sP 192.168.56.0/24192.168.56.1&#xff1a;主机IP&#xff1b;192.168.56.100&#xff1a;DHCP服务器IP&#xff1b;192.168.56.101…

轻松安装Kibana on Linux:手把手教你配置与说明

Kibana作为Elastic Stack的重要组成部分&#xff0c;为用户提供了一种直观、交互的方式来探索、分析和可视化Elasticsearch中的数据。本篇文章将引导您在Linux系统上轻松安装Kibana&#xff0c;并详细解说配置过程&#xff0c;确保即使是初学者也能快速上手。 一、安装Kibana …

`require`与`import`的区别

require与import的区别主要体现在以下几个方面&#xff1a; 1.加载时间不同。require是在运行时加载模块&#xff0c;这意味着模块的加载和执行可以在代码的任何地方进行&#xff0c;也可以在运行时根据条件动态地加载不同的模块&#xff1b;import是在编译时加载模块&#xf…

每日面经分享(pytest装饰器)

pytest装饰器 a. pytest.mark.parametrize&#xff1a;这个装饰器用于标记测试函数&#xff0c;并为其提供多组参数进行参数化测试。可以使用元组、列表、字典等形式来指定参数组合。 import pytestpytest.mark.parametrize("num1, num2, expected", [(2, 2, 4), (5…

2024年美团笔试题(1)

一.题目描述 小美拿到了一个排列&#xff0c;其中初始所有元素都是红色&#xff0c;但有些元素被染成了白色。 小美每次操作可以选择交换任意两个红色元素的位置。她希望操作尽可能少的次数使得数组变成非降序&#xff0c;你能帮帮她吗? 排列是指:一个长度为n的数组&#…

反编译winform程序的dll步骤

1、窗体文件还原 这块一开始我是参照正常窗体需要的文件格式去挨个还原的,即一个窗体有一个.cs文件,一个.Designer.cs文件,一个.resx文件。反编译后的文件是将前两个合到一个文件里了,资源文件是一个.resources文件,即一个.cs文件,一个.resources文件,而这个资源文件vs…

京东一面挂在了CAS算法的三大问题上,痛定思痛不做同一个知识点的小丑

写在开头 在介绍synchronized关键字时&#xff0c;我们提到了锁升级时所用到的CAS算法&#xff0c;那么今天我们就来好好学一学这个CAS算法。 CAS算法对build哥来说&#xff0c;可谓是刻骨铭心&#xff0c;记得是研二去找实习的时候&#xff0c;当时对很多八股文的内容浅尝辄止…

《Python编程实战——让繁琐工作自动化》实践项目——strip()正则表达式版本

题目&#xff1a; 写一个函数&#xff0c;它接受一个字符串&#xff0c;做的事情和 strip()字符串方法一样。如果只 传入了要去除的字符串&#xff0c;没有其他参数&#xff0c;那么就从该字符串首尾去除空白字符。否 则&#xff0c;函数第二个参数指定的字符将从该字符串中去除…

canvas画图,画矩形、圆形、直线可拖拽移动,可拖拽更改尺寸大小

提示&#xff1a;canvas画图&#xff0c;画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动 文章目录 前言一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动总结 前言 一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖…

AI预测福彩3D第23弹【2024年4月1日预测--第4套算法重新开始计算第9次测试】

今天继续对第4套算法进行测试&#xff0c;因为第4套算法已连续多期命中&#xff0c;相对来说还算稳定。好了&#xff0c;废话不多说了&#xff0c;直接上预测的结果吧~ 2024年4月1日福彩3D的七码预测结果如下 第一套&#xff1a; 百位&#xff1a;0 1 …

智慧城市一屏统览,数字孪生综合治理

现代城市作为一个复杂系统&#xff0c;牵一发而动全身&#xff0c;城市化进程中产生新的矛盾和社会问题都会影响整个城市系统的正常运转。智慧城市是应对这些问题的策略之一。城市工作要树立系统思维&#xff0c;从构成城市诸多要素、结构、功能等方面入手&#xff0c;系统推进…