盒子模型(Box Model)
设置页面内容是html 编码格式是utf-8:
超链接各种状态设置:
页面跳转方法:
常用短语元素样式:
abbr:缩略语
br:换行
em:标志着重强调一段文字
i:表示与周边内容兼容不同的一段文字,比如来自另一种语言
span:一个没有自己语意的通用元素,可以用在希望引入一些全局属性却又不想引入额外语义的情况
strong:表示重要内容
wbr:表示可安全换行的地方
blockquote:表示引自他处的大段内容
nav:表示有意集中一起的导航元素
canvas:生成一个动态的图形画布
progress:嵌入目标进展或任
Web安全字体组合:
Serif 字体(有衬线字体)
sans - serif字体(没有衬线的字体)
Monospace 字体(等宽字体)
WEB安全色:
WEB SAFE COLORS
颜色的三种表示方式:
十六进制色 color:#0000ff; //若能简化可简化为#00f
RGB 颜色 color:rgb(255,0,0);
RGBA 颜色 color:rgba(255,0,0,0.5);//alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)
HSL 颜色 color:hsl(120,65%,75%);//HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度)
HSLA 颜色 color:hsla(120,65%,75%,0.3);//alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)
预定义/跨浏览器颜色名
检查网页背景是否和文本/链接颜色有较好的对比度
WebAIM Color Contrast Checker
CSS的三种引入方式
一、行内样式:使用style属性引入CSS样式。
示例:
二、内部样式表:在style标签中书写CSS代码。style标签写在head标签中。
示例:
三、外部样式表:CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。
语法:
用图片代替列符号
向列表
,添加list-style-image属性:
给大家推荐我的web前端资料分享群:64596,
5538有免费学习资料,还有各种趣味案例,欢迎大家加入!
收藏图标(favorites icon)设置
用于网页标题栏前小图标,例如:
背景设置
相对链接方式
1、直接使用当前目录或当前子文件夹下的文件:
href="index.html"
href="img/c.jpg"
2、使用../返回当前目录上级目录
href="../index.html"
或先返回上级目录,在向下选用文件
href="../img/c.jpg"
做一个对话框
减少代码耦合
一个参数在多个文件中使用,修改一个地方会影响全局。防止耦合可使用传参的方式。
减少重复代码
将重复代码封装成一个函数(模块、插件、类等)。
页面元素推拽
样式规则的权重计算方式
绝对定位层下margin:auto会失效
定位就不能用margin了, 要用left/top/right/bottom等。如设置left:50%,然后margin-left的值为层的宽度的一半,就可在达到margin:auto的效果。
领取专属 10元无门槛券
私享最新 技术干货