Web前端开发学习之路——初识CSS的基本功能（一）

最新推荐文章于 2024-06-17 20:59:17 发布

宇直豪

最新推荐文章于 2024-06-17 20:59:17 发布

阅读量1.3k

点赞数 3

分类专栏：前端开发文章标签：前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88558646

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

应用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>

对于上面的例子，标记和<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>

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

ID选择器：要饮用ID选择器样式前，必须下载HTML标记中加入ID属性，举例来说，标记要应用CSS样式，那么就在标记中加入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>和标记

语法如下：

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

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

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

反向选择：

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

:not(p){color:red;}

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

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

宇直豪

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
Web前端开发学习之路——初识CSS的基本功能（一）

应用CSS样式表行内声明&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;!--内行声明--&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;应用css样式——行内声明&lt;/title&gt;&
复制链接

扫一扫

专栏目录