资讯专栏INFORMATION COLUMN

css学习day05

EdwardUp / 2451人阅读

摘要:规则取值关键字位置取消颜色十六进制简写为函数关键字渐变色长度绝对单位相对单位当前元素上的字体大小当前元素中设定的字体大小百分比字体样式可以被继承族微软雅黑宋体字体栈微软雅黑大小网页默认字体为粗细是否打开斜体速写,简写

规则取值:

</>复制代码

  1. 关键字:
  2. 位置 left right center top bottom medium
  3. 取消 none
  4. 颜色:
  5. 十六进制 #ffffff #ededed,简写为#fff
  6. rgb函数 rgb(0,0,0)
  7. 关键字
  8. 渐变色 linear-gradient
  9. 长度:
  10. 绝对单位 px
  11. 相对单位
  12. em 当前元素上的字体大小
  13. font-size:12px
  14. 1em = 12px
  15. 2em = 24px
  16. rem 当前html元素中设定的字体大小
  17. html {
  18. font-size:10px;
  19. }
  20. ul {
  21. font-size:20px;
  22. }
  23. li {
  24. height:2rem; //20px
  25. }
  26. % 百分比
  27. border-radius:50%
  28. 字体样式 (可以被继承)
  29. color
  30. font-family 族
  31. "微软雅黑" ,"Microsoft YaHei","宋体"
  32. 字体栈
  33. font-family:"微软雅黑","Microsoft YaHei",serif;
  34. font-size 大小
  35. 网页默认字体为16px
  36. 12px 10px
  37. font-weight 粗细
  38. bold
  39. thin
  40. bolder
  41. 100~900
  42. font-style 是否打开斜体
  43. line-height
  44. font:
  45. 速写,简写
  46. font: font-style font-weight font-size/line-height font-family
  47. font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"
  48. 网络字体
  49. 奇葩字体,(字 -> icon)
  50. @font-face {
  51. font-family: "iconfont";
  52. src: url("iconfont.eot?t=1564624596715"); /* IE9 */
  53. src: url("iconfont.eot?t=1564624596715#iefix") format("embedded-opentype"), /* IE6-IE8 */
  54. url("data:application/x-font-woff2;charset=utf-8;base64,=") format("woff2"),
  55. url("iconfont.woff?t=1564624596715") format("woff"),
  56. url("iconfont.ttf?t=1564624596715") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  57. url("iconfont.svg?t=1564624596715#iconfont") format("svg"); /* iOS 4.1- */
  58. }
  59. .lishiziti {
  60. font-family:"iconfont"
  61. }
  62. .weixin:before {
  63. content:"e123"
  64. }
  65. 图标:
  66. 1. 将图标从设计图中切割下来,当做图片使用(小程序)
  67. 缺点:放大与缩小比较麻烦,失真;无法更换颜色
  68. 2. 字体图标库(网页)
  69. hello
  70. 字体图标库(第三方库)
  71. iconfont / fontawesome(拓展)
  72. 使用方法:
  73. 1) 在iconfont官网中选择要使用的图标,放入到购物车中
  74. 2) 下载源码到本地
  75. 3) 本地引用iconfont.css文件
  76. 4) 应用样式即可
  77. 文本样式 (可以被继承)
  78. text-align 文本在容器中的排列方式
  79. left
  80. right
  81. center
  82. text-indent 文本在容器中的缩进
  83. 2em
  84. text-decoration-line 文本装饰线的位置
  85. none
  86. underline
  87. overline
  88. line-through
  89. text-decoration-style 文本装饰线的类型
  90. solid
  91. double
  92. dotted
  93. dashed
  94. wavy
  95. text-decoration-color 文本装饰线的颜色
  96. text-decoration 以上速写形式
  97. text-shadow 文本的阴影
  98. left top c color;
  99. 列表样式
  100. list-style-type
  101. circle/quare/...
  102. list-style-image
  103. url()
  104. list-style-position
  105. inside/outside
  106. list-style:none 【*】
  107. 盒子样式(块元素)
  108. width
  109. height
  110. margin
  111. 盒子上下外边距不会合并,比如,第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
  112. margin-top
  113. margin-right
  114. margin-bottom
  115. margin-left
  116. margin:10px; 上右下左都为10px
  117. margin:0 10px; 上下为0,左右为10px
  118. margin:0 5px 10px;上0,下10px 左右5px
  119. margin:5px 10px 15px 20px 上右下左
  120. padding
  121. padding-top
  122. padding-right
  123. padding-bottom
  124. padding-left
  125. padding:10px; 上右下左都为10px
  126. padding:0 10px; 上下为0,左右为10px
  127. padding:0 5px 10px;上0,下10px 左右5px
  128. padding:5px 10px 15px 20px 上右下左
  129. border
  130. border-top-width
  131. border-right-width
  132. border-bottom-width
  133. border-left-width
  134. border-width
  135. border-top-style
  136. border-right-style
  137. border-bottom-style
  138. border-left-style
  139. border-style
  140. border-top-color
  141. border-right-color
  142. border-bottom-color
  143. border-left-color
  144. border-color
  145. border:1px solid #ededed;
  146. border-radius
  147. box-shadow
  148. box-shadow:5px 5px 10px #ccc;
  149. box-shadow:inset 0px 0 3px lightblue;
  150. background-origin 背景起点
  151. border-box
  152. padding-box
  153. content-box
  154. background-clip 对已经铺好的背景裁切
  155. border-box
  156. padding-box
  157. content-box
  158. background-image
  159. url()
  160. background-color
  161. 颜色
  162. background-position
  163. 位置
  164. center
  165. left top
  166. 100px 50px
  167. background-repeat
  168. repeat-x
  169. repeat-y
  170. no-repeat
  171. background
  172. background:url("") no-repeat center;
  173. background:center/cover padding-box url("./image/lianjia_08.png") no-repeat ;
  174. 1) 盒子模型
  175. 内容盒子 (width = 内容宽)【传统盒子】
  176. 是绝大多数浏览器的默认盒子模型
  177. width : 100px
  178. 表示内容区域的宽为100px
  179. 边框盒子 (width = 边框以内所有元素宽)【怪异盒子】
  180. width : 100px;
  181. 表示边框以内所有的宽的综合
  182. width = border + padding + 内容区域

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

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

相关文章

  • Day02 - JavaScript + CSS Clock

    摘要:作者简介是推出的一个天挑战。完整指南在从零到壹全栈部落。通过时分秒对一圈度,进行映射,确定每一个指针所需旋转的角度。此前的代码中,每秒都会重新一个对象,用来计算角度值,但如果让这个角度值一直保持增长,也就不会出现逆时针回旋的问题了。 Day02 - JavaScript + CSS Clock 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个...

    zzbo 评论0 收藏0
  • Day05 - Flex 实现可伸缩的图片墙 中文指南

    摘要:实现可伸缩的图片墙中文指南作者简介是推出的一个天挑战。现在你看到的是这系列指南的第篇。完整指南在从零到壹全栈部落。实现效果点击任意一张图片,图片展开,同时从图片上下两方分别移入文字。 Day05 - Flex 实现可伸缩的图片墙 中文指南 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 ...

    zhangfaliang 评论0 收藏0
  • Day05-flexible.js

    摘要:今天是来到新公司的第五天,开始看手中的项目,做的东西是类似网易一元购这样的产品,有安卓平台还有网站,总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时,图片统一使用设计稿的切图在时,图片统一使用,也就是所谓设计稿的切图。 今天是来到新公司的第五天,开始看手中的项目,做的东西是类似网易一元购这样的产品,有安卓ios平台还有H5网站,总共三个渠道。首先代码里,头部head引入的flex...

    HtmlCssJs 评论0 收藏0

发表评论

0条评论

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