博客

更新时间:2023-04-07 17:37:39 阅读：评论：0

css中字体相关样式

font相关属性

font-family：（指定字体）
可以为文字指定多个字体，不同字体用“，”隔开
字体名字中间有空格的要用“ ”引起来font-size：（字题大小）
单位多用px/em单位font-氯化钠的化学式style：（字体倾斜效果）
normal（正常）/italic（斜体) /oblique(强制斜体)
italic 是使文字倾斜 oblique是使没有倾斜属性的文字倾斜（列如，思源黑体)font-weight：（文字粗细）
100~900（从小到大）/lighter （最细）/normal（正常）/ bold（粗）/ bolder（特粗）
文字的简写：font：样式粗细大小/行高字体
例如：font： italic bold 40px/30px “simsun”

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ font-size: 40px;font-family: "simsun";font-style: italic;font-weight: bold;}</style></head><body><p class="black">你好世界</p></body></html>

text相关属性

text-transform： (文字转换)
capitalize (单词首字母大写)/ upperca（全部大写）/ lowerca（全部小写）text-decoration： (文字装饰)
normal (正常)/ underline（下划线）/upperline（上划线）/line-through（删除线）text-ident：（首行缩进）
一般2em（首行缩进2字符）text-align：（文字对齐间距）
left(左)/ right（右）/center（居中）
justify：主要用于英文，只能对多行中的非最后一行进行两端对齐

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ text-transform: capitalize;text-decoration: underline;text-indent: 2em;text-align: right;}</style></head><body><p class="black">你好word</p></body></html>

间距

英文文本
word-spacing（单词与单词间距)：数字+px/normal
letter-spacing（字母和字母间距)：数字+px/normal

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ word-spacing: 10px;letter-spacing: 3px;}</style></head><body><p class="black">hello word</p></body></html>

中文文本
letter-spacing（汉字间距）：数字+px/normal

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ letter-spacing: 3px;}</style></head><body><p class="black">你好世界</p></body></html>

有关溢出进行处理

内容溢出及处理
overflow： visible（可见）/auto（浏览器自动处理）/scroll（出现滚动条）hidden（超过部分隐藏）

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title>文本溢出</title> <style type="text/css"> .map{ background-color: gold;line-height: 50px;width: 200px;white-space: nowrap;/* 文字不换行 *//* 内容超过溢出 */overflow: hidden;/* overflow: hidden; */</style></head><body><p class="map">中华人民共和国国徽，中间是五星照耀下的天安门，周围是谷穗和齿轮。</p></body></html>

文本溢出及处理
text-overflow：clip（不显示省略标记）/ elliptical（文本溢出显示省略标记）
white-space：normal（正常）/pre（空白被保留）/nowrap文字不换行

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title>文本溢出</title> <style type="text/css"> .map{ background-color: gold;line-height: 50px;width: 200px;white-space: nowrap;/* 文字不换行 *//* 内容超过溢出 */overflow: scroll;/* overflow: hidden; 建党100周年*/ /* 文本溢出 */text-overflow: ellipsis;}</style></head><body><p class="map">中华人民共和国国徽，中间是五星照耀下的天安门，周围是谷穗和齿轮。</p></body></html>

行内元素垂直对齐

vertical：baline/top（顶部）/text-top/middle（中间）/bottom（底部）

如何设置一行文本超出显示3个小点

white-space: nowrap;overflow: scroll;text-overflow: ellipsis;

css盒子模型

width和height
只定义内容的大小，不包含边框和边距，如果内容太多,超过了width或height,那么默认情况下将忽略width或height的设置overflow属性(overflow-x overflow-y)
定义内容超过width和heigth时的显示方式scroll;使用滚动条, 不论内容是否超出auto;根据情况，如果内容超出了width,则出现横向滚动条，如果内容超过了height,则出现纵向滚动条,否则不显示滚动条hidden;超出部分被隐藏visible;默认值，忽略width或height

css盒子模型-边框

边框全写

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ border: 1px solid red;}</style></head><body><p class="black">你好世界</p></body></html>

边框单独写

<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .black{ border-bottom: 1px solid red浙江的市;border-top: 1px dashed green;border-left: 1px dotted gold;border-left: 1px dotted gold;}</style></head><b英语倒装句的归纳总结ody><p class="black">你好世界</p></body></html>

拆分
border-width border-style border-color border-left

css盒子模型-内边距

padding (内边距)
边框和内容之间东呆西萌的空白宽度
注意:这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度padding的综合设置
例: padding:2px;(四个内边距都为2px)padding的单边设置
例: padding-left:2px;(左边的边框和内容之间的距离为2px)

css盒子模型-背景

background-colorimage（定义标签的背景颜色)background-image（定义背景图片，可定义多个背景）background-repeat(背景-重复)
定义背景图片的显示方式repeat,图片重复repeat-x,图片横向重复repeat-y,图片纵向重复no-repeat,图片不重复background-position(定义背景图片的位置)直接使用两个定位单词
例:background-position: right top;使用x、y坐标
例:background-position: 20px 30px;

本文地址：https://blog.csdn.net/weixin_54603642/article/details/112848531

本文发布于:2023-04-07 17:37:37，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/ea3b595ef126b4b2e3f844df2054e306.html

本文word下载地址：博客.doc

本文 PDF 下载地址：博客.pdf

上一篇：2019年腾讯PHP工程师面试题和答案

下一篇：返回列表