css属性学习

css属性

就是我们选择器里面
{
}
中的内容

字体样式

在这里插入图片描述

font-size

在这里插入图片描述

控制字体大小:单位px(像素)
默认字体占16个像素

<p style="font-size:30px;">font-size:字体大小,单位的话可以用px表示占的像素个数,默认字体占16px</p>
<p>没有改变大小的效果</p>

在这里插入图片描述

font-weight

在这里插入图片描述
控制字体粗细
normal等同于400
bold等同于700
工作推荐用数字

<p style="font-weight:800">font-weight为bold效果</p>
<p style="font-weight:400">font-weight为normal效果</p>
<p>正常效果</p>

在这里插入图片描述

font-style

在这里插入图片描述
这个自己试试

<p style="font-style:italic">font-style为italic效果</p>
<p style="font-style:normal">font-style为normal效果</p>

在这里插入图片描述

font-family

在这里插入图片描述

<p style="font-family:宋体,sans-serif">font-family为宋体效果</p>
<p style="font-family:微软雅黑">font-style为微软雅黑效果</p>

在这里插入图片描述
设置多个逗号的意义
就是有道电脑可能没有对应字体,如果没有就从左到右依次显示
最后留一个兜底的就ok
在这里插入图片描述

一些常用字体分类
在这里插入图片描述

样式层叠问题

在这里插入图片描述
写在最下面的生效

 <style> 
 p{
   color:red;
   color:green;
   }</style>
<p>标签选择器的作用下p标签内的内容变化,如果一个选择器里有相同属性的不同赋值,那么最下面的先生效</p>

在这里插入图片描述
在这里插入图片描述
这种也是后面层叠前面的

font复合属性

在这里插入图片描述
注意每个属性值间有空格

<style>
        p{
        font:italic 700 40px 微软雅黑;
        }
    </style>
<p>关于font的属性可以直接连写,省去一个一个写的麻烦,格式是 font: style取值 weight取值 size取值 family取值</p>

在这里插入图片描述
注意下面讲到的行高也可以放在font符合属性里面,在size后用/隔开(其他的用空格隔开的)

文本样式

在这里插入图片描述

text-indent-文本缩进

在这里插入图片描述

    <style>
        p{
    text-indent:2em;
        }
    </style>
<p>text-indent可以用px单位表示缩进几个像素,也可以用,数字+em(就是缩进了数字个字符) 1em=当前标签font-size大小</p>

在这里插入图片描述

text-align-水平对齐方式

在这里插入图片描述
左对齐是默认值

    <style>
        p{
        text-align:center;
/*text-indent:2em;*/
        }
    </style>
<p>text-indent可以用px单位表示缩进几个像素,也可以用,数字+em(就是缩进了数字个字符) 1em=当前标签font-size大小</p>
<p>text-align有三个取值分别是left center right 分别是左对齐 居中对齐 右对齐</p>

不止p标签等文字标签
像图片,input输入栏这种也可以居中显示

但是
他们都是需要在父元素里添加text-align属性
在这里插入图片描述
比如你想把p段的标签中文字居中,文字就在p标签中,直接给p标签加style即可
但是如果是单个image(没有被其他标签包括)的话,图片在body里面
所以应该给body标签加text-align

<body style="text-align:center;">
<p>text-indent可以用px单位表示缩进几个像素,也可以用,数字+em(就是缩进了数字个字符) 1em=当前标签font-size大小</p>
<p>text-align有三个取值分别是left center right 分别是左对齐 居中对齐 右对齐</p>
<img src="./boy.png">
</body>

在这里插入图片描述

text-decoration-文本修饰线

在这里插入图片描述
none 可以清楚默认a(超链接)标签中的下划线

<style>
        p{
        text-decoration:underline;
        /*text-align:center;text-indent:2em;*/
        }
    </style>
<body>
<p>text-indent可以用px单位表示缩进几个像素,也可以用,数字+em(就是缩进了数字个字符) 1em=当前标签font-size大小</p>
<p>text-align有三个取值分别是left center right 分别是左对齐 居中对齐 右对齐</p>
</body>

line-height-行高

在这里插入图片描述
行高不仅包括文字
还包含上边距和下边距

<p style="line-height:3;">
“过去多年,百度一直在进行 AI 技术的研究与研发。文心大模型首个版本在 2019 年便已发布,文心一言只是过去多年研发成果的延续。
   之所以现在发布,是因为现在市场有强烈的需求,包括百度从搜索、智能云到自动驾驶,再到客户、用户,都需要这样的技术。同时,大模型只有发布了,才会有用户反馈,只有通过不断地反馈,才能加速模型自身的迭代。”
</p>

可以看见,如果没有设置行高两行还是贴的很近的
在这里插入图片描述

写的话两种写法,推荐只写数字(间距=数字x对应的font-size)就是对应字号的倍数
在这里插入图片描述
行高也可放在font符合属性,注意的是行高放在size后用/隔开

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mini-Xml 经典实例Demo

欢迎小伙伴的点评✨✨&#xff0c;相互学习、博主将自己研发xml微型服务器的经验与之分享&#x1f30f;&#x1f30f;&#x1f642; 文章目录前言一、使用mxml库编写Xml文件1.1 经典实例Demo_11.2、经典实例Demo_21.3、经典实例Demo_3二、总结前言 本章将会给大家带来mini-xml…

在我的MacBook上捣鼓ESP8266

周三是我们的篮球日&#xff0c;打篮球后总是会有些兴奋&#xff0c;然后就容易睡不着&#xff0c;额&#xff0c;睡不着就拿我的ESP8266开发板出来捣鼓一下。先下载编译工具链https://github.com/espressif/ESP8266_RTOS_SDK下载sdkgit clone https://github.com/espressif/ES…

C++程序在内存中的模型

进程&#xff08;Process&#xff09;是计算机中的程序&#xff0c;数据集合在其上运行的一次活动&#xff0c;是系统进行资源分配的基本单位。每个进程都有自己独立的虚拟内存地址空间&#xff0c;这个虚拟的内存地址空间一般是线性连续的&#xff0c;这个内存地址空间是虚拟的…

面试官想看我写一篇关于“原型链”和“构造函数”深入理解的文章

前言&#xff1a; 在参加工作的面试过程中&#xff0c;我搬出了我的个人掘金账号写在了简历里&#xff0c;面试官很感兴趣&#xff0c;他不仅关注了我的账号&#xff0c;还想让我写一篇《原型链》的见解&#xff0c;由于老早就想总结一篇关于原型的文章&#xff0c;奈何自己刚开…

07平衡负载:gRPC是如何进行负载均衡的?

负载均衡(Load Balance),其含义就是指将请求负载进行平衡、分摊到多个负载单元上进行运行,从而协同完成工作任务。 负载均衡的主要作用: 提升并发性能:负载均衡通过算法尽可能均匀的分配集群中各节点的工作量,以此提高集群的整体的吞吐量。 提供可伸缩性:可添加或减少服…

Springboot新手开发 Cloud篇

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;后端专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…

汇编语言与微机原理(1)基础知识

前言&#xff08;1&#xff09;本人使用的是王爽老师的汇编语言第四版和学校发的微机原理教材配合学习。&#xff08;2&#xff09;推荐视频教程通俗易懂的汇编语言&#xff08;王爽老师的书&#xff09;&#xff1b;贺老师C站账号网址&#xff1b;&#xff08;3&#xff09;文…

在visual studio 2022 C++中配置最新版OpenCV和可能错误解决方案

前面我们写了一篇博文有关在C#中配置OpenCV&#xff0c;但C#版本的OpenCV的学习资源相对较少&#xff0c;C版的和Python版的比较多。这里先说说C版的如何配置吧&#xff01;总共完成四步即可使用起来。 文章目录一、下载并安装OpenCV1、下载OpenCV2、安装OpenCV二、配置环境1、…

【python】喜欢XJJ?这不得来一波大采集?

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 俗话说的好&#xff1a;技能学了~就要用在自己喜欢得东西上&#xff01;&#xff01; 这我不得听个话~我喜欢小姐姐&#xff0c;跳舞的小姐姐 这不得用python把小姐姐舞采集下来~嘿嘿嘿 完整源码、素材皆可点击文章下方名片…

条款20:当std::shared_ptr可能悬空时使用std::weak_ptr

自相矛盾的是&#xff0c;如果有一个像std::shared_ptr&#xff08;见条款19&#xff09;的但是不参与资源所有权共享的指针是很方便的。换句话说&#xff0c;是一个类似std::shared_ptr但不影响对象引用计数的指针。这种类型的智能指针必须要解决一个std::shared_ptr不存在的问…

Mysql 竟然还有这么多不为人知的查询优化技巧,还不看看?

前言 Mysql 我随手造200W条数据&#xff0c;给你们讲讲分页优化 MySql 索引失效、回表解析 今天再聊聊一些我想分享的查询优化相关点。 正文 准备模拟数据。 首先是一张 test_orde 表&#xff1a; CREATE TABLE test_order (id INT(11) NOT NULL AUTO_INCREMENT,p_sn VARCHA…

Spring事务和事务传播机制

目录 Spring中事务的实现 1、通过代码的方式手动实现事务 2、通过注解的方式实现声明式事务 2.1、Transactional作用范围 2.2、Transactional参数说明 2.3、注意事项 2.4、Transactional工作原理 事务隔离级别 1、事务特性 2、Spring中设置事务隔离级别 2.1、MySQL事…

Linux:函数指针做函数参数

#include <stdio.h> #include <stdlib.h> //创建带有函数指针做参数的函数框架api //调用者要先实现回调函数 //调用者再去调用函数框架 //所谓的回调是指 调用者去调用一个带有函数指针做参数的函数框架&#xff0c;函数框架反过来要调用调用者提供的回调函数 …

蓝桥杯冲击-02约数篇(必考)

文章目录 前言 一、约数是什么 二、三大模板 1、试除法求约数个数 2、求约数个数 3、求约数之和 三、真题演练 前言 约数和质数一样在蓝桥杯考试中是在数论中考察频率较高的一种&#xff0c;在省赛考察的时候往往就是模板题&#xff0c;难度大一点会结合其他知识点考察&#x…

全面剖析OpenAI发布的GPT-4比其他GPT模型强在哪里

最强的文本生成模型GPT-4一、什么是GPT-4二、GPT-4的能力三、和其他GPT模型比较3.1、增加了图像模态的输入3.2、可操纵性更强3.3、复杂任务处理能力大幅提升3.4、幻觉、安全等局限性的改善3.6、风险和缓解措施改善更多安全特性3.7、可预测的扩展四、与之前 GPT 系列模型比较五、…

QT入门Item Views之QListView

目录 一、QListView界面相关 1、布局介绍 二、代码展示 1、创建模型&#xff0c;导入模型 2、 设置隔行背景色 3、删除选中行 三、源码下载 此文为作者原创&#xff0c;创作不易&#xff0c;转载请标明出处&#xff01; 一、QListView界面相关 1、布局介绍 先看下界面…

高完整性系统工程(三): Logic Intro Formal Specification

目录 1. Propositions 命题 2.1 Propositional Connectives 命题连接词 2.2 Variables 变量 2.3 Sets 2.3.1 Set Operations 2.4 Predicates 2.5 Quantification 量化 2.6 Relations 2.6.1 What Is A Relation? 2.6.2 Relations as Sets 2.6.3 Binary Relations as…

ZYNQ硬件调试-------day2

ZYNQ硬件调试-------day2 1.ILA&#xff08;Integrated Logic Analyzer &#xff09; 监控逻辑内部信号和端口信号;可以理解为输出。可单独使用 2.VIO&#xff08;Virtual Input/Output &#xff09; 实时监控和驱动逻辑内部信号和端口信号&#xff0c;可以理解为触发输入。不可…

第十四届蓝桥杯三月真题刷题训练——第 14 天

目录 第 1 题&#xff1a;组队 题目描述 运行限制 代码&#xff1a; 第 2 题&#xff1a;不同子串 题目描述 运行限制 代码&#xff1a; 思路&#xff1a; 第 3 题&#xff1a;等差数列 题目描述 输入描述 输出描述 输入输出样例 运行限制 代码&#xff1a; 思…

Dubbo原理简介

Dubbo缺省协议采用单一长连接和NIO异步通讯&#xff0c;适合于小数据量大并发的服务调用&#xff0c;以及服务消费者机器数远大于服务提供者机器数的情况。 作为RPC&#xff1a;支持各种传输协议&#xff0c;如dubbo,hession,json,fastjson&#xff0c;底层采用mina,netty长连接…