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

举报
陶然同学 发表于 2022/07/28 01:02:33 2022/07/28
【摘要】 🔎这里是【前端网页】,关注我学习前端不迷路 👍如果对你有帮助,给博主一个免费的点赞以示鼓励 欢迎各位🔎点赞👍评论收藏⭐️ 👀专栏介绍 【前端网页】 目前主要更新HTML,一起学习一起进步。 👀本期介绍 本期主要介绍CSS之拓展样式以及Emmet语法 文章目录 1. 拓展样式 1.1 盒子阴影 1.2 文本...

🔎这里是【前端网页】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【前端网页】 目前主要更新HTML,一起学习一起进步。

👀本期介绍

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

文章目录

1. 拓展样式

1.1 盒子阴影

1.2 文本省略

1.3 盒子宽高策略

2. Emmet 语法

2.1 简述

2.2 通用说明

2.3 页面生成

2.4 HTML 标签生成

2.4.1 单标签生成

2.4.2 层级标签生成

2.5 CSS 快速生

1. 拓展样式

1.1 盒子阴影

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

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

1.2 文本省略

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

格式:

1.3 盒子宽高策略

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

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

准备代码 :

2. Emmet 语法

2.1 简述

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

2.2 通用说明

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

2.3 页面生成

格式: html:5
效果
格式:html:4s
效果:

 

2.4 HTML 标签生成

2.4.1 单标签生成

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

2.4.2 层级标签生成

2.5 CSS 快速生成

有些 CSS 支持快速使用首字母缩写来快速生成:
例如:快速生成宽度属性 w200 。结果: width:200px;
快速生成行高属性 lh26 。 结果: line-height:26px;
快速生成背景颜色 bc 。 结果: background-color: #fff;
CSS 属性默认长度单位是 px ,可以直接指定其他单位:例如: lh26em

文章来源: blog.csdn.net,作者:陶然同学,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_45481821/article/details/125866896

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。