开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端-CSS基础知识详解（一） -> 正文阅读

[JavaScript知识库]前端-CSS基础知识详解（一）

每日分享：

不跟风

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

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名  -->

注意：

虽然给其他标签设置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 选择器有6种：
- 标签选择器
- 类选择器
- 层级选择器（后代选择器）
- id选择器
- 组选择器
- 伪类选择器

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-24 18:23:15 更:2021-12-24 18:24:03

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 10:39:21-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码