CSS编程概述

最新推荐文章于 2024-08-21 15:33:15 发布

shuangshuang37278752

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量742

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/shuangshuang37278752/article/details/8764918

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS编程概述

1.CSS概述

CSS是一种用来装饰HTML的标记集合

CSS样式规则组成为“选择符 {属性：值}”，单一选择符的符合样式声明应该分号隔开，如“选择符 {属性1：值1；属性2：值2}”.

例：

<HTML>
<HEAD>
           <STYLE TYPE="TEXT/CSS">
                    H1 { FONT-SIZE: X-LARGE; COLOR: RED }
                    H2 { FONT-SIZE: LARGE; COLOR: BLUE }
           </STYLE>
</HEAD>
<BODY>
           <H1>中国，我的祖国！H1显示的</H1>
           <H2>中国，我的祖国！H2显示的</H2>
</BODY>
</HTML>

在HEAD标记中加上<STYLE TYPE="TEXT/CSS">标记，告诉浏览器内容是CSS样式表。

2.加载CSS样式的方式

2.1. HEAD内引用

这种方式只要在HEAD标记上加上STYLE标记就可以了

例：

<HTML>
    <HEAD>
                   <STYLE TYPE="TEXT/CSS">
                      H1 {COLOR:GREEN;FONT-SIZE:37PX;}
                      P {BACKGROUND:YELLOW;}
                   </STYLE>
    </HEAD>
    <BODY>
                   <H1>北京大学，清华大学</H1>
                   <P>南京大学，复旦大学</P>
    </BODY>
</HTML>

2.2. BODY内引用

在BODY内实现的方法是在HTML标记中引用，只要将定义在STYLE标记中的值拿到对应的标记中就可以了

例：

<HTML>
    <BODY>
          <H1 STYLE="COLOR:GREEN;FONT-SIZE:37PX;">北京大学，清华大学</H1>
          <P STYLE="BACKGROUND:YELLOW;">南京大学，复旦大学</P>
    </BODY>
</HTML>

2.3. 文件外引用

CSS作为一个外部文件引入的方式有两种，一种是做链接，另一种是导入。首先将STYLE标记中的内容存为一个文件，如程序mystyle.css所示.

H1 {COLOR:GREEN;FONT-SIZE:37PX;}

P {BACKGROUND:YELLOW;}

第一种方法是做链接，如下所示：

这里定义了样式，在HTML文件中采用LINK标记将该样式表链接进入该HTML文件，如下所示：

<HTML>
    <HEAD>
                   <LINK REL=STYLESHEET  HREF="mystyle.css"  TYPE="TEXT/CSS">
    </HEAD>
    <BODY>
                   <H1>北京大学，清华大学</H1>
                   <P>南京大学，复旦大学</P>
    </BODY>
</HTML>

第二种方法是导入CSS文件，如下所示：

<HTML>
    <HEAD>
                   <STYLE TYPE="TEXT/CSS">
                             @IMPORT URL(MYSTYLE.CSS);
                   </STYLE>
</HEAD>
    <BODY>
                   <H1>北京大学，清华大学</H1>
                   <P>南京大学，复旦大学</P>
    </BODY>
</HTML>

使用@IMPORT关键字将外部文件导入，注意@IMPORT必须写在STYLE标记中。

3.CSS与标记对应的方式

3.1. 标记选择符

任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择符引入的，例如：P {BACKGROUND:YELLOW;}，这里用的标记选择符是P。

3.2. 类选择符

在STYLE标记中定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式。

例：

<HTML>
<HEAD>
       <STYLE TYPE="TEXT/CSS">
                .LITTLERED{COLOR:RED;FONT-SIZE:18px}
                .LITTLEGREEN{COLOR:GREEN;FONT-SIZE:18px}   
       </STYLE>
</HEAD>
       <BODY>
                <DIV CLASS="LITTLERED">这是红色，而且比较小！</DIV>
                <SPAN CLASS="LITTLEGREEN">这是绿色，而且比较小！</SPAN>
       </BODY>
</HTML>

3.3. ID选择符

定义ID选择符时，在样式名之前加“#名字”，引用的时候使用“ID=名字”。

例：

<HTML>
         <HEAD>
                   <STYLE TYPE="TEXT/CSS">
                            #SZG { COLOR:RED }
                   </STYLE>
         </HEAD>
         <BODY>
                   <P ID=SZG>这是ID选择符号！</P>
         </BODY>
</HTML>

4.定义超级链接样式

可以指定A标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接(LINK)、已访问链接(Visited)、鼠标移动过(Hover)。可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接的都有下划线，可以利用“TEXT-DECORATION：NONE”将超级链接的下划线去掉。

例：

<HTML>
<HEAD>
         <STYLE TYPE="TEXT/CSS">
         A:LINK{COLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONE}
         A:VISITED{COLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONE}
         A:HOVER{COLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE}
         </STYLE>
</HEAD>
         <BODY>
                   <A HREF="#">这是超级链接</A>
         </BODY>
</HTML>