css学习-----web

news2025/7/10 19:20:43

引入方式

内嵌式

css写在style标签中

外链式

css写在一个单独的.css文件中

<link rel="stylesheet" href="./文件名.css">

stylesheet关系为样式表;
href地址

行內式

css写在标签的style属性中 可以配合js使用

选择器

标签选择器是选择的是一类标签,而不是单独的一个。
类选择器
在这里插入图片描述
id选择器#id属性值 通过id属性值,找到页面中带有这个id属性的标签,设置样式

所有标签上都有id属性
id类似于身份证号,在一个页面中是惟一的,不可重复
一个标签只能有一个id属性值
一个id选择器只能选中一个标签

通配符选择器*{}
为页面所有便签设置样式

开发中使用较少,特殊情况才会使用

字体样式

字体大小	<!--谷歌浏览器默认文字大小是16px,单位需要设置-->
属性名:font-size		取值:数字+px

字体粗细	<!--实际开发过程中,正常、加粗两种取值使用最多-->
属性名:font-weight		取值:normal【正常】,bold【加粗】,数字【100-900整数字,正常400、加粗700】

文字是否倾斜
属性名:font-style		取值:normal,italic【倾斜】

文本样式

font-family

常见字体

无衬线字体【sans-serif】

特点:笔画均匀,收尾无装饰
场景:网页多采用无衬线字体
常见字体:黑体、Arial

衬线字体【serif】

特点:笔画不均匀,收尾有笔锋装饰
场景:用于报刊书籍
常见字体:宋体、times new Roman

等宽字体【monospace】

特点:每个字母或文字等宽
场景:一般用于程序代码编写,有利于代码的编写与阅读
常见字体:consonas

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

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

相关文章

CTFer成长之路之XSS的魔力

XSS的魔力CTF XSS闯关 题目描述: 你能否过关斩将解决所有XSS问题最终获得flag呢&#xff1f; docker-compose.yml version: "3.2"services:xss:image: registry.cn-hangzhou.aliyuncs.com/n1book/web-xss:latestports:- 3000:3000启动方式 docker-compose up -…

Spring依赖注入(四):Bean的循环依赖是如何产生和解决的?

前言其实这篇文章才是正主&#xff0c;前面几篇文章&#xff1a;Spring依赖注入&#xff08;一&#xff09;&#xff1a;字段注入的方式是如何工作的&#xff1f;Sprng依赖注入&#xff08;二&#xff09;&#xff1a;setter注入是如何工作的&#xff1f;Sprng依赖注入&#xf…

easyExcel与poi版本不兼容导致的后台报错问题

1、背景&#xff1a;最新接手公司系统excel导入解析模块&#xff0c;点击批量导入&#xff0c;后台报错如下 com.alibaba.excel.exception.ExcelAnalysisException: java.lang.NoClassDefFoundError: org/apache/poi/poifs/filesystem/FileMagicat com.alibaba.excel.analysis.…

CycleGAN代码使用入门

以下内容为本人亲测使用过程&#xff0c;完成了橘子到苹果的AI转化效果&#xff0c;先上效果&#xff1a; 1、下载数据集 Index of /cyclegan/datasets 本次做的是苹果和橘子相互转化的实验&#xff0c;所以下载apple2orange.zip数据集 2、下载代码 github地址为&#xff1a;…

ChatGPT从下游应用“火”到了上游芯片厂,国内谁将受益?

因库存陷入低迷周期的半导体市场近日因ChatGPT的火热而重新受到外界关注。 原文链接&#xff1a;ChatGPT从下游应用“火”到了上游芯片厂&#xff0c;国内谁将受益&#xff1f; 由于ChatGPT属于生成式AI&#xff0c;被誉为“AI芯片”第一股的英伟达应声而涨。2月13日收盘&#…

Go高质量编程与性能调优-学习笔记

1 高质量编程 1.1 简介 1.1.1 高质量代码 高质量代码即正确可靠、简洁清晰的代码 1.1.2 编程原则 简单性可读性生产力1.2 编码规范 1.2.1 代码格式 推荐gofmt自动格式化代码&#xff01; 推荐goimports实现gofmt依赖包管理&#xff01; 1.2.2 注释 注释要解释代码作用、…

5个设计师常用素材库

推荐5个设计素材网站&#xff0c;免费下载&#xff01; 1、菜鸟图库 菜鸟图库-免费设计素材下载 菜鸟图库是一个素材量非常丰富的网站&#xff0c;该网站聚合了平面、UI、淘宝电商、高清背景图、图片、插画等高质量素材。平面设计模板非常多&#xff0c;很多都能免费下载&…

springmvc实现controller接口

springmvc实现controller接口 前置配置 基础环境 springmvc 环境 jdk1.8 tomcat8.5 集成环境 ideasmart-tomcat (idea 中 tomcat插件) 实现controller接口 import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.mvc.Control…

UNIAPP实战项目笔记59 NodeJS后端生成token 和 修复一些bug

UNIAPP实战项目笔记59 NodeJS后端生成token 和 修复一些bug 后端保持数据时往数据库写入token 修复一些前面遗留的问题bug 实际案例图片 后端接口文件 index.js var express require(express); var router express.Router(); var connection require(../db/sql.js); var us…

11、STM32通用定时器输出PWM

目录 1.通用定时器输出PWM 2.PWM的工作原理 3.PWM的内部运作机制 4.PWM的模式 41.边沿对齐模式 5.自动加载的预加载寄存器 6.定时器输出PWM结构体讲解 7.定时器输出PWM库函数讲解 8.定时器输出PWM----实战驱动SG90舵机 1.通用定时器输出PWM 以TIM3为例&#xff0c;STM…

makdown模版参考

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

一次性打包学透 Spring

不知从何时开始&#xff0c;Spring 这个词开始频繁地出现在 Java 服务端开发者的日常工作中&#xff0c;很多 Java 开发者从工作的第一天开始就在使用 Spring Framework&#xff0c;甚至有人调侃“不会 Spring 都不好意思自称是个 Java 开发者”。 之所以出现这种局面&#xf…

危害肠道健康的两大敌人:诺如病毒和轮状病毒

谷禾健康 // 近日&#xff0c;多地发生诺如病毒感染事件&#xff0c;诺如病毒引起的急性感染性腹泻进入发病高峰期。那么什么是诺如病毒&#xff1f;我们又该如何预防&#xff1f; 诺如病毒和轮状病毒都是传染性很强的肠道病毒&#xff0c;是导致急性胃肠炎的最重要原因之一。会…

如何自己搭建一个ai画图系统? 从0开始云服务器部署novelai

如何自己搭建一个ai画图系统&#xff1f; 从0开始云服务器部署novelai ​ 上面两张图都是通过ai生成的&#xff0c;是不是有以假乱真的感觉。 本教程提供的是自己搭建一个可以外网访问的ai系统的方法&#xff0c;需要采购gpu服务器&#xff08;后续会出白嫖的方式&#xff09;&…

Java俄罗斯方块游戏

技术&#xff1a;Java等摘要&#xff1a;俄罗斯方块是一款十分经典的游戏&#xff0c;它的主要运行规律为对系统随机产生的图形进行上下左右移动、旋转等操纵&#xff0c;使之排列成完整的一行或多行并且消除得分。它上手容易&#xff0c;难度循序渐进&#xff0c;老少皆宜&…

Android 架构 MVC MVP MVVM,这一波你应该了然于心

MVC&#xff0c;MVP和MVVM是软件比较常用的三种软件架构&#xff0c;这三种架构的目的都是分离&#xff0c;避免将过多的逻辑全部堆积在一个类中。在Android中&#xff0c;Activity中既有UI的相关处理逻辑&#xff0c;又有数据获取逻辑&#xff0c;从而导致Activity逻辑复杂不单…

Android入门第66天-使用AOP

开篇这篇恐怕又是一篇补足网上超9成关于这个领域实际都是错的、用不起来的一个知识点了。网上太多太多教程和案例用的是一个叫hujiang的AOP组件-com.hujiang.aspectjx:gradle-android-plugin-aspectjx。首先这些错的文章我不知道是怎么来的&#xff0c;其次那些案例真的运行成功…

数据库浅谈之 Bloom Filter

数据库浅谈之 Bloom Filter HELLO&#xff0c;各位博友好&#xff0c;我是阿呆 &#x1f648;&#x1f648;&#x1f648; 这里是数据库浅谈系列&#xff0c;收录在专栏 DATABASE 中 &#x1f61c;&#x1f61c;&#x1f61c; 本系列阿呆将记录一些数据库领域相关的知识 &am…

场景扩展,体验升级 | DBMotion新增无公网数据库迁移、支持监控报警等多项功能

丝滑的零停机数据库在线迁移工具——DBMotion&#xff0c;又双叒叕发新版&#xff1a;新增的网关、数据源功能&#xff0c;让你无公网IP的数据库也可以迁移&#xff1b;新增的监控功能&#xff0c;让你对迁移性能一目了然&#xff1b;新增的报警功能&#xff0c;让你及时获得同…

什么是SSL端口?HTTPS配置技术指南

安全套接字层&#xff08;SSL&#xff09;是负责互联网连接的数据身份验证和加密的技术。它加密在两个系统之间&#xff08;通常在服务器和客户端之间&#xff09;之间通过互联网发送的数据&#xff0c;使其保持私密。随着在线隐私的重要性日益增加&#xff0c;您应该熟悉SSL端…