网络应用之css 的引入方式_css 引用网络文件-CSDN博客

本文链接：https://blog.csdn.net/qq_41810183/article/details/129293331

CSS的引入包括行内式、内嵌式和外链式，每种方式有其优缺点。行内式方便但不可重用，内嵌式利于页面内部复用，外链式适合大型项目以提高可维护性和重用性。CSS选择器包括标签选择器、类选择器、层级选择器、ID选择器、组选择器和伪类选择器，它们各自有不同的应用场景和特性。

摘要由CSDN通过智能技术生成

css 的引入方式

学习目标

能够知道 css 的引入三种方式

css的三种引入方式

行内式

内嵌式（内部样式）

外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<divstyle="width:100px; height:100px; background:red ">hello</div>

优点：方便、直观。缺点：缺乏可重用性。

2. 内嵌式（内部样式）

在<head>标签内加入<style>标签，在<style>标签中编写css代码。

示例代码:

<head><styletype="text/css">h3{
         color:red;
      }</style></head>

优点：在同一个页面内部便于复用和维护。缺点：在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<linkrel="stylesheet"type="text/css"href="css/main.css">

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

4. css引入方式选择

行内式几乎不用

内嵌式在学习css样式的阶段使用

外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

5. 小结

css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想，也最易改版维护，代码看起来也是最美观的一种。

css 选择器

学习目标

能够说出 css 选择器的种类

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

标签选择器

类选择器

层级选择器(后代选择器)

id选择器

组选择器

伪类选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

<styletype="text/css">p{
        color: red;
    }</style><div>hello</div><p>hello</p>

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>

<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">这是第一个div</div>

9. 小结

css 选择器就是用来选择标签设置样式的

常用的 css 选择器有六种，分别是:

标签选择器

类选择器

层级选择器(后代选择器)

id选择器

组选择器

伪类选择器