css基础（二）

一、元素内容的字体属性

1、font-family 字体名称，例如：宋体，新罗马字体等

注意：1、不能使用偏僻的字体，要使用安全字体，如：arial;verdana;times new roman 及宋体等；

2、可以同时制定多个字体，用逗号分隔，如果第一个字体不存在，浏览器可以使用后面的字体；

3、如果字体有许多单词组成，使用双引号组合；

body {font-family:verdana,"Courier New",Symbol;}

2、font-style 字体倾斜属性：normal italic oblique

3、font-variant 字体变体属性：normal small-caps

注：small-caps 属性使用后，元素中的小写字母看起来比正常的大写字母小一些。

4、font-weight 字重（加粗）属性 normal bold bolder lighter 100 -900

注：1、400代表normal 700代表bold bolder/lighter 表示字体的字重比父级元素高或低一级

2、有些字体的字重值为300-700。

p {font-style:normal;}

h1 {font-style:700;}

5、font-size 字体大小属性：绝对大小/相对大小/长度/百分比

关键字：绝对大小：xx-small / x-small / small / large / x-large / xx-large

相对大小：larger / smaller

p {font-size:20px;}

blockquote {font-size:larger;}

em {font-size:150%;}

font属性快捷方式：

P {font：xxx xxx xxx xxx ;}书写顺序是：font-style font-variant font-weight font-size;

二、元素内容的文本属性

1、首行缩进 text-indent 属性：length percentage

p {text-indent:2px;} 段落P首行缩进2px;

2、文本对齐方式 text-align 属性：left right center

3、文本修饰方式 text-decoration 属性：none underline overline line-through blink(闪烁)

4、本阴影特效 text-shadow 属性：none color

p {text-shadow:red;} 段落P 文本阴影特效设置为红色

5、行高 text-height 属性：数字（字体大小的倍数）长度百分比 normal

6、字间距 letter-spacing 属性： normal length auto

blockquote {letter-spacing:1px;}

7、词间距 word-spacing 属性：normal length

h1 {word-spacing:1px;}

8、文本中字母大小写 text-transform 属性：capitalize(文本每句句首字母变为大写) uppercase（文本全部字母变成大写） lowercase（文本全部字母变为小写） none

9、空白显示 white-space 属性： normal pre nowrap

pre {white-space:pre;}

三、元素内容的字体颜色，背景

1、color：设定元素的前景色；取值：十六进制值，rgb()函数或CSS承认的颜色名

2、background-color:设定背景色，初始值为透明；取值：同上或者transparent

3、background-image：设定背景图案；取值：图片的URL地址或者none

4、background-repeat：背景图像是否及如何铺排取值：repeat no-repeat repeat-x repeat-y

5、background-attachment:背景图像是随对象内容滚动还是固定取值：scroll fixed

6、background-position:用于指定图片的位置取值：百分比 length top center bottom left center right

四、列表格式 ( 列表属性用于设置网页中列表的格式，例如可以设置图像作为项目符号)

list-style-type 属性可以用来设置项目符号和编号的样式取值：

disc: 默认值，实心黑点

circle：空心圆圈

square：方形黑块

decimal：十进制数（1.2.3.4等）

lower-roman：小写罗马数字（i ii等）

upper-roman：大写罗马数字

lower-alpha ：小写字母

upper-alpha：大写字母

none

例如：<head><style>

ol {list-style-type:upper-alpha;} ol是有序列表

</style></head>

注意：还可以利用该属性将列表前面的符号换成图片，属性值可以是图片的URL地址，

如果同时制定了list-style-type 和 list-style-image，则只有当浏览器不能显示图片作为项目符号是，list-style-type 才能生效。

五、css算法

1、所以的ID选择器，权值为100；

2、所以的Class 选择器，权值为10；

3、所以的标签（元素）选择器，权值为1；

4、所以的伪类，权值为1；

！important 优先级最高。{css中样式的继承属性有Color font-size}

回答8.25 ps图片最后的提问：如何将初始单位改为像素：

打开ps软件，编辑----首选项----单位与标尺，修改即可。

巴特西

css基础（二）

最新文章

热门文章