1.文本类属性
① 字体类型
语法:font-family:字体1,字体2,字体3...
设置多个字体时,浏览器会优先识别字体1,找不到则识别字体2,都无法识别时,显示浏览器默认字体。
② 字体大小
语法:font-size:数值+单位
字体大小单位有px、em、rem、pt;浏览器默认大小为16px;字体大小一般设置为偶数值;谷歌浏览器识别最小字体为12px。
③ 字体加粗
属性值:normal常规、bold加粗、bolder更粗、100-900数值
数值100-900字体加粗程度不同,其中100-500为常规字体,600-900为加粗字体。
④字体颜色
颜色值写法有三种:直接写颜色单词,如red;十六进制写法,如color:#000;rgb写法 ,color:rgb(0,0,0)
⑤字体倾斜
⑥复合写法
font:字体大小/行高 字体类型
⑦行高
语法: line-height:数值+单位
数值不能为负值
⑧水平对齐方式
语法:text-align:left左对齐
text-align:center 居中
text-align:right 右对齐
text-align:justify 两端对齐,只对英文起作用
⑨文本修饰
text-decoration:none去掉文本修饰,可去掉超链接(对a标签使用)的下划线
text-decoration:underline下划线
text-decoration:overline上划线
text-decoration:line-through删除线
文本缩进
text-indent:数值+单位
数值为正向后缩进,负值向前缩进
强制在一行显示
white-space:nowrap
长单词换行
word-warp:break-word
2.背景类属性
语法:background-color:颜色值
属性值同字体颜色属性值相同用法
语法:background-image:url(图片路径)
语法:background-position:left;
水平方向:left、center、right
垂直方向:top、center、bottom
属性值为数值时,水平方向向右为正,向左为负,垂直方向向下为正,向上为负。水平和垂直方向都居中时可写background-position:center
background-attachment:scroll
属性值:scroll 默认值;fixed 固定
当容器出现滚动条时,背景图固定不滚动,可设置为fixed。
语法:background-repeat:repeat
属性值:repeat平铺;no-repeat;repeat-x横向平铺;repeat-y纵向平铺。
background:背景图 背景平铺 背景位置
background:url(13211.jpg) no-repeat right bottom
3.列表属性
语法:list-style-type:disc
属性值:disc实心圆;circle空心圆;square实心方块;decimal数字;none去除列表符号。
4.伪类选择器
语法: 选择符:hover{属性:属性值}
超链接a标签的四个状态:
a) a:link 超链接的初始状态,链接没有被访问过时的状态
b) a:visited 链接访问过后的状态
c) a:hover 鼠标悬停在超链接上的状态(鼠标滑过)
d) a:active 超链接被激活时的状态(鼠标按下)
ch应该是一个鲜为人知的计算单位。
ch是一个相对于数字0的大小。
1ch 就是数字 0 的宽度。
比如定义一个3ch的宽度,那么久只能装下3个0。
重复一次:1ch 等于一个 0 的 宽度!宽度!宽度!
注意,是0的宽度,和0的高度无关。
比如
可以看到,是一个正方形,因为ch只等于0的宽度。
ch还有另一个规则:
ch 是一个相对单位,所谓相对,意思是 ch 会根据当前容器的 ****font-size**** 变化而变化。
如果字体不是等宽字体,这时的ch看起来就不止是一个英文字母的宽度了。
比如
可以看到,16个小写L,并没有超出8ch。
同时,如果容器中的内容是中英文结合的话,用ch做长度单也不是那么好使。
上面用到的几个CSS属性,是用来控制如果内容超出容器,就用省略号显示超出的部分。 【CSS】省略号
ch一般很少用得上,因为使用规则可能稍微有点复杂,而且通常需要 js 配合使用。
一般都会用em来代替ch~
可以;px: 基于像素的单位。像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的。
em : 一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。
比如
<div style="font-size:12px">
<span style="fontsize:2em">这里的字是24px</span>
</div>
如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的。
pt: 印刷业上常使用的单位,磅的意思。一般也用于页面打印排版。