【网页前端】CSS之拓展样式以及Emmet语法

简介: 本期主要介绍CSS之拓展样式以及Emmet语法

1. 拓展样式


1.1 盒子阴影


我们可以为盒子添加阴影。

格式:box-shadowX 轴偏移 Y 轴偏移 模糊程度 阴影颜色;

image.png

image.png

1.2 文本省略


当盒子内文本过多时,我们可以使用 CSS 效果进行文本省略。

image.png

格式:

image.png

1.3 盒子宽高策略


box-sizing 用以决定盒子实际宽高如何设置的策略。

image.png

通常,为了布局的稳定,某盒子若有内边距,我们常会使用 border-box 策略

准备代码:

image.png

2. Emmet 语法


2.1 简述


Emmet 语法是前端开发中一个提升效率的开发工具,大部分编辑器都支持,可以快速生成前端代

码,在开发中广泛使用。

2.2 通用说明


Emmet 语法在解析时,都是在编辑器上按 TAB 键,激活语法解析,生成快捷代码。

2.3 页面生成


格式: html:5

效果

image.png

image.png

2.4 HTML 标签生成


2.4.1 单标签生成


image.png

image.png

image.png

注意:以上用法都可以嵌套使用

2.4.2 层级标签生成


image.png

2.5 CSS 快速生成


有些 CSS 支持快速使用首字母缩写来快速生成:

例如:快速生成宽度属性 w200。结果:width:200px;

快速生成行高属性 lh26 。 结果: line-height:26px;

快速生成背景颜色 bc 。 结果: background-color: #fff;

CSS 属性默认长度单位是 px ,可以直接指定其他单位:例如: lh26em


相关文章
|
5天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
2天前
|
前端开发 流计算
程序与技术分享:css样式大全,完整的Css样式大全(整理)
程序与技术分享:css样式大全,完整的Css样式大全(整理)
|
4天前
|
移动开发 前端开发 HTML5
CSS 常用样式属性和字体图标
CSS 常用样式属性和字体图标
|
4天前
|
Web App开发 存储 SQL
CSS3 常用样式
CSS3 常用样式
CSS3 常用样式
|
1天前
|
前端开发
CSS外部样式
CSS外部样式
7 0
|
1天前
|
XML 前端开发 数据格式
深入理解CSS内部样式的编写方式
深入理解CSS内部样式的编写方式
10 0
|
1天前
|
前端开发
CSS行内样式书写规范及注意事项
CSS行内样式书写规范及注意事项
5 0
|
1天前
|
前端开发 开发者
CSS文本样式全面解析:从基础到进阶
CSS文本样式全面解析:从基础到进阶
8 0
|
4天前
|
前端开发
技术心得:前端滚动条的样式
技术心得:前端滚动条的样式
|
4天前
|
移动开发 前端开发 UED
CSS3 常用样式属性
CSS3 常用样式属性