Web前端开发学习之路——初始CSS的基本功能(一)

Source

应用CSS样式表

行内声明

<!DOCTYPE html>
<html lang="en">
<head>
    <!--内行声明-->
    <meta charset="UTF-8">
    <title>应用css样式——行内声明</title>
</head>
<body>
<h1 style="color: #2b99ff;font-family: Broadway BT;font-weight: bold;border:1px
#336699 solid;">Do a thing quickly often means doint it badly.</h1>
<h1>Do a thing quickly often means doint it badly.</h1>
</body>
</html>

内嵌声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用css样式-内嵌声明</title>
    <style type="text/css">
        h1{
            color:Red;
            font-family:"Adobe Caslon Pro";
            font-weight: bold;
            border: 1px #336699 solid;
        }
        h2{
            color:#0000cc;
            font-family: ParkAvenue BT;
            font-weight: bold;
            border:3px #669900 DOUBLE;
        }
    </style>
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>

链接外部样式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接外部样式文件</title>
    <link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>

导入外部文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入外部样式文件</title>
    <style>
        @import "css1.css";
    </style>
</head>
<body>
<h1>Do a thing quickly often means doing it badly</h1>
<h2>Do a thing quickly often means doing it badly</h2>
</body>
</html>

外部文件示例,保存格式以css为后缀名

h1{
    color:Red;font-family: Bahnschrift;
    font-weight: bold;
    border:1px #336699 solid;
}
h2{
    color:#0000cc;
    font-family: "Palace Script MT";
    font-weight: bold;
    border: 3px #669900 DOUBLE;
}

//h1表示修饰<h1></h1>内的文字,h2同

认识CSS选择器

CSS选择器大致可以为5种:

  • 标记名称(div);
  • 全局选择器(*);
  • 类(class)选择器;
  • Id选择器;
  • 属性选择器;

以上举例如下:

div {font-size:16px;color:#FFFFFF;}
*{font-size:16px;color:#ff0000;}
<font class="class名称">

//.class属性名{样式规则;}
.txt{font-size:16px;color:$FFFFFF;font-weight:bold;}

下面是实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>叠层样式</title>
    <style type="text/css">
        .txt{
            font-size: 24px;
            color:red;
            font-family: "Adobe Gothic Std B";
            font-weight: bold;
            border: 1px #336699 solid;
        }
    </style>
</head>
<body>
<font class="txt">From savig comes having.</font><p></p>
<table width="400" height="50">
    <tr>
        <TD align="center" class="txt">富有来自节俭</TD>
    </tr>
</table>
</body>
</html>

对于上面的例子,<font>标记和<td>标记中都加入了class属性,并命名为txt,因此两者都会应用.txt选择器的样式

如果希望仅在某一种标记上应用Class选择器的样式,可以在Class选择器之前加上标记名称,格式如下

标记名称.class 属性名{样式规则;}

例如:

font.txt{font.size:16px;color:#FFFFFF;font-weight:bold}

比较以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠样式</title>
    <style type="text/css">
        font.txt{
            font-size:24px;
            color:red;
            font-family: "Baskerville Old Face";
            font-weight: bold;
            border: 1px #336699 solid;
        }
    </style>
</head>
<body>
<font class="txt">From saving comes having.</font>
<table width="400" height="50">
    <Tr>
        <TD align="center" class="txt">富有来自节俭</TD>
    </Tr>
</table>
</body>
</html>

上例中,虽然<font>标记与<td>标记都加入了class属性,并且命名为txt,但是因为CSS样式声明里已经指明font.txt选择器,因此只有<font>标记中的文字会受到影响。

 

ID选择器:要饮用ID选择器样式前,必须下载HTML标记中加入ID属性,举例来说,<font>标记要应用CSS样式,那么就在<font>标记中加入ID属性,如下所示:

<font id="id名称">
#id名称是自己命名的,不要使用HTML标记作为id名称,以免混淆,然后在CSS样式中加入ID选择器声明就可以了,声明格式如下:
#id属性名{样式规则;}
例如:
#font_bold{font-size:16px;color :#FFFFFF;font-weight=bold;}

下面是一个范例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠样式</title>
    <style type="text/css">
        #font_bold{
            font-size: 24px;
            font-family: "Adobe Gothic Std B";
            color: red;
            font-weight: bold;
            border:1px #336699 solid ;
        }
    </style>
</head>
<body>
<font id="font_bold">From Saving comes having</font>
</body>
</html>

 

属性选择器:属性选择器属于高级筛选,用来筛选标记中的属性,例如想要指定超链接标记<a>的背景颜色为黄色,但是仅应用于有target属性的组件,这是属性选择器就派上用场了,其使用方法如下:

a[target]{background-color:yellow;}

 

属性选择器还可以让我们筛选属性,筛选方式有6种,如下表所示。

[attribute="value"] 属性等于value
[attribute~="value"] 属性包含完整value
[attribute|="value"] 属性等于value或以value开头
[attribute^="value"] 属性开头有value
[attribute$="value"] 属性最后有value
[attribute*="value"] 属性中出现value

举例来说,下面语句中4个不同的组件都包含class属性。

<div class="first_cond">div 标记.</div>
<font class="secondtest">font标记.</font>
<a class="test">a标记.</a>
<p class="test word">p标记.</p>

当我们使用“~=”属性选择器进行筛选时,只会用到<a>和<p>标记

语法如下:

[class~="test"]{background:red;}

使用“*=”属性选择器进行筛选,则会用到<font>标记、<a>标记和<p>标记。语法如下:

[class*="test"]{background:red;}

反向选择:

如果整个文件中除了<p>标记,其标记都想应用同一种样式,这时候就可以采用反向选择“:not”,代码如下:

:not(p){color:red;}

这样,整个网页的字体都会采用红色,只有<p>标记不应用。


在下一篇当中,我会继续学习关于CSS的语法知识以及提供相关例子。