【第19期】一文用Tailwind CSS写自己的网站

简介: 【第19期】一文用Tailwind CSS写自己的网站

概述

Tailwind CSS 缩写及其对应的意义,覆盖了基础的布局、文本、背景、边框、弹性盒子布局、网格布局和响应式设计,有助于更快速地开发出具有良好用户体验的 Web 应用程序。了解了这些,你可以用Tailwind CSS快WEW速开发属于自己的WEB应用。

设计原则

Tailwind CSS命名规则使得样式定义更加直观和易于理解,同时也提供了丰富的样式组合和变体选项,使得开发者可以更加灵活地定制和使用样式。Tailwind CSS 的命名规则遵循以下几个原则:

  • 使用组合类名:Tailwind CSS 使用组合类名来创建样式,而不是使用单独的类名来定义样式。这种方式使得样式的复用和组合更加灵活。
  • 使用驼峰命名法:Tailwind CSS 的类名使用驼峰命名法,例如 textCenter、bgRed-500。这种命名方式更加直观和易于理解。
  • 使用前缀缩写:Tailwind CSS 的类名使用前缀缩写来表示不同的样式属性。例如,bg 表示背景颜色,text 表示文字颜色,p 表示内边距,m 表示外边距等。
  • 使用后缀表示变体:Tailwind CSS 使用后缀来表示不同的变体,例如 -sm 表示小屏幕(移动设备),-md 表示中等屏幕(平板电脑),-lg 表示大屏幕(桌面电脑)等。
  • 使用数字表示大小:Tailwind CSS 使用数字来表示大小,例如 text-2xl 表示 2xl 大小的文字,p-4 表示 4 大小的内边距等。

常见的类名命名缩

Tailwind CSS 的类名命名缩写主要用于表示不同的样式属性和变体。Tailwind CSS 还提供了更多的类名命名缩写,可以根据具体的需求进行查阅 Tailwind CSS 官方文档。以下是一些常见的类名命名缩写及其说明:

外边距(Margin)

  • m(margin)
  • mt(margin-top)
  • mr(margin-right)
  • mb(margin-bottom)
  • ml(margin-left)

内边距(Padding)

  • p(padding)
  • pt(padding-top)
  • pr(padding-right)
  • pb(padding-bottom)
  • pl(padding-left)

宽度(Width)

  • w(width)。

高度(Height)

  • h(height)

文本(Text)

  • text(文字颜色)
  • font(字体)
  • text(大小)
  • leading(行间距)
  • tracking(字间距)

背景(Background)

  • bg(背景颜色)

边框(Border)

  • border(边框颜色)
  • border(宽度)
  • rounded(圆角)

定位(Position)

  • relative(相对定位)
  • absolute(绝对定位)

显示(Display)

  • block(块级显示)
  • inline(内联显示)
  • flex(弹性盒子)
  • grid(网格布局)

对齐(Alignment)

  • text(对齐方式)
  • justify(水平对齐方式)
  • items(垂直对齐方式)

响应式(Responsive)

  • sm(小屏幕)
  • md(中等屏幕)
  • lg(大屏幕)
  • xl(超大屏幕)
目录
相关文章
|
3月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
前端开发
网站变灰白css
本文介绍了如何通过CSS滤镜效果实现网站变为灰白色,具体方法是在HTML或BODY标签上应用`filter`属性,使用`progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)`和`-webkit-filter: grayscale(100%)`实现灰度效果。
29 0
|
3月前
|
前端开发
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
|
3月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
3月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
5月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
76 3
|
5月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
86 2
|
4月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
38 0