龙空技术网

五、css基础(二)

渚清山夜 173

前言:

当前同学们对“css强制一行”大体比较关切,小伙伴们都想要学习一些“css强制一行”的相关资讯。那么小编同时在网上收集了一些有关“css强制一行””的相关内容,希望我们能喜欢,大家一起来学习一下吧!

1.文本类属性

① 字体类型

语法:font-family:字体1,字体2,字体3...;

body{font-family: "宋体,楷书"; }

设置多个字体时,浏览器会优先识别字体1,找不到则识别字体2,都无法识别时,显示浏览器默认字体。

② 字体大小

语法:font-size:数值+单位;

p{font-size: 12px}

字体大小单位有px、em、rem、pt;浏览器默认大小为16px;字体大小一般设置为偶数值;谷歌浏览器识别最小字体为12px。

③ 字体加粗

p{font-weight: normal}

属性值:normal常规、bold加粗、bolder更粗、100-900数值

数值100-900字体加粗程度不同,其中100-500为常规字体,600-900为加粗字体。

④字体颜色

p{color:  颜色值;}

颜色值写法有三种:直接写颜色单词,如red;十六进制写法,如color:#000;rgb写法 ,color:rgb(0,0,0);

⑤字体倾斜

font-style: normal;font-style: italic;   倾斜

⑥复合写法

font:字体大小/行高 字体类型;

font: 12px/24px "宋体"

⑦行高

语法: 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{属性:属性值;}

 p:hover{color:red;}

超链接a标签的四个状态:

a) a:link 超链接的初始状态,链接没有被访问过时的状态

b) a:visited 链接访问过后的状态

c) a:hover 鼠标悬停在超链接上的状态(鼠标滑过)

d) a:active 超链接被激活时的状态(鼠标按下)

标签: #css强制一行