首页 > 其他分享 >CSS系列学习笔记(二)

CSS系列学习笔记(二)

时间:2023-02-02 22:00:11浏览次数:64  
标签:style family weight 笔记 字体 italic 系列学习 font CSS

font文字: 

font-size 可以控制文字的大小

后面可以放入像素 (比较精准)

如果未来去做网页的时候 那么就使用工具量一下像素 然后写上就可以了

medium 默认样式 中等的 合适的

相对大一点large 、x-large、xx-large

相对小一点samll、x-samll、xx-samll

font-weight:控制文字粗细

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体粗细</title>
<style>
.p1{
font-weight:100px;
}
/* 范围:100-1000 */
.p2{
font-weight:bold;
}
.p3{
font-weight:boler;
}
.p4{
font-weight:lighter;
}

</style>
</head>
<body>
<p class="p1">hahha </p>
<p class="p2">hahha </p>
<p class="p3">hahha </p>
<p class="p4">hahha </p>
</body>
</html>

CSS系列学习笔记(二)_html

font-family:给予元素字体

注意:开发人员电脑上的字体,如果使用者没有的话那么是不会显示的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
.p1{
font-family:"SimSun";
}
.p2{
font-family: "Microsoft Yahei";
}
.p3{
font-family: "STHeiti";
}
</style>
</head>
<body>
<p class="p1">字体111</p>
<p class="p2">字体222</p>
<p class="p3">字体333</p>
</body>
</html>

CSS系列学习笔记(二)_html_02

font-height:可以设定内容在自己的内部的高度位置

​在html中 有些元素有一些默认的样式

line-height 如果大小为元素的大小时 内容会在中心

可以控制行内元素 但是控制不了 块状元素

% 继承父级的高度的来控制的,数字是支持的,px 使用最常规的,不支持负数


font-style样式:

​italic  <-> 是使用的字体斜体

oblique <-> 是让字体倾斜 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font—style</title>
<style>
/* italic <-> 是使用的字体斜体*/
/*oblique <-> 是让字体倾斜 */
.p1{
font-style:italic;
}
.p2{
font-style:oblique;
}
</style>
<body>
<p class="p1">今天天气不是很好,下雨了,很冷,风很大</p>
<p class="p2">skajsxajlsk</p>
</body>
</html>

font-variant:把段落设置为小型大写字母字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
font-variant: small-caps;
}
</style>
</head>
<body>
<p>hahhaha</p>
<p>hhahahahahahah</p>
<div>shdahskdas</div>
</body>
</html>

CSS系列学习笔记(二)_行内元素_03

font 比较常用的缩写样式

p{
font: small-caps italic bold 15px/30px fantasy;
}

font包含六样

font-size: 15px;

line-height: 30px;

font-family: fantasy;

font-weight: bold;

font-style: italic;

font-variant: small-caps;

标签:style,family,weight,笔记,字体,italic,系列学习,font,CSS
From: https://blog.51cto.com/u_15949973/6033995

相关文章

  • 《深入理解Java虚拟机》第三章读书笔记(二)——HotSpot垃圾回收算法实现(OopMap,安全点安
    系列文章目录和关于我前面《深入理解Java虚拟机》第三章读书笔记(一)——垃圾回收算法我们学习了垃圾回收算法理论知识,下面我们关注下HotSpot垃圾回收算法的实现,分为以下几......
  • 欧拉函数及其定理学习笔记
    ——bysunzz3183欧拉函数出自:筛初步欧拉函数进阶定义\[\varphi(n)=\sum\limits_{i=1}^{n}[\gcd(n,i)=1]\]筛法原理\[\varphi(n)=n\prod_{i=1}^{k}(1-\frac{......
  • Continual Learning with Lifelong Vision Transformer----阅读笔记
    ContinualLearningwithLifelongVisionTransformer----阅读笔记摘要:在本文中,我们提出了一种新的基于注意力的框架LifelongVisionTransformer(LVT),以实现更好的稳定......
  • c++语言程序设计第一章笔记
    在最开始,老师就向我们介绍了计算机语言的发展历史。也就是先前,在计算机刚开始发展的时候,那时候计算机语言与自然语言之间具有很大的鸿沟(计算机只能读懂二进制的0和1),比机器......
  • 2023.2 做题笔记
    【Baekjoon19394】EulerianOrientation选中边不好做,考虑删除边,一个删除\(x\)条边的图的权值是\((m-x)^2\),令\(k\)个合法图分别删除\(x_1,x_2,...,x_k\),答案就是\(......
  • 通用视觉框架 OpenMMLab第一课笔记
    目录计算机视觉是什么计算机视觉应用传统视觉特征机器学习基础机器学习是什么为什么要让"机器"去"学习"机器学习是什么机器学习的典型范式机器学习的基本流程计算机视觉是......
  • JMeter笔记8 | JMeter关联
    (8|JMeter关联)1测试对象接之前的说明,我们的测试对象为禅道开源版本;按照之前的文章搭建部署好本地禅道,开启服务即可①先到官网下载Windows一键安装包,安装完后启......
  • Redis 学习笔记
    Redis是非关系型的键值对数据库,数据是存储在内存中的,读写速度很快,广泛用于缓存方向,也可用于数据库的持久化。MySQL是关系型的磁盘数据库。访问Redis的速度要更快一点,但受......
  • css 实现二维码扫描效果
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>css3-scanner</title><style>.qr-scanner{positi......
  • OpenGL ES 2.0编程指导阅读笔记(六)顶点属性、顶点数组和缓冲对象
    顶点数据,又称顶点属性,给定了每个顶点的数据。这类每个顶点的数据可以每个顶点分别给定,也可以给定一个所有顶点共用的常量。在OpenGLES1.1中,顶点属性名称是预定义的,如po......