当前位置:首页 > 前端技术 > css代码缩写、颜色值与长度值

css代码缩写、颜色值与长度值

2022年11月09日 08:58:31前端技术6

一、盒模型代码缩写

盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同,如下面代码:

margin:10px 10px 10px 10px;

可缩写为:

margin:10px;

2、如果top和bottom值相同、left和 right的值相同,如下面代码:

margin:10px 20px 10px 20px;

可缩写为:

margin:10px 20px;

3、如果left和right的值相同,如下面代码:

margin:10px 20px 30px 20px;

可缩写为:

margin:10px 20px 30px;

注意:padding、border的缩写方法和margin是一致的。

二、颜色值缩写

关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

例子1:

p{color:#000000;}

可以缩写为:

p{color: #000;}

例子2:

p{color: #336699;}

可以缩写为:

p{color: #369;}

三、字体缩写

下面是给网页设置字体的代码:

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句:

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意:

1、使用这一简写方式至少要指定 font-size 和 font-family 属性,其他的属性自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

四、颜色值

 

1、英文命令颜色

 

前面几个小节中经常用到的就是这种设置方法:

 

p{color:red;}

 

2、RGB颜色

 

这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

 

p{color:rgb(133,45,200);}

 

每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:

 

p{color:rgb(20%,33%,25%);}

 

3、十六进制颜色

 

这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。

 

p{color:#00ffff;}

css代码缩写、颜色值与长度值 _ JavaClub全栈架构师技术笔记

 

五、长度值

1、像素

像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

2、em

就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。

当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

3、百分比

p{font-size:12px;line-height:130%}

设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

 

 

作者:Chloe1006
来源链接:https://www.cnblogs.com/Kevin-kk/p/6623086.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68758.html

标签: css
分享给朋友:

“css代码缩写、颜色值与长度值” 的相关文章

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

css font属性详解

一、字体属性         1、字体             属性:font-family     ...

vue项目之CSS样式

vue项目中CSS样式 初始化页面样式 注意: element-UI中提供的组件,组件名称就是类名 .el-header{ } 页面单独的样式,从外部引入css...

Jquery+css实现图片无缝滚动轮播

Jquery+css实现图片无缝滚动轮播

Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简。为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享一下 最终实现界面如下: 页面加载时,自动轮播,轮播鼠标悬停在整个...

css实现li标签不可点击

css实现li标签不可点击,代码如下: style="pointer-events: none;" 作者:不平凡中的平凡 来源链接:https://blog.csdn.net/weixin_40667880/article...

博客园 页面定制CSS代码

博客园 页面定制CSS代码

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/...

CSS-标签选择器

CSS-标签选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style...

博客园:CSS & HTML

博客园:CSS & HTML

  [ 显示头像 & 去掉广告 &  禁止界面上,选中和复制内容!]   ⚠ ADD:增加、禁止复制功能!   作用:在侧栏中,显示头像 & 去掉文章最下边的广告! 做法:自定...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。