【前端】CSS(1) —— CSS的基本语法和一些简单的选择器

news2024/11/15 6:59:02
JavaEE传送门

JavaEE

网络原理——网络层与数据链路层

【前端】HTML入门 —— HTML的常见标签


目录

  • CSS
    • 基本语法
      • 注释
    • 引入方式
      • 内部样式
      • 内联样式
      • 外部样式
    • 代码风格
      • 样式格式
      • 样式大小写
      • 空格规范
    • CSS 选择器
      • 标签选择器
      • 类选择器
      • id 选择器
      • 通配符选择器
      • 复合选择器
        • 后代选择器
        • 子选择器
        • 并集选择器
        • 伪类选择器


CSS

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

通过连接 css 可以嵌入到 html 中使用, 需要一个 style 标签

<style>

</style>

基本语法

选择器 + {一条/N条声明}

# 我们先建一个 css.html 文件.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Gujiu</title>

</head>
<body>
    <div>hello CSS</div>
</body>
</html>

此时我们看一下现在的页面

# 现在我们给他加上 CSS

<body>
    <style>
        div {
            /*设置字体颜色*/
            color: hotpink;
            /*设置字体大小*/
            font-size: 80px;
        }
    </style>
    <div>hello CSS</div>
</body>

若干个属性都在一个 { }

属性之间使用 ; 来分割

键和值之间使用 : 来分割

# 页面展示

我们此时在这个页面上右键, 检查, 使用开发者工具就能看到当前页面哪些样式生效了.

如果把 ✅ 勾掉, 样式就不显示了


注释

/* 这是注释 */

CSS 中只有这一种注释方法


引入方式

内部样式

写在 style 标签中. 嵌入到 html 内部.

理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.

(刚刚我们的引用方式就是内部样式表.)


内联样式

使用 style 属性(每个标签都可以有 style 属性, 里面就可以直接写 CSS, 不必写选择器)

<div style="color: green;">
    hello CSS
</div>

当给一个元素分多种方式设置样式的时候:

<body>
    <style>
        div {
            color: hotpink;
            font-size: 80px;
        }
    </style>
    <div style="color: green;">
        hello CSS
    </div>
</body>

如果是不同的属性, 彼此会叠加. 如果是相同的样式, style 属性设置优先级 > style 标签 (CSS 的样式优先级, 有一套复杂的规则)


外部样式

把 CSS 写道一个单独的 .css文件里. 通过 link 标签引入到 html 里面

我们创建一个新的文件 style.css

div {
    color: blue;
    font-size: 50px;
}

在 css.html 中加入 link 标签

<link rel="stylesheet" href="style.css">

# 注意事项 #

  • 如果外部样式和内敛样式冲突了, 还是内联样式优先级高.

  • 如果外部样式和内部样式冲突, 采取就近原则.

  • 实际开发中, 最主要的写法就是外部样式, 写作外部样式, 可以让页面结构和样式分开

    同时也就可以复用样式到其他的页面中了(写了一个 CSS 文件, 可以被多个 html 引用)

  • 内联样式, 往往是修修补补的时候


代码风格

样式格式

  1. 紧凑风格(适用于部署到生产环境中)

    p { color: red; font-size: 30px;}
    
  2. 展开风格(推荐 适用于开发阶段)

    p {
        color: red;
        font-size: 30px; 
    }
    

样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

空格规范

  • 冒号后面带空格
  • 选择器和 { 之间也有一个空格.

CSS 选择器

描述了你要选中页面中的哪个/ 哪些元素, { } 的样式就是针对这些元素生效的

标签选择器

直接写标签的名字, 标签名就表示针对当前页面中所有的指定标签, 都要被选中

<body>
    <style>
        p {
            color: hotpink;
            font-size: 30px;
        }
        div {
            color: rgb(20, 197, 251);
            font-size: 70px;
        }
    </style>
    <p>小Gujiu</p>
    <p>小Gujiu</p>
    <p>小Gujiu</p>

    <div>大GUJIU</div> 
    <div>大GUJIU</div> 
    <div>大GUJIU</div>
</body>


类选择器

可以让样式差异化效果

我们现在希望让 p 标签中的第二个 小Gujiu 字体变小, 且换一个颜色. 我们需要在 style 标签中加入一个类标签

.one {
    color: chartreuse;
    font-size: 20px;
}

在 html 引用对应的 CSS 类名, 从而使对应的样式针对指定元素生效

<p>小Gujiu</p>
<p class="one">小Gujiu</p>
<p>小Gujiu</p>

# 注意 #

  • 类选择器允许让多个元素, 引用同一个类.
  • 类选择器是 CSS 选择器中, 最灵活的一种方式, 也是最常用的方式.

id 选择器

每个元素都有一个 ID 属性, 值应该要是在页面中是唯一的. 使用 id 选择器来选中到对应的元素上.

id 选择器使用 # 开头, 后面 the-id 对应到页面上的 id 为 the-id 的元素

<style>
#the-id {
    color: blue;
    font-size: 50px;
}
</style>
    
<p id="the-id">小Gujiu</p>


通配符选择器

选中页面中的所有元素, 可以让页面所有元素都被选中, 通常用于干掉浏览器的默认样式.

*{
}

我们文本. 默认的颜色,字体大小 或者 p标签 默认的段落间距

即使我们没有指定样式, 也会默认带的(浏览器赋予的默认样式, 在不同浏览器上可能不一样)

如果我们希望用户不论使用哪个浏览器, 看到的样式都是一样的. 我们就需要将默认样式干掉.

# 注意 # 上述四种选择器, 称为 “基础选择器”.


复合选择器

把多个基础选择器组合起来.

后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}

# 注意事项 #

  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
  • 元素1 元素2 可以是标签选择器, 也可以是类选择器, 还可以是 id 选择器

我们先来看一个列表

我们现在有一个有序列表一个无序列表

<body>
    <ul>
        <li>小Gujiu</li>
        <li>小Gujiu</li>
        <li>小Gujiu</li>
    </ul>

    <ol>
        <li>大GUJIU</li>
        <li>大GUJIU</li>
        <li>大GUJIU</li>
    </ol>
</body>

我们希望 ul 里面的 li 变成粉色, ol 不变, 我们在 style 标签中写入 后代选择器.

<style>
    ul li {
        color: hotpink;
    }
</style>

后代选择器还可以有多个层次


子选择器

和后代选择器类似, 只是选择子标签, 无法选择孙子以及其以后的标签

使用 > 表示这是子元素的关系, 只是在 ul 的子元素范围内, 搜索 li 不会搜索里面的孙子元素

ul>li {
    color: hotpink;
}

但如果我们在 > 后面写孙子元素, 则不会生效


并集选择器

针对多个不同的选择器, 应用相同的样式属性

元素1, 元素2 { 样式声明 }
  • 通过 , 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

同时 针对 div 和 p 标签, 应用相同的样式.


伪类选择器

选中元素的不同状态

这里的状态有很多种, 本章主要介绍两个

  • :hover 鼠标放上去

  • :active 鼠标按下去

<body>
    <style>
        div {
            color: hotpink;
            font-size: 30px;
        }

        div:hover {
            color: blue;
        }

        div:active {
            color: orange;
        }

    </style>

    <div>小Gujiu</div>
</body>

原页面

鼠标放在 “小Gujiu” 上

鼠标点击 “小Gujiu” 字样


# 注意 #

上述介绍的选择器只是当前一些最简单的选择器, CSS 里还有很多其他的选择器.

前端文档推荐: MDN 文档

CSS 选择器 - CSS(层叠样式表) | MDN (mozilla.org)


🌷(( ◞•̀д•́)◞⚔◟(•̀д•́◟ ))🌷

以上就是今天要讲的内容了,希望对大家有所帮助,如果有问题欢迎评论指出,会积极改正!!

在这里插入图片描述
加粗样式

这里是Gujiu吖!!感谢你看到这里🌬
祝今天的你也
开心满怀,笑容常在。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1871.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文件包含漏洞和hash破解

介绍 Windows是当今世界最主要的操作系统&#xff0c;因为它易于使用的GUI可访问性。大约85%的市场份额已成为攻击的关键操作系统。此外&#xff0c;大多数组织使用Active Directory来设置其Windows域网络。微软聘请NTLM&#xff08;New Technology LAN Manager&#xff09;和…

Pico Neo3 4VR游戏下载地址及十大好玩游戏推荐

大家好&#xff0c;杰克今天为大家分享的是VR一体机游戏。 说到VR一体机&#xff0c;我们首先想到的一定是国产之光pico啦&#xff0c;picovr被认为是国内最被看好的VR一体机&#xff0c;有望在国内取代红极一时的OculusQuest&#xff0c;填补这块市场的空白。OculusQuest将6D…

#Primavera Unifier:关于零代码/低代码平台特点【2/3】

在之前对Unifier的介绍中&#xff0c;我提到了Unifier应用的一个非常关键的特征&#xff0c;及零代码快速配置使用&#xff0c;而为了更好的介绍Oracle Primavera Unifier 的零代码特点&#xff0c;以下我将通过3篇内容来逐一介绍零代码/低代码平台的特点。 前面介绍到了零代码…

Opencv项目实战:14 手势控制音量

目录 0、项目介绍 1、项目展示 2、项目搭建 3、项目的代码与讲解 4、项目资源 5、项目总结 0、项目介绍 本篇与上一篇有很多联系&#xff0c;大家可以看看这篇Opencv项目实战&#xff1a;13 手部追踪&#xff0c;我们将根据上一节的内容&#xff0c;进行一个拓展。本篇你…

AtCoder Beginner Contest 275 【E】【F】

E - Sugoroku 4 【概率dp】 题意&#xff1a; 对于每个样例&#xff0c;读入n&#xff0c;m&#xff0c;k。 一维数轴&#xff0c;你现在在0这个点上&#xff0c;目标是到达n这个点&#xff0c;你有k次掷骰子的机会&#xff0c;每次可能等概率的掷出1~m的任意一个数字&#xff…

面了一个4年经验的测试工程师,自动化都不会也要15k,我真是醉了...

在深圳这家金融公司也待了几年&#xff0c;被别人面试过也面试过别人&#xff0c;大大小小的事情也见识不少&#xff0c;今天又是团面的一天&#xff0c; 一百多个人都聚集在一起&#xff0c;因为公司最近在谈项目出来面试就2个人&#xff0c;无奈又被叫到面试房间。 整个过程…

.NET Core HttpReports 监控

HttpReports 基于.NET Core 开发的APM监控系统&#xff0c;使用MIT开源协议&#xff0c;主要功能包括&#xff0c;统计, 分析, 可视化&#xff0c; 监控&#xff0c;追踪等&#xff0c;适合在中小项目中使用。 语雀&#xff1a;https://www.yuque.com/httpreports/docs/uyaiil …

SQL注入之绕过is_numeric过滤

目录预备知识PHP常用的过滤类函数is_numeric()函数介绍实验目的实验环境实验步骤一通过源代码审计&#xff0c;发现临时文件实验步骤二通过分析源代码的执行逻辑&#xff0c;了解程序的功能&#xff0c;发现程序中的安全漏洞实验步骤三绕过过滤函数实现SQL注入预备知识 PHP常用…

Linux进程信号

文章目录什么是信号signal函数的功能&#xff08;捕捉信号后自己处理&#xff09;Core Dump&#xff08;核心转储&#xff09;kill&#xff0c;raise&#xff0c;alarm系统调用再度理解OS给进程发送信号信号集操作函数自定义捕捉详解什么是信号 生活中的信号&#xff1a;闹钟&…

0083 环形链表

package LinkedList_; /* * 单向环形链表应用场景——约瑟夫问题 * 设编号为1&#xff0c;2....n的n个人围成一圈&#xff0c;约定编号为k&#xff08;1<k<n&#xff09;的人从1开始报数&#xff0c;数到m的人出列&#xff0c; * 它的下一位又从…

黑胶歌曲没权限,还好我会Python,一分钟一个歌单,硬盘有点不够用了~

今日份Python白嫖人生苦短&#xff0c;我用Python一、你需要准备1、环境2、模块二、效果展示三、代码展示四、写在最后人生苦短&#xff0c;我用Python 人之初&#xff0c;喜白嫖。大家都喜欢白嫖&#xff0c;我也喜欢&#xff0c;那么今天就来试试怎么白嫖抑云~ 我不是&#…

React面向组件编程(定义组件,组件三大核心属性,组件事件处理、组件收集表单数据、高阶函数和函数的柯里化)

目录 一、React中定义组件 1、函数式组件 2、类式组件 二、组件三大核心属性 1、组件三大核心属性1: State(状态) 2、组件三大核心属性2: props 3、组件三大核心属性3: ref 三、组件事件处理 1、事件处理 四、组件收集表单数据 1、受控组件 2、非受控组件 五、高阶函…

【数据结构】算法的时间复杂度和空间复杂度

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f40c; 个人主页&#xff1a;蜗牛牛啊 &#x1f525; 系列专栏&#xff1a;&#x1f6f9;初出茅庐C语言、&#x1f6f4;数据结构 ☀️ 学习格言&#xff1a;眼泪终究流不…

象棋中的马跳步问题

象棋中的马跳步问题 作者&#xff1a;Grey 原文地址&#xff1a; 博客园&#xff1a;象棋中的马跳步问题 CSDN&#xff1a;象棋中的马跳步问题 题目描述 中国象棋中&#xff0c;整个棋盘就是横坐标上 9 条线、纵坐标上 10 条线的一个区域&#xff0c;给你三个 参数 x&…

计算机毕业设计springboot+vue基本微信小程序的汽车租赁公司小程序

项目介绍 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时…

【Vue】环境搭建

Vue 简介&#xff1a; 一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方面&#xff0c;当与现代化的工具链以…

Jenkins+Docker 一键自动化部署 SpringBoot 项目

本文章实现最简单全面的 Jenkins Docker Spring Boot 一键自动部署项目。步骤齐全&#xff0c;少走坑路。 环境&#xff1a;CentOS7 Git (Gitee) 实现步骤&#xff1a;在 Docker 安装 Jenkins&#xff0c;配置 Jenkins 基本信息&#xff0c;利用 Dockerfile 和 Shell 脚本实…

CSS 的布局 盒子

目录 块级元素和行内元素 块级元素 特点&#xff1a; 行内元素 特点&#xff1a; 行内元素 和 块级元素 的区别 改变显示模式&#xff08;把行内元素 变成 块级元素) 盒模型 盒模型图 边框基础属性 内边框、外边框 基础写法&#xff1a; 复合写法 块级元素水平居中 前提&#…

C++知识点大全(第二版)

目录 1 C简介 1.1 起源 1.2 应用范围 1.3 C和C 2开发工具 3 基本语法 3.1 注释 3.2关键字 3.3标识符 4 数据类型 4.1基本数据类型 4.2 数据类型在不同系统中所占空间大小 4.3 typedef声明 4.4 枚举类型 5 变量 5.1 变量的声明和定义 5.2 变量的作用域 6 运算…

如何当好硬软件助理工程师——实习周报(一)

如何当好硬软件助理工程师——实习周报 如何当好硬软件助理工程师——实习周报&#xff08;一&#xff09; 文章目录如何当好硬软件助理工程师——实习周报前言一、问题积累1.git 指令2.Coding的使用3.代码中的知识点&#xff08;HAL库、Flash读写&#xff09;a.gpio配置b.fla…