常用CSS缩写语法总结

下面是“常用CSS缩写语法总结”的完整攻略:

常用CSS缩写语法总结

在编写 CSS 样式时,经常会使用到缩写语法,简化书写,并且提高了代码的可读性。本文总结了常用的 CSS 缩写语法,帮助大家更快速地编写 CSS 样式。

缩写语法说明

基本缩写语法

基本缩写语法用于设置一个样式的属性。基本语法的形式为:

属性名称:属性值;

简写缩写语法

简写缩写语法用于同时设置多个样式属性。简写语法的形式为:

属性1:属性值1;
属性2:属性值2;
...

值的简写语法

值的简写语法允许在一个属性中设置多个值。值的简写语法的形式为:

属性名称:值1 值2 值3;

常用的CSS缩写语法

基本缩写语法

  1. 字体样式缩写
font: font-style font-variant font-weight font-size/line-height font-family;

示例:

font: italic small-caps bold 16px/1.5 sans-serif;
  1. 边框缩写
border: border-width border-style border-color;

示例:

border: 1px dotted #ccc;
  1. 内外边距缩写
margin: 上 右 下 左;
padding: 上 右 下 左;

示例:

margin: 5px 10px 15px 20px;
padding: 5px 10px;

简写缩写语法

  1. 同时设置上下左右内外边距
margin: 上下 左右;
padding: 上下 左右;

示例:

margin: 5px 10px;
padding: 5px 10px;
  1. 边框缩写
border: border-width border-style border-color;

示例:

border: 1px dotted #ccc;
  1. 背景缩写
background: 背景颜色 背景图片地址 背景图片重复方式 水平偏移量 垂直偏移量;

示例:

background: #f1f1f1 url(bg.gif) repeat-x 0 0;

值的简写语法

  1. 边框半径
border-radius: 上左 下右;

示例:

border-radius: 5px 10px;
  1. 盒阴影
box-shadow: 水平偏移量 垂直偏移量 模糊程度 阴影大小 阴影颜色;

示例:

box-shadow: 2px 2px 5px 2px #666;

以上就是常用 CSS 缩写语法的总结了。使用这些缩写语法可以方便地编写 CSS 样式,提高工作效率。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:常用CSS缩写语法总结 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • JS 仿腾讯发表微博的效果代码

    首先讲解一下JS仿腾讯发表微博的效果代码需要的知识点: 获取DOM元素及其属性值。使用document.getElementById()或document.querySelector()获取DOM元素,通过元素对象的value属性获取输入框的值,通过元素对象的innerHTML属性改变提示信息的内容。 利用按钮添加点击事件。通过给按钮元素对象绑定onclic…

    css 2023年6月10日
    00
  • 将一个DIV旋转的某一角度即90度/180度/270度及放大等问题

    如果想要将一个 div 元素旋转某一角度以及放大,可以使用 CSS3 中的 transform 属性来实现。下面是具体的攻略: 基本设置 首先,需要设置 div 的起始状态,并且设置 transform-origin 属性为 center。transform-origin 属性用于设置变形的起点,这里设置为以 div 的中心点为起点。 div { width…

    css 2023年6月11日
    00
  • Dreamweaver中div标签怎么设置左右并排?

    在 Dreamweaver 中,我们可以使用 CSS 来设置 div 标签左右并排。下面是一个完整攻略,包含了如何使用 CSS 来设置 div 标签左右并排的过程和两个示例说明。 Dreamweaver 中 div 标签左右并排的设置 1. 使用 float 属性 我们可以使用 float 属性来设置 div 标签左右并排。下面是一个示例: <div …

    css 2023年5月18日
    00
  • 30分钟快速掌握Bootstrap框架

    30分钟快速掌握Bootstrap框架攻略 Bootstrap是一款开源的前端框架,它提供了许多响应式设计、现成的UI组件、JavaScript插件等功能,使得我们能够快速地构建具有响应式特性的网站或Web应用程序。接下来我们将讲解如何在短短的30分钟内快速掌握Bootstrap框架。 步骤1:引入Bootstrap文件 首先,我们需要将Bootstrap的…

    css 2023年6月10日
    00
  • js+css实现select的美化效果

    下面是关于如何实现“js+css实现select的美化效果”的攻略: 1. 实现select基本的美化效果 1.1 原理分析 实现select的美化效果,需要对select进行样式重构。将select的默认样式改为我们自定义的样式,并且通过一定的交互方式和js代码来实现与用户的交互效果。 1.2 实现步骤 对select进行样式重构。 通过css代码对sel…

    css 2023年6月9日
    00
  • css将div层固定显示在页面底部不随滚动条滚动

    下面是详细讲解“css将div层固定显示在页面底部不随滚动条滚动”的完整攻略: 使用CSS的position属性 首先,在HTML文件中创建一个div标签,用于放置需要固定在页面底部的内容: <div class="footer"> <!– 这里是需要固定在页面底部的内容 –> </div> 然后,…

    css 2023年6月10日
    00
  • CSS教程:网页图片垂直居中的使用技巧

    下面我就来详细讲解“CSS教程:网页图片垂直居中的使用技巧”的完整攻略。 1. 引言 在网页设计中,图片是非常重要的元素之一,而图片的垂直居中也是设计师们经常面对的挑战。在本教程中,我们将会详细介绍使用CSS实现图片垂直居中的技巧。 2. 方法一:使用table-cell和vertical-align属性 首先,我们可以使用display: table-ce…

    css 2023年6月10日
    00
  • 深入解析CSS的Sass框架中混合宏的使用

    深入解析CSS的Sass框架中混合宏的使用 什么是Sass框架? Sass(Syntactically Awesome StyleShets)是一种CSS的预处理语言,它增加了许多CSS没有的特性,例如嵌套选择器,变量,Mixin宏等。Sass可以帮助开发者简化CSS的编码和维护,并且提高CSS代码的重用性。 Sass中Mixin宏的介绍 Mixin宏是Sa…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部