菜单 搜索
首页 前端知识 CSS3语法及选择器总结

CSS3语法及选择器总结

2024-06-26 23:06:20 前端知识 前端哥 639 68 我要收藏

CSS定义

css是一种样式表语言，用来美化HTML文档

一.CSS的引用

方式一:内部样式表(HTML中引用)

在HTML的title标签下方添加style双标签，style标签里面书写CSS

*style里面的注释为/ * … /

CSS的书写规则: 选择器{属性名：属性值；}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的html学习实验草稿</title>
 
    <!-- CSS的引用 -->
    <style>    
        /* 选择器 */
        p{
            color: red;   
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>CSS展示</p>
</body>
</html>
复制

方式二.外部样式表(单独的CSS文件)

  • 将CSS代码写在单独的CSS文件中（.css）
  • 在HTML使用link标签（单标签）引入

引用语法：

    <link rel="stylesheet" href="./1.css">
复制

代码示例

CSS文件

p{
    color: red;
    font-size: 50px;
}
复制

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>CSS外部样式表引用方式示例</p>
</body>
</html>
复制

方式三:行内样式（写在标签的style属性值里）

通常这种方式用来配合JavaScript使用

语法：

<div style="color:red;font-size:20px">
    展示div标签使用CSS样式
</div>
复制

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>CSS外部样式表引用方式示例</p>
    <div style="color:red;font-size:20px">
        展示div标签使用CSS样式
    </div>
</body>
</html>
复制

二.选择器

  • 选择器的作用：查找标签，设置样式

1.标签选择器

使用标签名作为选择器，选中同名标签设置相同样式，并且无法差异化同名化标签的样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        p{
            color: red;
        }
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <h2>展示标签选择器的作用</h2>
    <p>标签p1</p>
    <p>标签p2</p>
    <p>标签p3</p>
    <div>div标签1</div>
    <div>div标签2</div>
    <div>div标签3</div>
</body>
</html>
复制

2.类选择器

作用：查找标签，差异化设置标签的显示效果

一个类选择器可以给多个标签使用

一个标签可以使用多个类名，class属性值写多个类名使用空格隔开即可

类名如果想命名为多个单词，可以使用-连接，例如my-news

使用步骤：

  • 定义类选择器——> .类名
  • 使用类选择器——> 标签添加class=“类名”

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /*类标签选择器的定义*/
        .mycolor{
            color: red;
        }
 
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 展示类选择器的使用 -->
    <h2>展示类选择器的使用</h2>
    <p class="mycolor">这是第一行,展示第一个类选择器的使用</p>
    <p>这是第二行，没有使用类选择器</p>
    <div class="mycolor size">这是div标签和第三行，展示使用多个类选择器</div>
    
</body>
</html>
复制

3.id选择器

作用：查找标签，差异化设置标签的显示效果

场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式

  • 使用步骤：
    • 定义id选择器——> #id名
    • 使用id选择器——> 标签添加id=“id名”

同一个id选择器在一个页面只能使用一次

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /*类标签选择器的定义*/
        #mycolor{
            color: red;
        }
 
    </style>
</head>
<body>
    <!-- 展示类选择器的使用 -->
    <h2>展示类选择器的使用</h2>
    <p id="mycolor">这是第一行,展示id选择器的使用</p>
    <p>这是第二行，没有使用选择器</p>
    
</body>
</html>
复制

4.通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器符号：*

通配符选择器不需要调用，浏览器会自动查找页面所有标签，设置相同样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /*通配符选择器的定义*/
        * {
            color: red;
        }
 
    </style>
</head>
<body>
    <!-- 展示通配符选择器的使用 -->
    <h2>展示通配符选择器的使用</h2>
    <p>这是第一行</p>
    <p>这是第二行</p>
    <div>标签</div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <strong>加粗标签</strong>
    
</body>
</html>
复制

5.复合选择器

  • 定义：由两个或多个基础选择器，通过不同方式组合而成
  • 作用：更准确，更高效的选择目标元素（标签）

后代选择器

  • 作用：选中某元素的后代元素
  • 选择器写法：父选择器，子选择器
  • 后代选择器会选中所有的后代（子标签，孙子标签等）

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /* 创建一个后代选择器 */
        div span {
            color: red;
        }
 
    </style>
</head>
<body>
 
    <h2>展示后代选择器的使用</h2>
    <span> 这是个span标签 </span>
    <div>
        <span>这是个被div包裹的span标签</span>
    </div>
</body>
</html>
 
 
复制

子代选择器

  • 与后代选择器不同的是，子代选择器只会选择子标签
  • 选择器写法：父选择器 > 子选择器{CSS属性}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /* 创建一个后代选择器 */
        div > span {
            color: red;
        }
 
    </style>
</head>
<body>
 
    <h2>展示后代选择器的使用</h2>
    <span> 这是个span标签 </span>
    <div>
        <span>这是个被div包裹的span子标签</span>
        <p>
            <span>这个是被div包裹的span孙子标签</span>
        </p>
    </div>
</body>
</html>
复制

并集选择器

  • 作用：选中多组标签设置相同的样式
  • 选择器写法：选择器1，选择器2，…选择器N{CSS属性},选择器之间用，隔开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        /* 创建一个并集选择器 */
        div,
        p,
        span{
            color:red;
        }
 
    </style>
</head>
<body>
 
    <h2>展示并集选择器的使用</h2>
    <div>这是一个div标签</div>
    <p>这是一个p标签</p>
    <span>这是一个span标签</span>
</body>
</html>
复制

交集选择器

  • 作用：选中同时满足多个条件的元素
  • 选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何复合

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <style>
        p.box{
            color: red;
        }
 
    </style>
</head>
<body>
 
    <h2>展示并集选择器的使用</h2>
    <div>这是一个div标签</div>
    <p class="box">这是一个p标签</p>
    <span>这是一个span标签</span>
</body>
</html>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13662.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！