CSS重点

第一章：CSS类型

1、行内样式

<div style="color:red;font-size:30px;font-weight: 900;font-style: italic;">qcby</div>

注意：行内样式，作用力优先级最高，但是不利于html与css的书写以及修改，会让html非常臃肿

2、内部样式

style标签是head标签的子标签

<head>
    ....
    <style>
        div {
            color: red;
            font-size: 30px;
            font-weight: 900;
            font-style: italic;
        }
    </style>
</head>

注意：内部样式，可以把html与css做到模块级分离，便于同一个页面中，多处使用同一种样式

3、外部链接样式（推荐使用）

link标签是head标签的子标签，需要去建立一个index.css文件

<link rel="stylesheet" href="css/index.css">
  • rel : 代表链接的资源类型是样式单（stylesheet）
  • href : 代表具体链接的资源路径，可以使用相对路径或者绝对路径

index.css文件内容如下：

div {
    color: red;
    font-size: 30px;
    font-weight: 900;
    font-style: italic;
}

注意：外部链接样式，可以把html与css做到文件级分离，便于多个页面中，多处使用同一种样式

4、三种样式类型的优先级

行内样式>内部样式>外部链接样式

第二章：CSS选择器

1. css语法

在这里插入图片描述

2. 基本css选择器

①:元素选择器（比较笼统）：
在这里插入图片描述
注意：*代表所有HTML元素，是html通配符，可以给所有的html元素设置通用样式

*{
    margin:0;
    padding:0
}

②.属性选择器：
属性选择器是对元素选择器更精确地限制，所有的html属性都可以作为限制条件，不仅仅是id属性

元素选择器是属性选择器的一种特立。*{}是元素选择器的一种特立

在这里插入图片描述

/*对所有id属性为xx结尾的div块元素起作用的css样式*/
div[id$=XX]{
    background: red;
}

③.ID选择器：
如果我们用的选择器不是一般的选择器，比如上边我们用的id属性，那么我们其实没有必要那么费事，直接将其出去来。
在这里插入图片描述
注意：p#xx 代表是ID值是xx并且是p元素,是元素选择器和ID选择器两者结合，更加精确确定HTML元素，与p #xx的区别要清楚，p #xx代表p元素嵌套的后代元素，并且ID值为xx的元素

 <div id="xx">ssss</div>
 <p id="xx">ssss</p>

在这里插入图片描述
④.Class选择器：

class 在java当中是类的意思。那么在当前的css也代表着分类，也相当于给元素取别名
id:唯一表示符，用来表示元素的唯一性。

在这里插入图片描述
注意：p.xx 代表是class值是xx并且是p元素,是元素选择器和class选择器两者结合，更加精确确定HTML元素，与p .xx的区别要清楚，p .xx代表p元素嵌套的后代元素，并且class值为xx的元素

⑤.包含选择器：
在这里插入图片描述
多个选择器之间只要有空格，就是html元素存在包含关系，此关系不一定是父子关系，也可能是爷孙关系等等。

<p>hhhh</p>
<div>
   <p>hhh</p>
</div>

div p{
    background: red;
}

⑥.子选择器：将包含的若关系体现为包换的强关系
在这里插入图片描述
子选择器一定是体现的父子关系，必须是直接关系，隔代关系不成立；是对包含选择器更强化的关系性选择器

 <ul class="hhh">
            <li>
                <a>qcby</a>
                <ul>
                    <li><a>qcby</a></li>
                    <li><a>qcby</a></li>
                    <li><a>qcby</a></li>
                </ul>
         </li>
 </ul>

/*这种方式所有的都会标红
.hhh li a{
    background: red;
}
/*这才是我们想要的*/
.hhh>li>a{
    background: red;
}

⑦.兄弟选择器（不常用）：
平级下寻找后面的兄弟元素（只找弟弟，不找哥哥）
在这里插入图片描述

 	  <ul>
            <li class="java">qcby</li>
            <li>qcby</li>
            <li class="php">qcby</li>
            <li>qcby</li>
            <li>qcby</li>
            <li class="java">qcby</li>
            <li class="java">qcby</li>
        </ul>
        <ul>
            <li class="java">qcby</li>
            <li>qcby</li>
            <li>qcby</li>
            <li>qcby</li>
            <li class="java">qcby</li>
            <li class="java">qcby</li>
        </ul>

.php~.java{
    background: red;
}

⑧.选择器组合：
在这里插入图片描述

   <a href="">qcby</a>
   <div>qcby</div>
   <p>div</p>

a,div,p{
    background: red;
}
/*  *是指所有，伤害范围太大 */

3. 伪元素css选择器

  	<!-- 现在想要把第一个字母q大写，标红 -->
    <!-- 这种写法比较麻烦，如果数据库将数据发回给我们前端页面，我们总不能在将q单独拆分一次吧 -->
    <p><span>q</span>cby</p>
    <p>qcby</p>

p span{
    color:red;
    font-size: 30px;
}
/* 伪元素选择器，不是真的元素，但是能够做到类似于一个元素将内容包裹起来 */
/* 减少html标签的编写 */
p::first-letter{
    color:red;
    font-size: 30px;
}

①. :first-letter：
不需要真实的html元素嵌套内容，就可以实现首字母的特殊样式处理
在这里插入图片描述
②. :first-line：
在这里插入图片描述

 <p>洒水车撒村撒村三叉树飒飒大师法吧二色广东省人保的想法VB第三方撒发送发放数差三叉市场撒叉树撒擦擦算法算出按时发萨达十大实弹发射</p>

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

为什么我们可以使用字母但是不能使用汉字？
因为浏览器对汉字和英文的表现方式是不一样的。
对于英文来说为了保护单词语句的完整性，浏览器宁可出现滚动条也不会将一个单词拆分成两行

③. :before：

/* content属性是重点，是必须要使用的 */
p::before{
    content: "你好呀"; 
    color:red;
    font-size: 30px;
}

需要配合content属性，插入具体的内容，包括文本与图片，图片的插入方式：content:url(“图片路径”)
在这里插入图片描述
④. :after：

/* content属性是重点，是必须要使用的 */
p::after{
    content: "你好呀"; 
    color:red;
    font-size: 30px;
}

after跟before同理，只不过是在已有元素后面插入内容

4. 伪类css选择器

<!-- 我们想要第一个标红，可以不直接标class -->
    <ul>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
    </ul>

/* 这样一来我们就可以不用在html当中加过多的选择器 */
ul li:nth-child(1){
    background: red;
}

①.结构性伪类选择器：
在这里插入图片描述
nth-child(n)此中的n,可以是1,2…也可以是odd(奇数) | even（偶数） | 表达式，比如2n+1
注意：nth-child(n),当不是表达式的时候，n是从1开始的；当是表达式的时候，是从0开始

  <!-- 我们想要第一个标红，可以不直接标class -->
    <ul>
        <p>hello</p>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
    </ul>

/* 我们继续第一个标红，但是发现没什么作用，原因在于ul下边的第一个是p标签
   所以我们可以将 li 变为  p
*/
/* ul li:nth-child(1){
    background: red;
} */
/* 但是我们如果想继续讲p标签下边的的第一个li变为红色的呢？ */
/* ul p:nth-child(1){
    background: red;
} */
/* 我们可以使用 first-of-type() 他是直接去找第一个第二个这样的效果 */
ul li:nth-of-type(1){
    background: red;
}

②.UI元素状态伪类选择器：
在这里插入图片描述

  <!-- 鼠标放上去之前是红色，放上去之后是绿色 -->
    <ul>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
        <li>qcby</li>
    </ul>
    <!-- 鼠标放上去是一个颜色，点击是另一个颜色 -->
    <input type="text" > 

/* focus(焦段状态)  hover(悬停状态) */
/* 鼠标放上去之前 */
ul li{
    background: red;
}
ul li:hover{
    background: blue;
}
/*  原本的原色 */
input{
    background: blue;
}
/* 开始输入数据 */
input:focus{
    background: red;
}
/* 鼠标悬停 */
input:hover{
    background: yellow;
}

③.其他伪类选择器：
:not() 代表过滤掉某个或某些元素
在这里插入图片描述
注意：如果想排除多个元素，应该这样书写选择器Selector1:not(Selector2):not(Selector3)…

 <!-- 鼠标放上去之前是红色，放上去之后是绿色 -->
    <ul>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="java">qcby</li>
        <li>qcby</li>
        <li class="php">qcby</li>
    </ul>

/* 排除class是.java的 */
li:not(.java){
    background: red;
}

/* 排除class是.java的和.php的 */
li:not(.java):not(.php){
    background: red;
}

5. CSS选择器优先级规则

规则1：
选择器写的越准确（越长），优先级越高
规则2：
优先级高低：ID选择器>class选择器>元素选择器
规则3：
同级别同长度下，css代码按照顺序执行，后面的代码把前面的代码覆盖，即样式效果覆盖
规则4（终极规则）：
以上规则适用绝大部分场景，若特殊场景不适用时，自行测试

6. 脚本修改CSS样式

①.步骤：
在这里插入图片描述
注意：脚本中的css属性书写时，要按照驼峰写法书写，例如：静态css中的font-size,在脚本中要写成fontSize

②.修改行内css样式：

<script>
       function changeBg(){
           var bg = "";
           for(var i=0;i<6;i++){
                bg += Math.round(Math.random()*9);
           }
           //obj.style.属性名 = 属性值
           document.body.style.backgroundColor = "#"+bg;
           
       }
document.onclick = changeBg;

③.修改HTML元素的class属性值：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

曲线生成 | 图解B样条曲线生成原理(附ROS C++/Python/Matlab仿真)

曲线生成 | 图解B样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 控制点计算之插值2 控制点计算之近似3 仿真实现3.1 ROS C实现3.2 Python实现3.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法、智能算法等)&a…
阅读更多...
990-11产品经理:Team Building in Project Management 项目管理中的团队建设

990-11产品经理:Team Building in Project Management 项目管理中的团队建设

Introduction One of the most important developments in management during the 1970’s has been the widespread application广泛应用 of project teams to a variety of complex tasks. Project managers quickly learn the critical significance批判意义 of the effect…
阅读更多...
Android RecyclerView 如何展示自定义列表 Kotlin

Android RecyclerView 如何展示自定义列表 Kotlin

Android RecyclerView 如何展示自定义列表 Kotlin 一、前提 有这么一个对象 class DeviceDemo (val name: String, val type: String, val address: String)要展示一个包含这个对象的列表 bluetoothDevices.add(DeviceDemo("bb 9800", "LE", "32:…
阅读更多...
Qt QWiget 实现简约美观的加载动画 第三季

Qt QWiget 实现简约美观的加载动画 第三季

&#x1f603; 第三季来啦 &#x1f603; 这是最终效果: 只有三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QVBoxLayout> #include <QGridLayout> int main(int argc, char *argv[]…
阅读更多...
《Docker 简易速速上手小册》第8章 Docker 在企业中的应用（2024 最新版）

《Docker 简易速速上手小册》第8章 Docker 在企业中的应用（2024 最新版）

文章目录 8.1 Docker 在开发环境中的应用8.1.1 重点基础知识8.1.2 重点案例&#xff1a;Python Web 应用开发环境8.1.3 拓展案例 1&#xff1a;Python 数据分析环境8.1.4 拓展案例 2&#xff1a;Python 自动化测试环境 8.2 Docker 在生产环境的实践8.2.1 重点基础知识8.2.2 重点…
阅读更多...
R语言在生态环境领域中的应用

R语言在生态环境领域中的应用

R语言作为新兴的统计软件&#xff0c;以开源、自由、免费等特点风靡全球。生态环境领域研究内容广泛&#xff0c;数据常多样而复杂。利用R语言进行多元统计分析&#xff0c;从复杂的现象中发现规律、探索机制正是R的优势。为此&#xff0c;本课程以鱼类、昆虫、水文、地形等多样…
阅读更多...
精品基于springboot健身房管理系统-教练会员卡管理

精品基于springboot健身房管理系统-教练会员卡管理

《[含文档PPT源码等]精品基于springboot健身房管理系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;HTML5,CS…
阅读更多...
异常统一处理：Exception（兜底异常）

异常统一处理：Exception（兜底异常）

一、引言 本篇内容是“异常统一处理”系列文章的重要组成部分&#xff0c;主要聚焦于对 Exception&#xff08;兜底异常&#xff09; 的原理解析与异常处理机制&#xff0c;并给出测试案例。 关于 全局异常统一处理 的原理和完整实现逻辑&#xff0c;请参考文章&#xff1a; 《…
阅读更多...
docker搭建zookeeper集群

docker搭建zookeeper集群

文章目录 1. 集群搭建2. Leader选举3. Zookeeper集群角色 1. 集群搭建 这里我们使用docker-compose 搭建伪集群 version: 3.1 services:zoo1:image: zookeeperrestart: alwayscontainer_name: zoo1ports:- 2181:2181volumes:- /home/zk/zoo1/data:/data- /home/zk/zoo1/datal…
阅读更多...
【数据结构初阶 7】二叉树：链式二叉树的基本操作实现

【数据结构初阶 7】二叉树：链式二叉树的基本操作实现

文章目录 &#x1f308; Ⅰ 定义二叉树结点&#x1f308; Ⅱ 创建二叉树结点&#x1f308; Ⅲ 遍历二叉树1. 先序遍历2. 中序遍历3. 后序遍历4. 层序遍历 &#x1f308; Ⅳ 销毁二叉树 &#x1f308; Ⅰ 定义二叉树结点 1. 每个结点都由三部分组成 数据域&#xff1a;存储本结…
阅读更多...
【JVM】线上一次fullGC排查思路

【JVM】线上一次fullGC排查思路

fullGC问题背景 监控告警发现&#xff0c;今天开始我们线上应用频繁出现fullGC&#xff0c;并且每次出现后磁盘都会被占满 查看监控 查看监控发现FULLGC的机器均为同一个机房的集器&#xff0c;并且该机房有线上error报错&#xff0c;数据库监控对应的时间点也有异常&#x…
阅读更多...
Vue3 路由配置 + 路由跳转 + 路由传参（动态路由传参 + 普通路由传参）

Vue3 路由配置 + 路由跳转 + 路由传参（动态路由传参 + 普通路由传参）

Vue Router&#xff1a; Vue.js 的官方路由。它与 Vue.js 核心深度集成&#xff0c;让用 Vue.js 构建单页应用变得轻而易举。 效果 一、介绍 1、官方文档&#xff1a;https://router.vuejs.org/zh/introduction.html 介绍 | Vue RouterVue.js 的官方路由https://router.vuejs.…
阅读更多...
Java/Python/Go不同开发语言基础数据结构和相关操作总结-GC篇

Java/Python/Go不同开发语言基础数据结构和相关操作总结-GC篇

Java/Python/Go不同开发语言基础数据结构和相关操作总结 1. 常见gc方式1.1 gc判断对象是否存活1.2 引用计数法1.2 标记-清除算法1.3 复制算法1.4 标记-压缩算法1.5 分代收集算法 2. java的gc方式以及垃圾回收器2.1 gc方式2.1 gc回收器2.1.1 Serial收集器2.1.2 ParNew收集器2.1.…
阅读更多...
SSM---Mybatis查询数据库的功能

SSM---Mybatis查询数据库的功能

Mybatis查询数据库的功能流程&#xff1a; 在maven中加入mybatis依赖&#xff0c;mysql驱动依赖创建一张student表创建表对应的实体类&#xff1a;student类&#xff0c;用来保存表中的每行数据创建持久层的DAO接口&#xff0c;用来定义操作数据库的方法创建这个表对应的sql映…
阅读更多...
计算机设计大赛 深度学习图像风格迁移 - opencv python

计算机设计大赛 深度学习图像风格迁移 - opencv python

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…
阅读更多...
IDEA下新建SpringBoot项目详细步骤

IDEA下新建SpringBoot项目详细步骤

在IDEA下使用Spring Initializer&#xff1a; 一、新建项目&#xff0c;利用阿里云网址https://start.aliyun.com/下载项目&#xff0c;来到Spring Initializer模块&#xff1a; 我的jdk是8&#xff0c;构建Maven类型的项目&#xff0c;Java版本选8&#xff0c;Group为公司名。…
阅读更多...
二阶低通滤波器(博途PLC SCL源代码)

二阶低通滤波器(博途PLC SCL源代码)

在学习滤波器之前我们先了解下截止频率的准确定义，周期正弦信号经过传递函数后的输出信号，其幅值衰减-3dB时对应的频率。-3dB的含义是幅值衰减为原来的约0.707。更多滤波器信号处理相关内容请参看下面文章链接： 1、PLC一阶低通滤波器 https://rxxw-control.blog.csdn.net/…
阅读更多...
前端路由与后端路由的区别

前端路由与后端路由的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
JSONVUE

JSONVUE

1.JSON学习 1.概念: JSON是把JS对象变成字符串. 2.作用: 多用于网络中数据传输. JavaScript对象 let person{name:"张三",age:18}//将JS对象转换为 JSON数据let person2JSON{"name":"张三","age":18}; 3.JS对象与JSON字符串转换…
阅读更多...
读人工不智能：计算机如何误解世界笔记03_AlphaGo

读人工不智能：计算机如何误解世界笔记03_AlphaGo

1. 人工智能 1.1. “人工智能”这个词听起来就是电影里的意象 1.1.1. 电影《星际迷航&#xff1a;下一代》中栩栩如生的机器人“数据少校” 1.1.2. 电影《2001太空漫游》中的哈尔9000 1.1.3. 电影《她》中的人工智能系统萨曼莎 1.1.4. 漫威系列漫画和电影中钢铁侠的管家贾…
阅读更多...
最新文章

Copyright @ 2022~2023