首页 > 代码库 > css基础(二)

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基础(二)