摘要:规则取值关键字位置取消颜色十六进制简写为函数关键字渐变色长度绝对单位相对单位当前元素上的字体大小当前元素中设定的字体大小百分比字体样式可以被继承族微软雅黑宋体字体栈微软雅黑大小网页默认字体为粗细是否打开斜体速写,简写
规则取值:
</>复制代码
关键字:
位置 left right center top bottom medium
取消 none
颜色:
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度:
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小
html {
font-size:10px;
}
ul {
font-size:20px;
}
li {
height:2rem; //20px
}
% 百分比
border-radius:50%
字体样式 (可以被继承)
color
font-family 族
"微软雅黑" ,"Microsoft YaHei","宋体"
字体栈
font-family:"微软雅黑","Microsoft YaHei",serif;
font-size 大小
网页默认字体为16px
12px 10px
font-weight 粗细
bold
thin
bolder
100~900
font-style 是否打开斜体
line-height
font:
速写,简写
font: font-style font-weight font-size/line-height font-family
font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"
网络字体
奇葩字体,(字 -> icon)
@font-face {
font-family: "iconfont";
src: url("iconfont.eot?t=1564624596715"); /* IE9 */
src: url("iconfont.eot?t=1564624596715#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;base64,=") format("woff2"),
url("iconfont.woff?t=1564624596715") format("woff"),
url("iconfont.ttf?t=1564624596715") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("iconfont.svg?t=1564624596715#iconfont") format("svg"); /* iOS 4.1- */
}
.lishiziti {
font-family:"iconfont"
}
.weixin:before {
content:"e123"
}
图标:
1. 将图标从设计图中切割下来,当做图片使用(小程序)
缺点:放大与缩小比较麻烦,失真;无法更换颜色
2. 字体图标库(网页)
hello
字体图标库(第三方库)
iconfont / fontawesome(拓展)
使用方法:
1) 在iconfont官网中选择要使用的图标,放入到购物车中
2) 下载源码到本地
3) 本地引用iconfont.css文件
4) 应用样式即可
文本样式 (可以被继承)
text-align 文本在容器中的排列方式
left
right
center
text-indent 文本在容器中的缩进
2em
text-decoration-line 文本装饰线的位置
none
underline
overline
line-through
text-decoration-style 文本装饰线的类型
solid
double
dotted
dashed
wavy
text-decoration-color 文本装饰线的颜色
text-decoration 以上速写形式
text-shadow 文本的阴影
left top c color;
列表样式
list-style-type
circle/quare/...
list-style-image
url()
list-style-position
inside/outside
list-style:none 【*】
盒子样式(块元素)
width
height
margin
盒子上下外边距不会合并,比如,第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
margin-top
margin-right
margin-bottom
margin-left
margin:10px; 上右下左都为10px
margin:0 10px; 上下为0,左右为10px
margin:0 5px 10px;上0,下10px 左右5px
margin:5px 10px 15px 20px 上右下左
padding
padding-top
padding-right
padding-bottom
padding-left
padding:10px; 上右下左都为10px
padding:0 10px; 上下为0,左右为10px
padding:0 5px 10px;上0,下10px 左右5px
padding:5px 10px 15px 20px 上右下左
border
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border:1px solid #ededed;
border-radius
box-shadow
box-shadow:5px 5px 10px #ccc;
box-shadow:inset 0px 0 3px lightblue;
background-origin 背景起点
border-box
padding-box
content-box
background-clip 对已经铺好的背景裁切
border-box
padding-box
content-box
background-image
url()
background-color
颜色
background-position
位置
center
left top
100px 50px
background-repeat
repeat-x
repeat-y
no-repeat
background
background:url("") no-repeat center;
background:center/cover padding-box url("./image/lianjia_08.png") no-repeat ;
1) 盒子模型
内容盒子 (width = 内容宽)【传统盒子】
是绝大多数浏览器的默认盒子模型
width : 100px
表示内容区域的宽为100px
边框盒子 (width = 边框以内所有元素宽)【怪异盒子】
width : 100px;
表示边框以内所有的宽的综合
width = border + padding + 内容区域
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116184.html
摘要:作者简介是推出的一个天挑战。完整指南在从零到壹全栈部落。通过时分秒对一圈度,进行映射,确定每一个指针所需旋转的角度。此前的代码中,每秒都会重新一个对象,用来计算角度值,但如果让这个角度值一直保持增长,也就不会出现逆时针回旋的问题了。 Day02 - JavaScript + CSS Clock 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个...
摘要:实现可伸缩的图片墙中文指南作者简介是推出的一个天挑战。现在你看到的是这系列指南的第篇。完整指南在从零到壹全栈部落。实现效果点击任意一张图片,图片展开,同时从图片上下两方分别移入文字。 Day05 - Flex 实现可伸缩的图片墙 中文指南 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 ...
摘要:今天是来到新公司的第五天,开始看手中的项目,做的东西是类似网易一元购这样的产品,有安卓平台还有网站,总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时,图片统一使用设计稿的切图在时,图片统一使用,也就是所谓设计稿的切图。 今天是来到新公司的第五天,开始看手中的项目,做的东西是类似网易一元购这样的产品,有安卓ios平台还有H5网站,总共三个渠道。首先代码里,头部head引入的flex...
阅读 2970·2021-09-22 15:20
阅读 3102·2021-09-22 15:19
阅读 3598·2021-09-22 15:15
阅读 2612·2021-09-08 09:35
阅读 2452·2019-08-30 15:44
阅读 3092·2019-08-30 10:50
阅读 3909·2019-08-29 16:25
阅读 1671·2019-08-26 13:55