10.HTML CSS和CSS基本选择器

最新推荐文章于 2023-12-18 10:45:46 发布

夙惜言

最新推荐文章于 2023-12-18 10:45:46 发布

阅读量71

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Yang_Ke_Di/article/details/118801409

版权

HTML 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

CSS样式就是修饰网页的一种技术

使用CSS样式表可以对同一个网页进行不同的修饰，产生不同风格的页面

同一个样式可以作用于不同的页面，可以使页面保持统一的风格

换一种说法，就是对界面属性、样式、美观的一个更高级的设置

内嵌样式：

顾名思义就是在HTML文件内的样式

<html>
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
        <style type="text/css">
            <!--内嵌样式内容-->
	</style>>
    </head>
    <body>
	<!--HTML内容-->
    </body>
</html>

外部样式：

就是在HTML以外的.css文件，通过导入的方式对HTML问津进行修饰

<html>
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
        <link rel="stylesheet" type="text/css" href=".css文件的路径">
    </head>
    <body>
	<!--HTML内容-->
    </body>
</html>

其中，rel表示在网页中使用该外部样式表

type表示文本类型的样式

href表示样式的路径

CSS选择器：

标签选择器：

选择的对象可以是所有标签，标签选择器选择的是HTML文件里的所有指定标签

标签名
{
    属性1:属性值1;
    属性2:属性值2;
}

类选择器

选择的对象为所有类名与指定类名一致的标签

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

使用class属性来设置一个标签的类名

<a class="类名1"></a>
<a class="类名1"></a>

<a class="类名2"></a>
<a class="类名2"></a>

ID选择器

选择的类型为指定ID，ID只能存在一个，不可重复。

#ID名
{
    属性1:属性值1;
    属性2:属性值2;
}

<a id="ID名1"></a>

<a id="ID名2"></a>

组合选择器

将同样的规则应用于多个选择符，其中以逗号分隔

标签,.类,#ID
{
    属性:属性值;
}

包含选择器

选择从左到右从大到小的元素，期间用空格隔开

div ul li a
{
    属性:属性值;
}

即div中的ul中li中的a标签

交集选择器

由两个选择器中间的交集构成，其中，第一个必须是标签选择器。第二个必须是类选择器或者ID选择器。中间不能有空格，必须连续写

标签选择器#ID选择器
{
    属性:属性值;
}

伪类选择器，这里直接转载一个很全面的连接：W3school——CSS伪类

主要用到的：

伪类	含义
:link	未单击访问时的超链接样式
:visited	单击访问后的超链接样式
:hover	鼠标悬浮在超连接上的样式
:active	鼠标单击未释放的超链接样式

CSS的处理优先级为

行内样式 —> ID样式 —> 类样式 —> 标签样式

夙惜言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.HTML CSS和CSS基本选择器

CSS样式就是修饰网页的一种技术使用CSS样式表可以对同一个网页进行不同的修饰，产生不同风格的页面同一个样式可以作用于不同的页面，可以使页面保持统一的风格换一种说法，就是对界面属性、样式、美观的一个更高级的设置内嵌样式：顾名思义就是在HTML文件内的样式<html> <head> <meta charset="utf-8" /> <title>标题</title>...
复制链接

扫一扫