HTML+CSS学习笔记 (八)
来源:互联网 发布:大芒果论坛新域名 编辑:程序博客网 时间:2024/04/28 15:50
CSS代码缩写
盒模型代码简写:
定义三个值:1(上)2(左右)3(下)
定义两个值:1(上下) 2(左右)
注意:padding、border的缩写方法和margin是一致的。
颜色缩写:
当设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
CSS中的颜色表示可以分为两种:
文字表示:
color:red
RGB表示(red,green,blue):
a color:rgb(100%,50%,50%) [范围是0-100%]
b color:rgb(255,1,15) [范围是0-255]
c color:#ccc [这个是16进制表示法,可以缩写]
字体缩写:
例如: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 中间要加入“/”斜扛。一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:body{ font:12px/1.5em "宋体",sans-serif;}只是有字号、行间距、中文字体、英文字体设置。
长度值
1、像素:指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用的与显示器的实际像素值有关。
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 为基础**。如下代码:html:<p>以这个<span>例子</span>为例。</p>css: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)。
0 0
- HTML+CSS学习笔记 (八)
- 《HTML+CSS基础课程》学习笔记八
- HTML学习笔记八
- HTML学习笔记B八
- HTML/CSS学习笔记
- HTML CSS学习笔记
- HTML+CSS学习笔记
- HTML + CSS学习笔记
- HTML&CSS学习笔记
- HTML&CSS学习笔记
- HTML、CSS学习笔记
- html&css学习笔记
- HTML+CSS学习笔记
- HTML/CSS学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- web中各种命令注入的检测和利用一
- 关于android 定时器的定时问题
- 几何校正,正射校正,影像配准,辐射定标,辐射校正,大气校正,地形校正概念详解
- Kotlin语法(十二)-泛型(Generics)
- android 移植 ffmpeg (二) 测试用例
- HTML+CSS学习笔记 (八)
- cropbox + springmvc +ajax 裁剪上传
- 期货交易制度与合约
- 模拟实现auto_ptr,scoped_ptr,shardptr
- poj 3579 二分
- 互联网+工业
- C++基础——深拷贝&浅拷贝
- [JAVA]POI各Jar包的作用
- 用博客这种方式分享学习生活中的收获