资讯专栏INFORMATION COLUMN

css属性(常用属性整理)

leanxi / 1487人阅读

摘要:字体属性斜体复合属性文本属性词的间距,通过空格来识别字母间隔,可以为负值横向排列让文字水平居中内联元素和垂直对齐设置行间距离让一行文字垂直居中。对影响大指定要过渡的属性用隔开。

摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改。希望对大家有帮助!

 

CSS属性

CSS属性 1

1. css颜色属性 5

1.1. 字体颜色 5

1.2. 背景颜色 5

2. 页面布局相关属性 5

2.1. display 5

2.2. position 6

2.2.1. position:relative 6

2.2.2. position:absolute 6

2.2.3. position:fixed 7

2.2.4. z-index:number 7

2.3. clear 7

2.4. float 8

2.5. visibility 8

2.6. overflow 8

2.6.1. visible 8

2.6.2. hidden 8

2.6.3. auto 8

2.6.4. scroll 9

2.7. overflow-x 9

2.8. overflow-y 9

2.9. padding(内边距属性已说明) 9

2.10. margin 9

2.10.1. margin-left 9

2.10.2. margin-top 9

2.10.3. margin-right 9

2.10.4. margin-bottom 9

2.10.5. margin 多个值 9

3. css字体属性 10

3.1. font-family 10

3.2. font-size 10

3.3. font-weight 10

3.4. font-style 10

3.5. font-varient 10

3.6. font 复合属性 10

4. css文本属性 10

4.1. word-spacing 10

4.2. letter-spacing 10

4.3. text-align 11

4.4. vertical-align 11

4.5. line-height 11

4.6. text-decoration 11

4.7. text-indent 11

4.8. word-wrap 11

4.9. overflow-wrap 12

4.10. white-space 12

5. 尺寸属性 12

5.1. width 12

5.2. height 12

6. 边框属性 12

6.1. border-style 12

6.2. border-width 12

6.3. border-color 13

6.4. border复合属性 13

7. 内边距属性 13

7.1. padding-left 13

7.2. padding-right 13

7.3. padding-top 13

7.4. padding-botom 13

7.5. padding 13

8. 背景颜色属性 14

8.1. background-color 14

8.2. background-image 14

8.3. background-repeat 14

8.4. background-position 14

8.5. background-attachment 14

8.6. background复合属性 14

8.7. background-size 15

9. 游标 cursor 15

10. 列表相关的css属性 15

10.1. list-style-type 15

10.2. list-style-position 16

10.3. list-style-image 16

10.4. list-style: 复合属性 16

11. 表格相关的css属性 16

11.1. table-layout 16

11.2. border-collapse 16

11.3. border-spacing 16

11.4. caption-side 16

11.5. empty-cells 17

12. css3新增属性 17

12.1. box-sizing 17

12.2. outline 17

12.3. opacity 17

12.4. border-radius 18

12.4.1. border-top-left-radius 18

12.4.2. border-top-right-radius 18

12.4.3. border-bottom-left-radius 18

12.4.4. border-bottom-right-radius 18

12.5. outline 18

12.5.1. outline-style 18

12.5.2. outline-color 18

12.5.3. outline-width 18

12.5.4. outline复合属性 18

12.6. box-shadow 19

12.7. transform 19

12.7.1. transform-origin 19

12.8. transition 19

12.8.1. transition-property 19

12.8.2. transition-duration 20

12.8.3. transition-timing-function 20

12.8.4. transition-delay 20

12.8.5. transition 复合属性 20

12.9. animation 20

12.9.1. animation-name 20

12.9.2. animation-duration 20

12.9.3. animation-timing-function 20

12.9.4. animation-delay 21

12.9.5. animation-iteration-count 21

12.9.6. animation-direction 21

12.9.7. animation-play-state 21

12.9.8. animation 复合属性 21

 

附上整篇文章的思维导图

 

1. css颜色属性

1.1. 字体颜色

字体颜色相关属性设置:

color:red

color:#f90

color:rgb(250,250,0)

color:rgba(r,g,b,透明度(0-1))

 

1.2. 背景颜色

背景颜色相关属性设置:

background:#f90;

background:rgb(255,255,0);

background:red;

background:rgba()

 

2. 页面布局相关属性

2.1. display

display

block 设置元素为块状元素

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1930.html

相关文章

  • 前端面试知识点目录整理

    摘要:写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家 写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

    xzavier 评论0 收藏0
  • 前端面试知识点目录整理

    摘要:写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家 写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

    enda 评论0 收藏0
  • html常用标签整理

    摘要:主要通过样式为其赋予不同的表现标签用来定义内联行内元素,并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成lang=en 3 4 <head> 5 <meta charset...

    番茄西红柿 评论0 收藏0
  • css常用技巧整理-布局综述篇

    摘要:效果图为了让效果更明显,特意设置了两边字体大小不同关键代码父容器子容器这里要提一下的是,只对于内联元素或者内联内容有效,比如说为块级元素标签设置行高,实际上是为标签中的内联文字设置了行高。允许指定负长度值和百分比值。 前言 先扯一段废话来引入好了。又很久没有写文章了(间接性踌躇满志,持续性混吃等死),几个月了登上来看到有人收藏和点赞,感到很惭愧,最近主要精力花费在react和redux...

    endiat 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0

发表评论

0条评论

leanxi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<