1、字体样式:
选择器 { font:font-style font-weight font-size / line-height font-family;}
例:p { font: italic bold 14px / 1 ' 宋体 ' ;}
注意:使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开
不需要的属性可以省略,但必须保留 font-size 和 font-family 属性,否则 font 属性不起作用。
2、结构(位置)伪类选择器(CSS3)
:first-child,选取第一个子元素
:last-child,选取最后一个元素
:nth-child(n),选取第 n 个元素,可以是 even 偶数, odd 奇数 , 如果用公式 n 从 0 开始 ,倍数:2n,3n
:nth-last-child(n),倒数,选取第 n 个元素
3、目标伪类选择器(:target)
:target 目标伪类选择器,可用于选取当前活动的目标元素,更改样式。
例如:
<style>
:target{ color:red;font-size:18px;}
</style>
<a href=" #movie ">演艺经历</a>
<a href=" #live ">个人生活</a>
<h3 id="movie">演艺经历</h3>
<h3 id="live">个人生活</h3>
4、文字设置
line-height:行高,一般设置为比字体大7~8个像素
text-indent:首行缩进,建议使用 em 作为设置单位,1 em 就是一个字的宽度
letter-spacing:字间距,设置汉字之间的间距
word-spacing:单词间距,设置英文单词之间的间距
writing-mode:文本在水平或垂直显示
horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr:垂直方向内内容从上到下,水平方向从左到右
sideways-rl:内容垂直方向从上到下排列
sideways-lr:内容垂直方向从下到上排列
word-break:自动换行,主要处理英文单词
break-all,允许在单词内换行
keep-all,只能在半角空格或连接符处换行
white-space:强制文本在一行显示内容
text-overflow:文字溢出,设置或检索是否使用一个省略标记(...),表示对象内容溢出
clip:文本溢出不显示省略标记(...)
ellipsis:文本溢出时,使用省略标记(...)
使用 text-overflow 属性,必须先强制在一行内显示,其次和 overflow:hidden 搭配使用
例: white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
字体颜色半透明(CSS3)
color:rgba(r,g,b,a) a 是 alpha 透明的意思 取值范围 0~1 之间。 例如:h1 { color:rgba( 255,0,0,0.3);}
文字阴影(CSS3)
可以实现凹凸文字 text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 。 例如:h1{ text-shadow:5px 11px 3px raba(0,0,0,0.5);}
5、选择器
交集选择器:div.p(找到两个选择器共同的元素) 并集选择器:div,p,h1 (找选择器指定的元素)
后代选择器:div p(儿子,孙子,重孙都找到) 子元素选择器:.nav > li (只找亲儿子)
6、伪元素选择器(CSS3)
::first-leeter,选择第一个字
::first-line,选择第一行
::selection,选中文字时,改变样式
::before,::after,在盒子div的内部前面或后面插入内容
例如:
div::before{ content:' 新增的内容 ' ;}
<div>正常内容显示区域</div>
7、背景固定(background-attachment)
scroll,默认,滚动
fixed,固定
简写方式:background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
例如: background:red url(img.png) repeat-y scroll center -10px ;
背景半透明(CSS3)
background:rgba(0,0,0,0.7);
背景缩放(CSS3)
background-size,设置背景图片的尺寸,在移动web开发中做屏幕适配应用非常广泛。
参数:常用 cover
1,设置长度单位(px)或百分比
2,设置为 cover 时,图片进行等比例缩放,图片一定会保证宽度和高度同时满足盒子的大小,溢出部分则会被隐藏。
3,设置为 contain 图片进行等比例缩放,如果图片的高度或宽度有一个和盒子一样大,就不在缩放,保证了图片的完整。
background-image:url(img.png);
background-size:300px ; // 自动适应比例
background-size:contain; // 自动缩放比例,但是盒子有部分会被裸露在外
background-size:cover; // 自动缩放比例,溢出部分隐藏
多背景(CSS3)
逗号分隔可以设置多背景,多背景图之间存在重叠关系,前面的背景图会覆盖后面的背景图,背景色通常定义在最后一组。
background:url(test.png) no-repeat left top, url(img.png) no-repeat bottom right pink;
8、字体图标