博客
程序员文章站
2022-03-10 21:54:50
css中字体相关样式font相关属性font-family： （指定字体）可以为文字指定多个字体，不同字体用“，”隔开字体名字中间有空格的要用“ ”引起来font-size： （字题大小）单位多用px/em单位font-style： （字体倾斜效果）normal（正常）/italic（斜体) /oblique(强制斜体)italic 是使文字倾斜 oblique是使没有倾斜属性的文字倾斜（列如，思源黑体)font-weight： （文字粗细）100~900（从小到大）/lig...
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 charset="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 (单词首字母大写)/ uppercase（全部大写）/ lowercase（全部小写） - text-decoration： (文字装饰)
normal (正常)/ underline（下划线）/upperline（上划线）/line-through（删除线） - text-ident： （首行缩进）
一般2em（首行缩进2字符） - text-align： （文字对齐间距）
left(左)/ right（右）/center（居中）
justify：主要用于英文，只能对多行中的非最后一行进行两端对齐<!DOCTYPE html> <html> <head> <meta charset="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 charset="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 charset="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 charset="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 charset="utf-8"> <title>文本溢出</title> <style type="text/css"> .map{ background-color: gold; line-height: 50px; width: 200px; white-space: nowrap; /* 文字不换行 */ /* 内容超过溢出 */ overflow: scroll; /* overflow: hidden; */ /* 文本溢出 */ text-overflow: ellipsis; } </style> </head> <body> <p class="map">*国徽，中间是五星照耀下的*，周围 是谷穗和齿轮。</p> </body> </html>
行内元素垂直对齐
vertical：baseline/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 charset="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 charset="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>
<body>
<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