CSS基础知识

news2025/6/18 0:53:22
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.coloradmin.cn/o/1503728.html

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

相关文章

STM32CubeMX学习笔记17--- FSMC

1.1 TFTLCD简介 TFT-LCD(thin film transistor-liquid crystal display)即薄膜晶体管液晶显示器。液晶显示屏的每一个像素上都设置有一个薄膜晶体管(TFT),每个像素都可以通过点脉冲直接控制,因而每个节点都…

2024年3月10日 十二生肖 今日运势

小运播报:2024年3月10日,星期日,农历二月初一 (甲辰年丁卯月癸酉日),法定节假日。 红榜生肖:龙、牛、蛇 需要注意:鸡、狗、兔 喜神方位:东南方 财神方位:…

Linux——文件重定向

目录 前言 一、重定向 二、重定向的运用 三、dup2 四、命令行中的重定向 五、为什么要有标准错误 前言 在之前我们学习了文件标识符,直到close可以使用文件标识符进行关闭,但是当我们关闭1号(stdout)时,无法往显…

基于springboot实现图书推荐系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现图书馆推荐系统演示 摘要 时代的变化速度实在超出人类的所料,21世纪,计算机已经发展到各行各业,各个地区,它的载体媒介-计算机,大众称之为的电脑,是一种特高速的科学仪器,比…

软件测试自学和报班学习的区别,各有各的优势和缺点,大家看完之后自己选择喔

时代在进步,人们汲取知识的方式不再是单一的在书本上面,现在网络发达,只需要上网就能找到相关的好多知识,慢慢的大家越来越觉得有了这些知识,只要自己有自制力就完全能够自学到一定的程度。 在自学氛围的影响下&#…

深度学习+感知机

深度学习感知机 1感知机总结 2多层感知机1XOR2激活函数3多类分类总结 3代码实现 1感知机 是个很简单的模型,是个二分类的问题。 感知机(perceptron)是Frank Rosenblatt在1957年提出的一种人工神经网络,被视为一种最简单形式的前馈神经网络&…

could not publish server configuration for tomcat at localhost

1,报错信息如图: 2,找到servers双击,选择Modules,如果有两个webModules ,remove一个, 3,如果重启还是报错,干脆两个都remove,双击tomcat服务add And Remove重新添加

【算法沉淀】最长回文子串

🎉🎉欢迎光临🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟特别推荐给大家我的最新专栏《数据结构与算法:初学者入门指南》📘&am…

mxxWechatBot流程与原理

大家伙,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。 免责声明:该工具仅供学习使用,禁止使用该工具从事违法活动,否则永久拉黑封禁账号!!!本人不对任何工具的使用负责&am…

【NR 定位】3GPP NR Positioning 5G定位标准解读(九)-增强的小区ID定位

前言 3GPP NR Positioning 5G定位标准:3GPP TS 38.305 V18 3GPP 标准网址:Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读(一)-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读(…

【学习笔记】Vue3源码解析:第二部分-实现响应式(5)

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第二部分-实现响应式(5):(对应课程的第18-21节) 第18节:《创建ref实例》 vue3中 re…

机器学习--循环神经网络(RNN)1

一、简介 循环神经网络(Recurrent Neural Network)是深度学习领域中一种非常经典的网络结构,在现实生活中有着广泛的应用。以槽填充(slot filling)为例,如下图所示,假设订票系统听到用户说&…

【数据分享】2013-2022年全国范围逐月CO栅格数据(免费获取)

空气质量数据是在我们日常研究中经常使用的数据!之前我们给大家分享了2000-2022年全国范围逐月的PM2.5栅格数据和2013-2022年全国范围逐月SO2栅格数据(可查看之前的文章获悉详情)。 本次我们给大家带来的是2013-2022年全国范围的逐月的CO栅格…

ubuntu22.01安装及配置

前言 本次安装基于VMware Pro 16进行安装。 ubuntu版本:ubuntu-22.04.3-live-server-amd64.iso 1、下载 1.1官网下载 https://ubuntu.com/download 1.2、清华大学镜像网站下载 https://mirrors.tuna.tsinghua.edu.cn/ 进入网站后搜索ubuntu,选择ubu…

基于PSO粒子群算法的三角形采集堆轨道优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 假设一个收集轨道,上面有5个采集堆,这5个采集堆分别被看作一个4*20的矩阵(下面只有4*10),每个模块&…

RabbitMQ发布确认高级版

1.前言 在生产环境中由于一些不明原因,导致 RabbitMQ 重启,在 RabbitMQ 重启期间生产者消息投递失败, 导致消息丢失,需要手动处理和恢复。于是,我们开始思考,如何才能进行 RabbitMQ 的消息可靠投递呢&…

Java学习笔记NO.18

T1.理工超市 &#xff08;1&#xff09;题目描述 编写一个程序&#xff0c;设计理工超市功能菜单并完成注册和登录功能的实现。显示完菜单后&#xff0c;提示用户输入菜单项序号。当用户输入<注册>和<登录>菜单序号时模拟完成注册和登录功能&#xff0c;最后提示…

VMware安装CentOS7操作系统超详细图文教程

文章目录 一.下载镜像二.镜像安装三.继续进行虚拟机设置四.虚拟机启动设置一些供参考的视频教程 一.下载镜像 官网镜像下载地址(需要开梯) 清华大学镜像站地址 二.镜像安装 三.继续进行虚拟机设置 四.虚拟机启动设置 点击虚拟机后鼠标就不会出VMare,想要鼠标返回个人的计算机…

Java多线程学习的关键要点和常见案例总结

文章目录 Java多线程学习的关键要点&#xff1a;案例示例&#xff1a; Java多线程编程还包括更多的高级特性和实用技巧高级主题&#xff1a;实用案例&#xff1a;线程池的高级用法和配置&#xff1a;线程安全的最佳实践&#xff1a; Java多线程学习的关键要点和常见案例总结如下…

数字孪生10个技术栈:数据传输的四个问题

大家好&#xff0c;我是贝格前端工场&#xff0c;上期讲了数据采集的八个方式&#xff0c;数据采集之后就要进行数据的处理&#xff0c;本期继续分享&#xff0c;大家如有数字孪生或者数据可视化的需求&#xff0c;可以联络我们。 一、什么是数据处理 在数字孪生中&#xff0c…