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

常用的css属性

时间:2019-11-06 11:14:57  来源:  作者:
常用的css属性

 

今天给大家介绍一些常用的css属性:

1 font-size:用于设置字体大小

font-size:20px; font-size:150%

2 font-weight:设置字体是否加粗

normal 不加粗 2 bold:加粗

3 font-style:设置字体是否倾斜

normal 不倾斜 italic 倾斜

4 font-family:设置字体名称

font-family:”宋体”, ”微软雅黑”

5 font:设置字体相关的属性

font: 20px “宋体”

6 line-height:控制行间距

让单行文本在垂直方向居中: height:50px; line-height:50px;

7 text-align :设置文本在水平方向上的对齐方式

center:居中 justify:两端对齐 left: 默认值 right:右对齐

8 color:设置文本的颜色

取值:

8.1 英文单词

8.2十六进制 #000

8.3 rgb(red,green,blue) 每部分的取值范围:0-255

8.4 rgba(red,green,blue,alpha)

9 letter-spacing :设置字间距

letter-spacing :2px

10 word-break:控制英文字符的换行

word-break:break-all;

11 text-indent:控制缩进

首行缩进 text-indent:2em em等价于1个字符的宽度

12 text-decoration:设置划线

none 无划线

underline 下划线

line-through 贯穿线

13 list-style: 设置列表样式

去除默认样式: ul,ol{ list-style:none; }

14 cursor:设置鼠标指针形状

cursor:pointer

15 background-color: 设置背景颜色

16 background-image:设置背景图片

background-image:url(“图片文件的路径”)

17 background-repeat: 设置背景重复方式

no-repeat :不重复(平铺)

repeat-x:水平方向重复

repeat-y: 垂直方向重复

repeat:水平和垂直方向都重复(默认值)

18 background-position:设置背景图片定位

background-position: x y (x:表示水平方向的移动距离 ,y:表示垂直方向的移动距离)

19 background-attachment:设置背景图片是否滚动

scroll 滚动(默认值,背景图片会随着内容往窗口里面钻)

fixed 固定

20 background :背景的复合属性

background: orange url(1.jpg) 10px 20px no-repeat fixed(没有顺序之分)

21 width:设置元素的宽度

22 height:设置元素的高度

23 padding:设置元素的内边距

24 border:设置元素的边框

25 margin:设置元素的外边距



Tags:css   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  Tags: css  点击:(25)  评论:(0)  加入收藏
什么是css的调用方式?简单来讲,就是解决把css代码写在哪里的问题,这块内容之前在课堂上演示过,这里再用文字说明一下,权当复习。大体有以下四种方式: 外联式样式表; 内嵌样式表; 元...【详细内容】
2021-05-27  Tags: css  点击:(58)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  Tags: css  点击:(54)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  Tags: css  点击:(72)  评论:(0)  加入收藏
作为Web开发人员应避免的10种CSS做法!有人认为CSS很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如...【详细内容】
2021-05-12  Tags: css  点击:(80)  评论:(0)  加入收藏
以下代码来源 https://tobiasahlin.com/spinkit/为了怕源文件删除,我抄录了几个.....1、加载方块(是我喜欢的效果) //html<div class="spinner"></div>//css.spinner { widt...【详细内容】
2021-05-07  Tags: css  点击:(73)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  Tags: css  点击:(93)  评论:(0)  加入收藏
1. 关于pxpx想必大多数人都知道是像素pixel的缩写, px也就是以像素为单位.2. 关于 vw 和 vh 2.1 关于 视口(Viewport)讲到vw和vh, 它们在CSS3规范中都是视口单位(Viewport u...【详细内容】
2021-04-25  Tags: css  点击:(106)  评论:(0)  加入收藏
前言在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相...【详细内容】
2021-04-14  Tags: css  点击:(116)  评论:(0)  加入收藏
作者:幻灵尔依 (授权原创)https://juejin.im/post/5e0fef935188253a624a6a72《css揭秘》中讲了47个css技巧,其中有很多日常编码中并不会用到,本文除了将书中部分实用技巧罗列...【详细内容】
2021-04-08  Tags: css  点击:(137)  评论:(0)  加入收藏
▌简易百科推荐
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  XboxYan    Tags:CSS   点击:(25)  评论:(0)  加入收藏
什么是css的调用方式?简单来讲,就是解决把css代码写在哪里的问题,这块内容之前在课堂上演示过,这里再用文字说明一下,权当复习。大体有以下四种方式: 外联式样式表; 内嵌样式表; 元...【详细内容】
2021-05-27  欢乐码  今日头条  Tags:CSS   点击:(58)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  XboxYan  今日头条  Tags:CSS   点击:(54)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  XboxYan  今日头条  Tags:CSS   点击:(72)  评论:(0)  加入收藏
作为Web开发人员应避免的10种CSS做法!有人认为CSS很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如...【详细内容】
2021-05-12  趣动云  今日头条  Tags:CSS   点击:(80)  评论:(0)  加入收藏
以下代码来源 https://tobiasahlin.com/spinkit/为了怕源文件删除,我抄录了几个.....1、加载方块(是我喜欢的效果) //html<div class="spinner"></div>//css.spinner { widt...【详细内容】
2021-05-07  is芳小芳  今日头条  Tags:css   点击:(73)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  前端小混混  前端先锋  Tags:CSS   点击:(93)  评论:(0)  加入收藏
1. 关于pxpx想必大多数人都知道是像素pixel的缩写, px也就是以像素为单位.2. 关于 vw 和 vh 2.1 关于 视口(Viewport)讲到vw和vh, 它们在CSS3规范中都是视口单位(Viewport u...【详细内容】
2021-04-25    今日头条  Tags:CSS   点击:(106)  评论:(0)  加入收藏
前言在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相...【详细内容】
2021-04-14  web秀  今日头条  Tags:CSS   点击:(116)  评论:(0)  加入收藏
作者:幻灵尔依 (授权原创)https://juejin.im/post/5e0fef935188253a624a6a72《css揭秘》中讲了47个css技巧,其中有很多日常编码中并不会用到,本文除了将书中部分实用技巧罗列...【详细内容】
2021-04-08  Echa攻城狮  今日头条  Tags:CSS   点击:(137)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条