CSS基础选择器

简介: 本篇文章主要介绍CSS选择器的基础选择器

一、CSS3概述

1.CSS的发展

QQ截图20220205211952.png 

2.浏览器对CSS3的支持

    流行的浏览器对CSS都有很好的支持,但不同浏览器对CSS3很多细节的处理存在差异。

3.CSS的编辑器

    Dreamweaver CS5、WebStorm、IntelliJ IDEA、VSCode

CSS的一个示例

示例:使用传统的HTML设计页面。

实现效果

QQ截图20220205212223.png

QQ截图20220205212252.png

 

使用CSS改进HTML设计页面

QQ截图20220205212415.png

 

使用CSS有以下几个主要优点。

(1)结构和风格分离

(2)扩充HTML标记

(3)提高网站维护效率

(4)可以实现精美的页面布局

二、CSS的基本选择器

CSS可以认为是多个选择器组成的集合,每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”,格式定义如下。

selector {

property:value;

}

 

1.标记选择器

 一个HTML页面由很多不同的标记组成,例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。

 
tagName {

property:value;

}

 

2.类选择器

类选择器用来为一系列标记定义相同的呈现方式。

 
  .className {

property:value;

}

示例所示为标记选择器和类选择器的综合应用 

QQ截图20220205213000.png

QQ截图20220205213017.png

 

3.ID选择器

ID选择器和类选择器在设置格式的功能上类似,都是对特定属性的属性值进行设置。

ID选择器的一个重要功能是用做网页元素的唯一标识,所以,一个HTML文件中一个元素的ID属性值中惟一的。

    定义ID选择器的语法格式如下。

 
#idName{

property:value ;

}

在定义ID选择器时,需要在idName前面加一个“#”符号,如下面的示例所示。

#font1{

font-family:"幼圆";

color:#00F;

}

 类选择器与ID选择器主要区别如下。

(1)类选择器可以给任意数量的标记定义样式,但ID选择器在页面的标记中只能使用一次。

(2)ID选择器比类选择器具有更高的优先级,即当ID选择器与类选择器在样式定义上发生冲突时,优先使用ID选择器定义的样式。

 

示例ID选择器的应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        p {
            text-indent: 2em;
        }


        #first {
            /*ID选择器*/
            font-family: "幼圆";
            color: #00F;
        }


        #second {
            line-height: 130%;
            font-family: "隶书";
        }
    </style>
</head>
<body>
<p id="first">开展计算思维教学是计算机科学发展的必然结果。</p>


<p id="second">计算机早期的发展,在计算机科学的引领下,指导什么能做,什么不能做;什么做的快,什么做的慢;什么做的好,什么做的不好。</p>


<p>现在已经没有章法了,似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p>
</body>
</html>

效果

 

QQ截图20220205214404.png

三、在HTML中使用CSS的方法

行内样式

最简单的一种使用方式,直接把CSS代码添加到HTML的代码行中,由<style>标记支持,代码示例如下:

  <h1 style="color:blue;font-style:bold"></h1>

嵌入样式

将样式定义作为网页代码的一部分,写在HTML文档的<head></head>之间,通过<style></style>标记来声明。

嵌入的样式与行内样式有相似的,也有不同,行内样式的作用域只有一行,而嵌入的样式可以作用于整个HTML文档中。

 
示例是包含行内样式和嵌入样式。

QQ截图20220205214701.png

 

链接样式

链接样式是在HTML中引入CSS使用频率最高的方法。

  • 体现了“页面内容”和“样式定义”分离
  • 实现了内容描述和CSS代码的分离
  • 网站的前期制作和后期维护都十分方便。

 
链接样式先要定义一个扩展名为“.css”的文件(即外部样式表),该文件包含需要用到的CSS规则,不包含任何其他的HTML代码。

 
链接样式表的方法就是在HTML文件的<head>部分添加代码,格式如下。

      <link rel="stylesheet" type="text/css" href=" mystyle.css" />

 

链接样式表的一个示例

HTML文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="css/mystyle.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    <p id="first">开展计算思维教学是计算机科学发展的必然结果。</p>
    
    <p id="second">计算机早期的发展,在计算机科学的引领下,指导什么能做,什么不能做;什么做的快,什么做的慢;什么做的好,什么做的不好。</p>
    
    <p>现在已经没有章法了,似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p>
    </body>
    </html>
    

 

CSS文件

QQ截图20220205215304.png

 

导入样式

导入样式和链接样式的操作过程基本相同,都需要一个单独的外部CSS文件,然后再将其导入到HTML文件中,但在语法和运行过程上有所差别。

导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内,作为文件的一部分,类似于嵌入。

导入外部样式需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件,示例代码如下。

<style type="text/css">

@import "mystyle.css";

</style>

 
示例

QQ截图20220205215627.png

 

样式的优先级

1.行内样式和嵌入样式比较

QQ截图20220205215829.png

QQ截图20220205215854.png

行内样式的优先级大于嵌入样式

2.嵌入样式和链接样式比较

QQ截图20220205220012.png

QQ截图20220205220039.png

QQ截图20220205220105.png

 
嵌入样式的优先级高于链接样式。
 

3.链接样式和导入样式

QQ截图20220205220320.png

链接样式的优先级高于导入样式的优先级。

通过前面的例子,CSS样式表方式的优先顺序由高到低次依为:行内样式、嵌入样式、链接样式和导入样式。

相关文章
|
1月前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
29天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
25天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
119 44
|
18天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
13 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
25天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
19 4
|
1月前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
1月前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
1月前
|
前端开发 JavaScript
CSS id选择器
CSS id选择器
14 1
|
16天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
18 0
|
22天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
18 0