前端学习---(2)CSS基础

server/2024/10/25 11:51:37/

CSS 用来干什么?
CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

  1. css语法: 选择器{ 属性名: 属性值; 属性名: 属性值; }

    h1 {color: red;font-size: 5em;
    }
    

    h1: 选择器
    color: 属性 冒号之前是属性,冒号之后是值。
    font-size: 属性 冒号之前是属性,冒号之后是值。

  2. CSS四种基本选择器

    • 标签选择器:针对一类标签 如<p> <div>,所有的标签都可以是选择器,选择的是所有 不是一个
      标签选择器示例 p{ font-size:14px; }
 - id选择器:针对某一个特定的标签使用  选择符号`#`, 任何html标签都可以有id属性,id属性名不能是标签名,不能重复,且需要字母开头id选择器示例  `#mytitle{ border:3px dashed green; }`- 类选择器:针对你想要的所有标签使用 选择器用`.`标识  一个标签可以有多个类 例如:  `<p class="lv da">段落1</p>` 
id选择器 `#mytitle{ border:3px dashed green; }`  - 通用选择器(通配符):针对所有的标签都适用**css尽量使用class,** **js 要通过 id 属性得到标签** 容易混
  1. 伪类选择器
    静态伪类:只能用于超链接的样式。如下:
  :link 超链接点击之前 :visited 链接被访问过之后
  1. 动态伪类:针对所有标签都适用的样式。
   :hover “悬停”:鼠标放到标签上的时候:active “激活”: 鼠标点击标签,但是不松手时。:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点

伪类使用示例

<style type="text/css">
/*鼠标悬停,放到标签上的时候*/a:hover {color: yellow;}
</style>
  1. css的继承性
    关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。
    关于盒子、定位、布局的属性,都不能继承。

  2. 属性层叠性。层叠性:就是css处理冲突的能力
    选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器
    权重相同,就近原则(下面覆盖上面)

  3. 动效也是由css完成的

  4. 字体也是css

知道什么是什么,知道知识点属于那一块,用的时候再查,


http://www.ppmy.cn/server/134708.html

相关文章

php命令执行的一些执行函数----以ctfshow靶场为解题思路

解法10、利用文件包含 ①?cinclude$_GET[1]?>&1data://text/plain,<?php system(tac flag.php);?> cdata://text/plain;base64,PD9waHAgc3lzdGVtKCdjYXQgZmxhZy5waHAnKTs/Pg ②?cinclude$_GET[1]?>&1php://filter/readconvert.base64-encode/resourc…

【C++刷题】力扣-#448-找到所有数组中消失的数字

题目描述 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 示例1: 输入&#xff1a;nums [4,3,2,7,8,2,3,1] 输出&#xff1a;[5,6]示例2: …

2024 10.25 判断一个矩阵是否对称

主对角线对称 思路&#xff1a;a[i][j]!a[j][i] 第一行和第一列顺序比较&#xff0c;后面依次类推 #include <stdio.h>int main(){int n,m;scanf("%d",&n);int a[n][n];for(int i0;i<n;i){for(int j0;j<n;j)scanf("%d",&a[i][j]);}i…

Fragments by E2B:AI生成应用模板,让应用开发更智能

在人工智能技术飞速发展的今天&#xff0c;我们见证了许多创新工具的诞生&#xff0c;它们正在改变传统的软件开发方式。今天&#xff0c;我要向大家介绍一个名为Fragments by E2B的开源项目&#xff0c;这是一个基于Next.js 14、shadcn/ui、TailwindCSS和Vercel AI SDK构建的A…

什么是RPC

什么是RPC RPC的全称是Remote Procedure Call&#xff0c;即远程过程调用&#xff0c;是一种计算机通信协议。它允许程序在不同计算机之间进行通信和交互&#xff0c;就像本地调用一样。简单解读字面上的意思&#xff0c;远程是指要跨机器而非本机&#xff0c;所以需要用到网络…

在 typescript 中,如何封装一个 class 类来接收接口的响应数据

在 TypeScript 中&#xff0c;封装一个类来接收接口的响应数据是一个常见的需求&#xff0c;特别是在处理后端 API 响应时。这通常涉及到定义与后端 API 响应结构相匹配的接口&#xff08;或类型&#xff09;&#xff0c;并在类中创建方法来处理这些数据。以下是一个简单的示例…

理解dbt artifacts及其实际应用

dbt是数据分析领域的一种变革性工具&#xff0c;它使数据专业人员能够对仓库中的数据进行转换和建模。它的强大功能之一是生成dbt artifacts&#xff1a;dbt运行的结构化输出&#xff0c;提供对dbt项目及其操作的深入了解。 dbt 构件介绍 dbt构件是每次dbt运行时生成的JSON文…

Excel功能区变灰是什么原因造成?怎么解决?

Microsoft Excel是广泛使用的电子表格软件&#xff0c;但有时用户可能会遇到功能区变灰的问题&#xff0c;这可能导致功能无法使用&#xff0c;影响工作效率和用户体验。本文将深入探讨Excel功能区灰色的原因及解决方案&#xff0c;帮助读者快速解决这一问题。 一、Excel功能区…