网站首页 > 知识剖析 正文
常用css列表
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px;
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
text-overflow 设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号
white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none
width 设置盒子内容的宽度,如: width:100px;
height 设置盒子内容的高度,如: height:100px;
border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线,详细设置说明:盒子模型
border-left 设置盒子左边边框的三个属性 如:border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线,详细设置说明:盒子模型
border-right 设置盒子右边边框的三个属性 如:border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线,详细设置说明:盒子模型
border-bottom 设置盒子底部边框的三个属性 如:border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线,详细设置说明:盒子模型
border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线,详细设置说明:盒子模型
padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针),详细设置说明:盒子模型
margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针),详细设置说明:盒子模型
overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切,详细设置说明:元素溢出
display 设置盒子的显示类型及隐藏,如:display:block 将盒子设置为以块元素显示 display:none 将元素隐藏,详细设置说明:元素类型
float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动,详细设置说明:元素浮动
clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动,详细设置说明:元素浮动
position 设置元素定位 如:position:relative 设置元素相对定位,详细设置说明:元素定位
background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan,详细设置说明:元素背景
background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px,这个属性不能合到background属性中,详细设置说明:retina屏适配
opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10)
cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型
outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none
border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角,详细设置说明:css圆角
box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影,详细设置说明:css阴影
transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画,详细设置说明:过渡动画
animation 设置盒子的关键帧动画,详细设置说明:关键帧动画
transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形
box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格。
猜你喜欢
- 2024-11-11 Cadence中layout常用设置及快捷键
- 2024-11-11 最强推荐: Android 开发中必备的代码 Review 清单,你还不知道吗
- 2024-11-11 前端金九银十面试必备八股文宝典——HTML&CSS
- 2024-11-11 jQueryEasyUI中的拖拽事件如何使用
- 2024-11-11 6.7 PyQt5控件介绍【文本编辑框控件】-QTextEdit
- 2024-11-11 小白 AI 编程 小白程序
- 2024-11-11 如何破解字体反爬机制 反字体代码
- 2024-11-11 感受 AI 的力量——利用 Cursor 自动生成 powershell 脚本下载 TheOldNewThing 博文
- 2024-11-11 「软帝学院」java常用词汇分享第二弹
- 2024-11-11 MS-DOS信息英汉对照1.3 信息英文message
- 04-29php开发者composer使用看这一篇就够了
- 04-29引用和变量声明在不同语言中的实作
- 04-29PHP 没你想的那么差
- 04-29Ubuntu linux 上的 Nginx 和 Php 安装
- 04-29CentOS下通过yum搭建lnmp(单版本PHP)
- 04-29为什么 PHP8 是个高性能版本
- 04-29PHP8函数包含文件-PHP8知识详解
- 04-29使用无参数函数进行命令执行
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)