CSS入门

最新推荐文章于 2024-06-07 14:13:17 发布

The_last_knight

最新推荐文章于 2024-06-07 14:13:17 发布

阅读量674

点赞数

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/The_last_knight/article/details/86541246

版权

Web开发专栏收录该内容

54 篇文章 3 订阅

订阅专栏

CSS入门

之前我们学习过HTML的基本知识，对于网页来说，HTML搭建的只是框架，而对于网页的美容，则需要用到CSS，CSS就可以看做是网页的美容师。

CSS的全称叫做Cascading Style Sheets,中文名字叫层叠样式表。我们可以用CSS设置字体的颜色，字体的大小以及图片外形，排版布局等等"美颜"的工作。

CSS的书写位置

行内式

CSS的书写位置有三个，第一个是行内，如下

<标签 style="属性1:属性值1; 属性2:属性值2 ...">

下面就是把这个一级标题设置为红色。

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <h1 style = "color:red">CSS入门</h1>
    </body>
</html>

内嵌式

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
    <style>
        选择器{属性1:属性值1; 属性2:属性值2; ...}
    </style>
</head>

比如下面

<head>
    <style>
        h1{color:red;}
    </style>
</head>

就是把所有的h1标签的文字颜色设置为红色。

外链式

外链式指的是HTML文件与CSS文件分开写，在实际工作中就是这么干的。但是为了方便，我在介绍CSS的使用的时候一般会用内嵌式。外链式的写法如下

<link rel="stylesheet" href="CSS文件的路径" type="text/CSS"/ >

link标签是单标签，它是放在head标签内的。在使用link标签时，必须指定link标签的三个属性,如下:

href:定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径。
type:定义所链接文档的类型，在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

选择器

标签选择器

使用HTML的标签名作为选择器，为HTML的某一标签指定统一的CSS样式。比如上面的

h1{color:red;}

就是标签选择器，使用h1作为选择器，所有的h1标签包含的文字都被设置为红色。

类选择器

类选择器是最常用的选择器，类选择器使用.（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{
    属性:属性值;
    ... ...
}

标签在调用CSS样式时，使class="类名"即可，比如

<head>
    <style>
        .red{
            color : red;
        }
    </style>
</head>

<body>
    <h1 class="red">CSS入门</h1>
</body>

我们声明了一个类选择器，类名叫做red,在h1标签中，我们通过class="red"调用了该类，所以h1标签所包含的文字设置成了红色。

多类名选择器

如果我们在标签中需要调用多个类怎么办，比如有两个类分别为

.red{
    color:red;
}
.font14{
    font-size=14px;
}

如果加入h1标签要调用这两个类的话，写法如下

<h1 class = "red font14">标题</h1>

这个就叫做多类名选择器。

还有一个问题就是，如果调用的多个类有冲突怎么办?比如调用的两个类一个设置颜色为红色，一个设置颜色为蓝色，是如何处理这种冲突?

.red{
    color:red;
}
.blue{
    color:blue;
}

假设h1调用如下

<h1 class="blue red">标题</h1>

你觉得会是蓝色还是红色的?答案是蓝色的，虽然调用时blue写在red前面，你想red会覆盖blue,所以会是红色，实际上最终的效果与调用的顺序无关，而与CSS书写的顺序有关，由于CSS书写时red在blue的上面，所以只有最后的blue生效。

id选择器

与类选择器很相似，不管调用方式是通过id来调用的，并且书写方式上有差别，即将.改为了#。如下

#id名{
    属性:属性值;
    ... ...
}

调用方式同类调用方式，不过用的不是class=""而是id=""。
与类选择器不同的是，由于id是唯一的，不同的标签的id不能相同，所以该种方法只能给唯一的一个id设置样式。并且id选择器能做到的，类选择器也能做到，所以实际上类选择器是用的最多的。

通配符选择器

书写方式如下

*{
    属性:属性值;
    ... ... 
}

*就是通配符，代表所有标签的意思，意思是所有的标签都会被设置成这样的样式，该种方法在开发几乎不用。

The_last_knight

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

CSS入门之前我们学习过HTML的基本知识，对于网页来说，HTML搭建的只是框架，而对于网页的美容，则需要用到CSS，CSS就可以看做是网页的美容师。 CSS的全称叫做Cascading Style Sheets,中文名字叫层叠样式表。我们可以用CSS设置字体的颜色，字体的大小以及图片外形，排版布局等等"美颜"的工作。CSS的书写位置行内式 CSS的书写位置有三个，第一个是行内，...
复制链接

扫一扫

专栏目录