CSS

Posted 2020-07-03

CSS通常译为层叠样式表或级联样式表。使用层叠样式可以更有效的控制网页的外观，并扩充精确设置网页元素位置和创建特殊效果的能力。可以将内容与表现形式分开。

 

一．创建和应用CSS样式

1.1创建和应用类样式

在html 文档的头文件部分，可以<style>标签用于指定嵌入文档的样式表，并在<style>与</style>标签之间定义CSS 类样式。

 

<style type=”text/css”>

<!—

[*|标签].类名称{属性：值;属性：值;……}

[*|标签].类名称{属性：值;属性：值;……}

………………

         à

         </style>

*号表示CSS样式可以应用与所有包含class属性的HTML标签中。

使用某个标签名称表示该CSS类样式只能用于该标签所包含的内容。

 

1.2应用HTML标签样式

         <style type=”text/css”>

         <!—

         选择符1{属性:值;属性：值;……}

         选择符2{属性:值;属性:值;…….}

         à

         </style>

例:           p{font-family:”黑体”;font-size:9px;}

 

1.3创建高级样式

1组合选择符

<style type=”text/css”>

         <!—

         选择符1，选择符2，…{属性:值;属性：值;……}

         à

         </style>

2情景选择符

         加入希望所有出现在段落中的斜体字均以蓝色显示，就需要用 p  em 作为选择符，其中 p 成为情景选择符。

         <style type=”text/css”>

         <!—

         情景标签 选择符{属性:值;属性：值;……}

         à

         </style>

3id选择符

         <style type=”text/css”>

         <!—

         [标签]#类选择符名称{属性：值;属性：值;….}

         ………

         à

         </style>

         其中类选择符名称由用户自己指定。通常在网页正文中可以通过id属性将上述样式应用与按钮。

4伪类选择符

选择符：伪类{属性:值;属性:值;…..}

通过使用伪类选择符定义网页中超链接的外观。此时使用 a 作为选择符，伪类名称包括link,visited,hover,active 分别表示未访问的超链接，以访问的超链接，鼠标指针指向的超链接以及活动的超链接。

 

二．设置CSS属性

 

2.1常用字体属性

1.  font-family: name

2.  font-size: absolute-size|relative-size|length

3.  color: color

4.  font-style: normal|italic|oblique

5.  line-height:normal|length

6.  font-weight: normal|bold|bolder|lighter|number

7.  text-transform: uppercase|lowercase|capitalize|none

8.  font-variant:normal|small-caps

用于设置对象中的文本是否为小型大写字母。

9.  text-decoration:underline|overline|line-throungh|blink|none

10. font:font-style||font-variant||font-weight||font-size||line-height||font-familly

 

2.2 设置背景属性

      2.2.1 与背景设置相关的CSS属性

1  background-color: color|transparent

         设置对象的背景颜色

2  background-image: url(URL) | nonr

         设置对象的背景图像

3  background-repeat: repeat | no-repeat |repeat-x |repeat-y

         设置图像如何被重复

4  background-attachment: scroll | fixed

         用于设置背景图像是随对象滚动还是固定的

5  backgroud-position : length || length

   background-positon : position || position

         用于设定图像的最初位置

6  background: background-color || background-image || background-repeat||

                                     background-attachment || background-positon

                   复合属性，用于设置对象的背景样式

 

2.2.2区块属性

1  word-spacing : normal | length

                   设置英文单词之间的距离

2  letter-spacing : normal | length

                   设置文字之间的属性

3  text-align: left | center | right | justify

                   设置水平对齐方式

4  text-indent: length

                   设置对象中文本的缩进量

5  white-space: normal | pre | nowrap

                   如何处理元素内的空格

6  display: block | inline | list-item |none

                   设置如何处理元素内的换行

 

2.2.3 边框属性

1   border:  border-width || border-style || border-color

         复合属性

2   border-color: color

设置边框四周的颜色，一个参数用于四周，二个参数第一个用于上下第二个用于左右，三个参数第一个上第二个左右第三个下，四个参数分别作用与 上à右à下à左。

3   border-style:  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

4   border-width: medium | thin | thick | length

 

分别设置上下左右边框

Border-top    border-top-color  border-top-style  border-top-width

Border-left   border-bottom  border-right

 

其中最重要的一部分Div并没有介绍，有空整理一下。