您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

常用css列表

时间:2019-09-19 10:28:57  来源:  作者:

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边框的表格。



Tags:css   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  Search: css  点击:(133)  评论:(0)  加入收藏
Vue里使用Tailwind CSS,这不是耍流氓吗
前言随着前端的发展,对前端页面的要求越来越高,而css的功能也越来越强大,但对于写css样式来说却是非常头疼的的事。因为前端页面的动画要求以及页面布局的精细管控,需要写大量的...【详细内容】
2023-12-11  Search: css  点击:(168)  评论:(0)  加入收藏
原生CSS嵌套使用,你学明白了吗?
如果你是一个前端开发人员,那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能,我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CS...【详细内容】
2023-12-06  Search: css  点击:(185)  评论:(0)  加入收藏
CSS_Flex 那些鲜为人知的内幕
前言Flex想必大家都很熟悉,也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时,是如何查阅并解决的。反正,我每次记不住哪些属性或...【详细内容】
2023-12-06  Search: css  点击:(140)  评论:(0)  加入收藏
CSS:这几个伪类,你用了吗
## :root 伪类:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。 root...【详细内容】
2023-11-30  Search: css  点击:(170)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  Search: css  点击:(255)  评论:(0)  加入收藏
CSS 新功能:让编码更高效
CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。本文将介绍一些即将推出的...【详细内容】
2023-11-16  Search: css  点击:(167)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  Search: css  点击:(280)  评论:(0)  加入收藏
CSS这几个函数很实用,也很简单
calc()CSS 的 calc 函数非常实用,很多情况下,我们都会用到这个函数。calc 函数支持加减乘除四种运算,但是,它也有限制: 运算符前后带有单位或者百分比的数值,只能进行加减,不能进行...【详细内容】
2023-11-08  Search: css  点击:(220)  评论:(0)  加入收藏
这三个CSS生成器千万别错过啦!
前言 大家好我是小卢,「新拟态风格」和「磨砂玻璃」风格都是让人眼前一亮的一种设计风格,已经成为了最具代表性的设计趋势之一。 但是我们在真正写 CSS 的时候不容易调整这个...【详细内容】
2023-11-03  Search: css  点击:(159)  评论:(0)  加入收藏
▌简易百科推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  前端充电宝  微信公众号  Tags:CSS   点击:(133)  评论:(0)  加入收藏
原生CSS嵌套使用,你学明白了吗?
如果你是一个前端开发人员,那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能,我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CS...【详细内容】
2023-12-06  南城大前端  微信公众号  Tags:CSS   点击:(185)  评论:(0)  加入收藏
CSS_Flex 那些鲜为人知的内幕
前言Flex想必大家都很熟悉,也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时,是如何查阅并解决的。反正,我每次记不住哪些属性或...【详细内容】
2023-12-06  前端柒八九  微信公众号  Tags:CSS   点击:(140)  评论:(0)  加入收藏
CSS:这几个伪类,你用了吗
## :root 伪类:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。 root...【详细内容】
2023-11-30  读心悦  微信公众号  Tags:CSS   点击:(170)  评论:(0)  加入收藏
让你开发更舒适的 Tailwind 技巧
免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验使用 Tailwind CSS,我避免了在 React 项目中复制大量 CSS 文件的麻烦,使网页开发变得更加迅速高效。虽然 Tailwind...【详细内容】
2023-11-28  大迁世界  微信公众号  Tags:Tailwind   点击:(178)  评论:(0)  加入收藏
Display和Visibility的区别,你了解了吗?
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当...【详细内容】
2023-11-27  读心悦  微信公众号  Tags:Display   点击:(174)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  大迁世界  微信公众号  Tags:CSS   点击:(255)  评论:(0)  加入收藏
CSS 新功能:让编码更高效
CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。本文将介绍一些即将推出的...【详细内容】
2023-11-16  大迁世界  微信公众号  Tags:CSS   点击:(167)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  前端YUE  微信公众号  Tags:CSS   点击:(280)  评论:(0)  加入收藏
2024年了,别只使用React,需要学习一下Vue,不然没出路了
最近,我的朋友因为不熟悉 Vue.js 而未能通过面试。她平时工作中大部分时间都在使用React,所以也懒得去了解其他前端框架。世界上所有的前端框架我们都应该熟悉吗?不,这是极其不...【详细内容】
2023-11-08  web前端开发  微信公众号  Tags:Vue   点击:(299)  评论:(0)  加入收藏
站内最新
站内热门
站内头条