前端-CSS基础知识详解（一）

最新推荐文章于 2022-12-08 09:11:10 发布

黑马蓝汐

最新推荐文章于 2022-12-08 09:11:10 发布

阅读量1.9k

点赞数 2

分类专栏：网页前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52262831/article/details/122115996

版权

网页前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

每日分享：

不跟风

不要盲目追随，越是信息泛滥，越要保持清醒。

css 的介绍
css 的引入方式
css 的选择器

一、css的介绍

1. css：

层叠样式表，它是用来美化页面的一种语言

2. css的作用：

美化界面，比如：设置标签文字大小、颜色、字体加粗等样式
控制页面布局，比如：设置浮动、定位样式

3. css基本语法：

选择器{

样式规则

}

样式规则：

属性名1：属性值1

属性名2：属性值2

……

选择器：是用来选择标签的，选出来之后给标签添加样式

例：

div{

width:100px;

height:100px;

}

说明：

css是由两个主要的部分构成：选择器和一条或多条样式规则

4. 小结

css是层叠样式表，它是用来美化网页和控制页面布局的
定义css的语法格式是：选择器{样式规则}

二、css的引入方式

css有三种引入方式：

行内式
内嵌式（内部样式）
外链式

1. 行内式

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

例：

<div style="width:100px; height:100px">hello</div>

优点：方便、直观。

缺点：缺乏可重用性

2. 内嵌式（内部样式）

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

例：

<head>

<style type="text/css">

h3{

color:red;

}

</style>

</head>

优点：在同一个页面内部便于复用和维护

缺点：在多个页面之间的可重用性不够高

3. 外链式

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

例：

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

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高

缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极易造成混乱

4. css引入方式的选择

行内式几乎不用
一般用内嵌式和外链式

5. 小结

css的引入有三种方式，分别是行内式、内嵌式、外链式
外链式在开发的时候会经常使用，最能体现div+css标签内容与显示样式分离的思想，也容易改版维护，代码看起来也是最美观的

三、css选择器

1. css选择器的定义

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

2. css选择器的种类

标签选择器
类选择器
层级选择器（后代选择器）
id选择器
组选择器
伪类选择器

3. 标签选择器

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

<style type="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名  -->