首页 > 代码库 > HTML-CSS相关(2)

HTML-CSS相关(2)

【CSS常用文本属性】
1,字体、字号类:
① font-weight:字体粗细。 bold-加粗 noemal-正常 lighter-细体
也可以使用100-900数值,400表示normal,700表示bold。
② font-style: 字体样式。italic表示倾斜,normal-正常
③ font-size: 字号.可以写px单位,也可以写%
200%表示浏览器默认大小(16px)的两倍=32px。
④ font-family:字体系列(字体族),
>>>可以直接写字体名,也可以写字体系列名,
>>>常用字体系列有 :serif-衬线体 sans-serif 非衬线体;
>>>font-family可以接受多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体一次向后使用,
通常,最后一个放字体系列名。
font-family: "微软雅黑",sans-serif;
⑤ font缩写形式:
>>>顺序必须是 style weight font-size/line-height font-family
>>>不同属性之间用空格分隔
>>>size/line-height 必须一组,斜线分隔。
>>>font-family多个字体之间,用逗号分隔
eg:font:bold italic 32px/50px "微软雅黑";
2,字体颜色
① color:字体颜色。可以是单词、十六进制,RGB等。
② opcity: 透明度。可选值0-1。
[opcity和rgba的区别]
>>>rgba本身可以设置颜色,而opcity必须配合其他颜色属性来用;
>>>rgba仅仅是让当前元素设置的颜色透明;
而opcity,会让当前元素里面的而所有文字,背景,子元素都透明。
3,行距、对齐类
① line-height:行高。可以写px单位、可以直接写数字(表示默认行距的几倍)、也可以写百分比(默认行距的百分比)
>>>行高重要作用:让单行文字在div中垂直居中,设置行高等于div的高度,即可设置让单行文字垂直居中。
② text-align: 设置区域内的行级元素水平对齐方式。left center right
③ letter-spacing::字符间距。字与字之间的距离。
④ text-decoration:文本修饰
underline-下划线 overline-上划线 、line-through-删除线、none.
⑤ overflow:设置超出区域文字显示方式。
使用overflow样式可以设置文字超出区域的显示方式
>>> overflow:hidden;超出区域的文字隐藏不显示
>>> overflow:scroll;无论文字多少都会显示水平垂直滚动条
>>> overflow:auto;自动,文字多显示滚动条,文字少不显示滚动条。
>>>overflow-y; overflow-x;单独修改两个方向的滚动条
overflow-y:auto; 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:文字描边
-webkit-:表示只有webkit内核的浏览器生效,常见的有chrome、safari(苹果浏览器)
⑩ text-shadow:文字阴影有四个属性值,空格分隔。
>>>水平阴影距离 正数表示阴影右移,负数左移
>>>垂直阴影距离 正数表示阴影下移,负数上移
>>>阴影模糊距离 0表示阴影一点不模糊
>>>阴影的颜色

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

负边距

【1、实现块级元素在父容器中水平垂直居中】
① 设置子元素为定位元素
left: 50%; margin-left: -width/2px;
top: 50%; margin-top: -height/2px;

【2、使用负边距增大元素的宽度】
① 子容器的宽度不指定,指指定高度,或者由内容撑开高度
② margin:0px -50px; 可以使左右两边均超出父容器50px

 

HTML-CSS相关(2)