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.hqwc.cn/news/525554.html

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

相关文章

WPS:如何在文字上打出横线

可通过拼音指南完成 1、打出需要加上横线的文字 2、选中文字,找到开始->拼音指南 3、 删掉原有拼音加入需要的短横线 4、结果

IDEA中安装jclasslib工具插件对字节码进行查看以及七种IDEA必备插件(已下载)

除了安装插件的方式,也可以采用单独下载软件的方式。 这里是安装插件的方式: 7个IntelliJ IDEA必备插件 七个插件包 idea引入外部插件的方式: 1.打开settings配置面板 2.选择plugins–》install pluginfrom disk 选择相应插件包》点击…

链表|面试题 02.07.链表相交

ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {ListNode *l NULL, *s NULL;int lenA 0, lenB 0, gap 0;// 求出两个链表的长度s headA;while (s) {lenA ;s s->next;}s headB;while (s) {lenB ;s s->next;}// 求出两个链表长度差if (lenA &…

力扣199. 二叉树的右视图(DFS,BFS)

Problem: 199. 二叉树的右视图 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 无论是DFS还是BFS我们都要思考到达二叉树的每一层(或者每一层中的每一个节点)时,我们都该如何按题目要求做出对应得处理!!!在本体中我们主要是&#x…

XSS渗透与防御

一、HTTP协议回顾 二、客户端的Cookie 三、服务端的Session 四、JavaScript操作Cookie 使用js语法查看当前网站的cookie 使用js语法添加cookie值 添加unamewuya 刷新网页可以看到添加的cookie值已经发送给服务器 五、脚本注入网页-XSS 六、XSS检测和利用 xsser可以检测网页是…

【Web】浅聊Java反序列化之C3P0——URLClassLoader利用

目录 前言 C3P0介绍 回归本源——序列化的条件 利用链 利用链分析 入口——PoolBackedDataSourceBase#readObject 拨云见日——PoolBackedDataSourceBase#writeObject 综合分析 EXP 前言 这条链最让我眼前一亮的就是对Serializable接口的有无进行了一个玩&#xff0c…

【深度学习笔记】6_8 长短期记忆(LSTM)

注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 6.8 长短期记忆(LSTM) 本节将介绍另一种常用的门控循环神经网络:长短期记忆(long shor…

吴恩达deeplearning.ai:倾斜数据集的误差指标精确率、召回率

以下内容有任何不理解可以翻看我之前的博客哦:吴恩达deeplearning.ai专栏 文章目录 倾斜数据集的误差指标罕见病预测精确率和召回率 精确率和召回率的权衡精确率和召回率的矛盾关系 F1算法 倾斜数据集的误差指标 在神经网络中,如果你的数据集中正例和负…

RabbitMQ发布确认高级版

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

【GO语言卵细胞级别教程】09.切片的超能力(含习题)

【GO语言卵细胞级别教程】09.切片的超能力(含习题) 目录 【GO语言卵细胞级别教程】09.切片的超能力(含习题)1.概述1.1 简介1.2 为什么需要切片 2.语法介绍2.1 切片的定义2.2切片基本使用2.2.1遍历2.2.2切片的骚操作 2.3切片与数组…

P1958 上学路线

难度:普及- 题目描述 你所在城市的街道好像一个棋盘,有 a 条南北方向的街道和 b 条东西方向的街道。南北方向的 a 条街道从西到东依次编号为 1 到 a,而东西方向的 b 条街道从南到北依次编号为 1 到 b,南北方向的街道 i 和东西方…

基于springboot的家庭装修报价系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 SpringBoot框架 3 1.2 ECharts 3 1.3 Vue框架 3 1.4 Bootstrap框架 3 1.5 JQuery技术 4 1.6 Ajax技术 4 1.7 本章小结 4 2 系统分析 5 2.1 需求分析 5 2.2 非功能需求 7 2.3 本章小结 8 3 系统设计 9 3.1 系统总体设计 9 …