码迷,mamicode.com
首页 > Web开发 > 详细

css基础语法二(常用文本与背景属性)

时间:2017-08-20 22:32:34      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:ati   隐藏   多个   内核   ext   十六进制   之间   height   宽度   

【CSS常用文本属性】
 1、 字体、字号类:
① font-weight: 字体粗细。 bold-加粗、normal-正常、lighter-细体
 也可以使用100-900数值,400表示normal,700表示bold
 ② font-style: 字体样式。 italic-倾斜、normal-正常
 ③ font-size: 字号。 可以写px单位,也可以写%
 200%表示浏览器默认大小(16px)的两倍=32px
 ④ font-family: 字体系列(字体族)。
 >>> 可以直接写字体名,也可以写字体系列名。
 >>> 常用字体系列:serif-衬线体 sans-serif-非衬线体;
 >>> font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。 通常,最后一个值放字体系列名;
 eg: font-family: "黑体","微软雅黑",sans-serif; ⑤ font缩写形式:

 >>> 顺序必须是:
 font-weight font-style font-size/line-height font-family
 >>> 不同属性之间,用空格分隔;
 >>> font-size/line-height必须一组,用/分隔;
 >>> font-family多个字体之间,用逗号分隔
 >>> eg: font: bold italic 32px/50px "微软雅黑",serif;
 2、 字体颜色
 ① color: 字体颜色 可以使单词、十六进制、RGB等
 ② opacity: 透明度,可选值0-1
 [opacity和RGBA的区别]
 >>> RGBA本身可以设置颜色,而opacity必须配合其他颜色属性来用;
 >>> rgba仅仅是让当前元素设置的颜色透明;
 而opacity,会让当前元素里面的所有文字、背景、子元素都透明;
 3、行距、对齐、其他类
① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
 >>> 行高重要作用: 让单行文字在div中垂直居中?
 设置行高等于div的高度,即可让单行文字垂直居中。
 ② text-align:设置区域内的行级元素水平对齐方式left/center/right
 ③ letter-spacing: 字符间距,字与字之间的距离
 ④ text-decoration: 文本修饰;
underline-下划线、overline-上划线、line-through-删除线、none
 ⑤ overflow: 设置超出区域文字的显示方式。
 >>> overflow: hidden; 超出区域的文字隐藏不显示;
>>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
>>> overflow: auto; 自动。文字多显示滚动条,文字少,不显示滚动条。
 >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
 overflow-y: scroll; overflow-x: hidden;
 ⑥ text-overflow:设置行末多余文字的显示方式;
>>> clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
>>> 显示省略号,需要配合white-space: nowrap;使用
>>> 【重点】 设置行末显示省略号(三行代码,缺一不可)
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 ⑦ white-space: nowrap; 设置中文行末,不断行显示
 ⑧ text-indent: 首行缩进。
 ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
 -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
 ⑩ text-shadow: 文字阴影,有四个属性值,空格分隔;
>>> 水平阴影距离,正数表示阴影右移,负数左移;
 >>> 垂直阴影距离,正数表示阴影下移,负数上移。

 >>> 阴影模糊距离, 0表示阴影一点不模糊;

 >>> 阴影的颜色;
 >>> eg:text-shadow: 20px -10px 2px blue;

 【CSS常用背景属性】

 1、 background-color: 背景色
 2、 background-image: 背景图。使用url("")选择背景图片。背景图和背景色同时存在时,背景图覆盖背景色。
 3、 background-repeat: 背景图的重复方式。
 no-repeat-不平铺、repeat-平铺、repeat-x-x轴平铺、 repeat-y-y轴平铺
 4、 background-size: 背景图的大小
 [指定宽度高度]
 >>> 宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
 >>> 当写两个属性时,分别表示宽度、高度;
 当写一个属性时,表示宽度,高度将会等比缩放;
[其他属性值]
 >>> contain: 图片等比缩放,直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
>>> cover: 图片等比缩放,直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)
 5、 background-position: 背景图偏移量
 >>> 指定位置: left/center/right top/center/bottom
 当,只写一个值时 ,另一个默认居中。
 >>> 指定坐标: 两个属性分别表示 :水平位移 垂直位移
 ① 坐标的值,可以是px单位,也可以是百分数 ② 当写px单位时:

水平方向:正数右移 负数左移 ; 垂直方向: 正数下移 负数上移;
 (左负右正 上负下正)
 ③ 当写%百分数时:
 一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。 eg:background-position:30%; 水平方向去掉图片宽度,剩余区域3:7分。

css基础语法二(常用文本与背景属性)

标签:ati   隐藏   多个   内核   ext   十六进制   之间   height   宽度   

原文地址:http://www.cnblogs.com/liuqiang1109/p/7401419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!