CSS基础知识

font-family: "Trebuchet MS", Verdana, sans-serif;

字体栈,浏览器会一个一个试过去看下哪个可以用

font-size=16px;
font-size=1em;
font-size=100%;//相对于16px

字体大小,需要进行单位换算16px=1em

font-weight=normal;//400

font-weight属性设置文本的粗细

font-weight设置的数值在100~900之间,分为9级加粗度

100 对应最细的字体,900 对应最粗的字体; 400对应normal,而 700 则等价于 bold

font-style=normal;//正常
font-style=italic;//斜体
font-style=oblique;//倾斜

调整文体的样式

text-decoration=none;

text-decoration文本的装饰,例如下划线之类的

text-align=center;

text-align来改变一个元素中的文本行互相之间的对齐方式

line-height=normal;

line-height 属性来设置行高

letter-spacing=normal;
word-spacing=normal;

一个是字符间距,一个是字间距

letter-spacing 属性用于控制字符间的间隔多少;

word-spacing 属性用于控制字与字的间隔多少。

body {/* ********** BEGIN ********** *//*设置背景图片*/background-image: url("https://educoder.net/api/attachments/211106");/* ********** END ********** */
}

background-image属性设置元素的背景属性

 background-repeat: no-repeat;

设置background-repeat属性,设置图像在水平方向、垂直方向平铺或其他方式

举个例子:repeat-y

background-position: right top;

background-position属性改变图像在背景中的位置

这个例子就是右上

如果值定义了一个关键词,那么第二个值将是"center"。当然也可以使用百分比和长度值,现在只作为了解。

background-attachment: fixed;

当文档滚动到超过图像的位置时,图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性,将其值设置为fixed

background:#ffffff url("./Assert/sun.jpg") no-repeat right top;

按照顺序写,没有就直接写下一个

 border: 1px solid #000;        /*设置边框1px粗的黑色实线*/

border属性值可以按顺序设置的属性为:border-widthborder-styleborder-color

border-collapse: collapse; /*设置折叠边框*/

使用 border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为一个单一的边框或相互隔开

也就是

变成

table {width: 98%;                         /*表格整体宽度*/border-collapse: collapse; 
}
caption {height: 30px;font-weight: bold;                /*表格标题文字加粗*/
}
th,
td {height: 35px;                       /*表格高度*/border: 2px solid black;
}
th {   text-align: center;                  /*表格头部居中对齐*/background-color:lightblue;    /*表格头部背景颜色*/color:white;                           /*表格头部字体颜色*/
}
td {text-align: center;                   /*表格主体居中对齐*/
}
tfoot {font-weight: bold;               /*表格尾部文字加粗*/
}

一些表格的参数

盒模型图示

#box1 {background-color: whitesmoke;width: 200px;padding-top: 20px;padding-right: 10px;padding-bottom: 15px;padding-left: 10px;
}

内边距(Padding) 是指内容周围的区域,如果内容区域设置了背景、颜色或者图片,这些样式将同样延伸应用到内边距上

可以简写

#box1 {background-color: whitesmoke;width: 200px;padding: 20px 10px 15px 10px;
}

如果四个值是一样的,可以只用写一个

#box1 {background-color: whitesmoke;width: 200px;padding: 20px;
}
#box1 {background-color: whitesmoke;width: 200px;padding: 20px 10px 15px 10px;border: 25px dotted yellowgreen;margin-top: 20px;margin-right: 20px;margin-bottom: 20px;margin-left: 20px;
}

外边距(Margin) 是指边框外的区域,外边距默认也是透明的。

#box1 {background-color: whitesmoke;width: 200px;padding: 20px 10px 15px 10px;border: 25px dotted yellowgreen;margin: 20px;    /*外边框四个边同时设置为20px*/
}

也是和padding一样的意思,如果一样的话,可以只用写一个

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

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

相关文章

YoloV5改进策略:Block改进|自研Block,涨点超猛|代码详解|附结构图

涨点效果 参考模型 参考的Block,如下图: 我对Block做了修改,修改后的结构图如下: 代码详解 from timm.models.layers import DropPathfrom torch import Tensor def channel_shuffle(x: Tensor, groups:

用Java Socket手撸了一个HTTP服务器

作为一个 Java 后端,提供 HTTP 服务可以说是基本技能之一了,但是你真的了解 HTTP 协议么?你知道知道如何手撸一个 HTTP 服务器么?Tomcat 的底层是怎么支持 HTTP 服务的呢?大名鼎鼎的 Servlet 又是什么东西呢&#xff0…

可观测性是什么?新手入门指南!

如果您之前对可观测性重要性,益处,以及组成不甚了解,本文是一个合适的指南手册。 什么是可观测性? 可观测性被定义为根据系统产生的输出数据(如日志,指标和链路追踪)来衡量当前系统运行状态的…

代码理解 pseudo_labeled = outputs.max(1)[1]

import torchls torch.Tensor([[0.2,0.4],[0.3,0.2]]) print(ls.max(1))

STL之deque容器代码详解

1 基础概念 功能: 双端数组,可以对头端进行插入删除操作。 deque与vector区别: vector对于头部的插入删除效率低,数据量越大,效率越低。 deque相对而言,对头部的插入删除速度回比vector快。 vector访问…

Unity Shader实现UI流光效果

效果: shader Shader "UI/Unlit/Flowlight" {Properties{[PerRendererData] _MainTex("Sprite Texture", 2D) "white" {}_Color("Tint", Color) (1, 1, 1, 1)[MaterialToggle] PixelSnap("Pixel snap", float…

简洁的在线观影开源项目

公众号:【可乐前端】,每天3分钟学习一个优秀的开源项目,分享web面试与实战知识。 每天3分钟开源 hi,这里是每天3分钟开源,很高兴又跟大家见面了,今天介绍的开源项目简介如下: 仓库名&#xff1…

海外媒体发稿:7种媒体套餐推广策略解析-华煤舍

有效的媒体宣传策略对于产品或服务的推广至关重要。本文将介绍7种媒体套餐推广策略,帮助您惊艳市场,并取得成功。以下是每种策略的拆解描述: 1. 广告投放 广告投放是最常见的宣传手段之一。通过在各种媒体平台上购买广告,如电视、…

Web渗透测试流程

什么是渗透测试 渗透测试 (penetration test),是通过模拟恶意黑客的攻击方法,来评估计算机网络系统安全的一种评估方法。这个过程包括对系统的任何弱点、技术缺陷或漏洞的主动分析,这个分析是从一个攻击者可能存在的位置来进行的,并且从这个…

linux 查看打开使用了哪些端口

你可以使用 netstat 命令来查看Linux系统中正在使用的端口。例如,要查看所有正在使用的TCP和UDP端口,你可以运行: sudo netstat -tulpn如果你只想查看所有正在使用的TCP端口,你可以运行: sudo netstat -tpln 如果你只…

全网最最最详细centos7如何安装docker教程

在CentOS 7上安装Docker主要包括以下步骤: 1. 卸载旧版本的Docker 首先,需要确保系统上没有安装旧版本的Docker。可以通过以下命令来卸载它们: sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-late…

【Linux】编译器-gcc/g++使用

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 初见gcc和g3. 程序的翻译过程3.1 预处理3.1.1 宏替换 去注释 头文件展开3.1.2 条件编译 3.2 编译3.3 汇编3.4 链接 4. 链接4.1 动态链接4.2 静态链接 1. 前言 在之…

吴恩达机器学习-可选实验:特征缩放和学习率(多变量)

文章目录 目标工具概念问题陈述数据集多变量梯度下降学习率a9.9e-7a9e-7a1e-7 特征缩放实现 恭喜致谢 目标 在本实验中,你将: 利用在上一个实验中开发的多变量例程对具有多个特征的数据集运行梯度下降探讨学习率alpha对梯度下降的影响通过使用z-score归一化的特征…

域控操作十:安装包exe转msi软件下发

需要的文件 Advanced Installer 软件用来将exe转换成msi因为域控只能下发msi格式 一个exe安装包这里拿微信举例 一个没有密码的共享文件夹 1.exe转MSI 2,开始下发 服务器和用户刷新策略 #完成

某品零食交易平台设计与实现|基于springboot+ Mysql+Java的某品交易平台设计与实现(源码+数据库+文档+PPT)

目录 基于springboot MysqlJava的某品交易平台设计与实现 摘 要 系统详细设计 数据库设计 论文参考 源码获取 文末获取源码联系 基于springboot MysqlJava的某品交易平台设计与实现 摘 要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的…

html--彩虹爱心

文章目录 js内容cssreset.min.cssstyle.css html内容 js内容 const colors ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"]; const SVG_NS http://www.w3.org/2000/svg; const SVG_XLINK &q…

Spring Boot 多环境配置

Spring Boot 多环境配置 在现代的软件开发中,通常需要将应用程序部署到不同的环境中,如开发环境、生产环境和测试环境等。每个环境可能需要不同的配置参数,例如数据库连接信息、日志级别等。在 Spring Boot 中,我们可以通过简单的…

智慧库室管控系统-智慧枪弹管控系统

项目背景: 针对部队装备管理现状,部队在进行硬件系统建设的同时,需通过装备管理系统软件的建设,综合集成监控、报警、出入库、信息发布、库管理、监测、防护等系统,对装备进行立体监控、实时预警、快速处理&#xff0…

springboot255基于spring boot的疫情信息管理系统

疫情信息管理系统的设计与实现 摘要 近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定疫情信息管理系统…

【每日刷题】栈与队列-LC394、LC347、LC215

题外话:感觉脑子没长到栈这块…最近刷栈的题都好难啊…哭哭…坚持坚持!多刷几遍就好了!! 1. LC394.字符串解码 题目链接 先说数据结构。 维护两个栈:一个栈存之前的字符串,另一个栈存之后的字符串的重复…