一、字体
字体族:font-family:"宋体"
字体风格:font-style:normal //正常
font-style:italic //斜体
font-style:oblique //斜体
字体粗细:
font-weight:lighter //细
font-weight:normal //正常、
font-weight:bold //粗
font-weight:bolder //更粗
font-weight:100~1000 //可以用数值控制,最小100
字体复合写法:
font:font-style font-weight font-size/line-height font-family;
写法规则:字体大小,字体族必须写上,字体族必须最后一位,字体大小倒数第二位,属性中间用空格隔开
二、文本
文本间距:
letter-spacing: //字母间距
word-spacing: //单词间距,通过空格识别单词
文本修饰:
属性名:text-decoration
可选值:none 无修饰线
underline 下划线
overline 上划线
line-through 删除线
可搭配使用值:
dotted 虚线
wavy 波浪线
例:
a{
text-decoration:underline dotted red; //红色下划虚线
}
文本缩进:text-indent
文本对齐:
text-align:
常用值: left center right
三、盒子
让盒子里面的元素居中:
display: flex;
justify-content: center;
align-items: center;
图片适应盒子大小:
使用object-fit属性(适用于<img>标签):
width: 100%; /* 图片宽度填满父元素 */
height: 100%; /* 图片高度填满父元素 */
object-fit: cover; /* 图片将被缩放以填充整个容器 */
要让图片居中,可以使用以下属性:
对于块级元素(例如<div>):
margin-left: auto;
margin-right: auto;
这将使元素在水平方向上居中。
对于行内元素(例如<span>):
text-align: center;
这将元素及其内容在父元素中水平居。
对于图片本身img:
display: block;
margin-left: auto;
margin-right: auto;
这将使图片在其包含的块元素中水平居。
边框相关属性
border-width 边框宽度
border-color 边框颜色
border-style 边框风格 属性值:none默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border 边框复合属性 没有数量顺序要求
四、行内、列表
行高
line-hight
可选值:由浏览器根据文字大小决定一个默认值
像素(px)
参考font-size自身倍数
参考font-size自身百分比
例:
div{
line-height:60px;
line-height:1.5;
line-height:150%;
}
vertical-align 作用:用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式
属性名:vertical-align
常用值:
1、baseline 使元素的基线与父元素的基线对齐
2、top 使元素的顶部与其所在行的顶部对齐
3、middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐
4、bottom 使元素的底部与其所在行的底部对齐
列表相关样式
属性名 功能 属性值(常用值如下)
list-style-type 设置列表符号 none :不显示前面标识
square: 实心方块
disc :圆形
decimal:数字
lower-roman: 小写罗马字
upper-roman: 大写罗马字
lower-alpha :小写字母
upper-alpha:大写字母
list-style-position 设置列表符号位置 inside :在li里面 outside :在li外面
list-style-image 自定义列表符号 url(图片地址)
list-style 复合属性 没有数量顺序要求
五、表格独有属性(<table>标签)
table-layout 设置列宽 auto:自动,列宽 根据内容计算 fixed:固定宽度
border-spacing 单元格间距 css中的长度值,生效前提是单元格边框不能合并
border-collapse 合并单元格边框 collapse:合并 separate:不合并
empty-cells 隐藏没有内容的单元格 show:显示,默认 hide:隐藏
caption-side 设置单元格标题位置 top:上面(默认) bottom:下面
六、背景属性
background-color 设置背景颜色 默认背景颜色是transparent
background-image 设置背景图片 url(图片地址)
background-repeat 设置背景重复方式 repeat:重复,铺满整个元素,默认值 repeat-x:只在水平方向重复 repeat-y:只在垂直方向重复 no-repeat:不重复
background-position 设置背景图片位置 写两个值,用空格隔开 水平:left,center,right 垂直:top,center,bottom 也可以通过长度指定坐标位置,设置x,y坐标 (10px,20px)
background 复合属性 没有数量和顺序要求
七、鼠标属性
cursor 设置光标样式
pointer:小手 move:移动图标 text:文字选择器 crosshairs:十字架 wait:等待 help:帮助
cursor:url(""),pointer ; 自定义鼠标类型
八、修改元素显示模式
通过css中的display属性修改元素的默认显示模式
值
none 元素会被隐藏
block 元素作为块级元素显示
inline 元素作为内联元素显示
inline-block 元素作为行内块元素显示