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,一经查实,立即删除!

相关文章

docker搭建zero-ui

确保你已经安装了Docker和Docker Compose。如果没有,请参照官方文档安装:Docker 和 Docker Compose。 使用 Docker CLI 获取 Zero-UI 镜像: 首先,你需要从Docker Hub获取Zero-UI的Docker镜像。你可以使用 docker pull 命令来下载它。 docker…

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…

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

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

Apache的安装与目录结构详细解说

1. Apache安装步骤 Apache是一款开源的Web服务器软件,常用于搭建网站和服务。以下是Apache的安装步骤: 在官方网站(https://httpd.apache.org/)下载最新版本的Apache软件包。解压下载的软件包到指定目录。运行安装程序&#xff…

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

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

Xss防护

Xss防护 CSP安全策略,类似于黑名单,只允许加载本地图片,外部链接图片无法链接防御成本极低,同时有很多指令,同源策略,可添加不同类型的指令实现不同的要求。(同源策略:同端口&#…

C++从零开始的打怪升级之路(day47)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前,我学了一点点C语言还有简单的数据结构,如果有小伙伴想和我一起学习的,可以私信我交流分享学习资料 那么开启正题 今天分享的是关于set和map的知识点 1.关联式容器 在前面&#…

VUE 之 Vuex 和 Pina 介绍

Vuex 和 Pina 是两种不同的 Vue 状态管理库,它们在设计理念和使用方式上有一些区别。 Vuex: 官方状态管理库: Vuex 是 Vue.js 官方推荐的状态管理库,与 Vue 框架深度集成,提供了一种集中式存储管理应用中所有组件的状态的方式。…

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…

使用kubectl port-forward 端口转发来快速调试应用

应用场景 只要 pod 在 kubernetes 里面拉起来,就可以在本地终端快速调试应用,注意此方法只适合开发调试,长久使用在生产环境不推荐 使用命令 kubectl port-forward 资源名 本地端口:容器端口 转发原理 本地端口建立的连接将被转发到运行…

海外媒体发稿: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…

代码随想录day40||● 343. 整数拆分 ● 96.不同的二叉搜索树

343. 整数拆分 - 力扣&#xff08;LeetCode&#xff09; 动态规划&#xff0c;本题关键在于理解递推公式&#xff01;| LeetCode&#xff1a;343. 整数拆分_哔哩哔哩_bilibili class Solution { public:int integerBreak(int n) {vector<int> dp(n1);dp[2]1;for(int i3…

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

个人主页 &#xff1a; zxctscl 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 文章目录 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 特征缩放实现 恭喜致谢 目标 在本实验中&#xff0c;你将: 利用在上一个实验中开发的多变量例程对具有多个特征的数据集运行梯度下降探讨学习率alpha对梯度下降的影响通过使用z-score归一化的特征…