黑马官网最新2024前端就业课V8.5笔记---CSS篇（1）

Css 定义

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)

Css 引入方式

内部样式表：

CSS 代码写在 style 标签里面

外部样式表: 开发使用

CSS 代码写在单独的 CSS 文件中(.css)

在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式:配合 JavaScript 使用
CSS 写在标签的 style 属性值里

<div style="color: red; font-size:20px;">这是 div 标签</div>

选择器

作用:查找标签,设置样式。

基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器

标签选择器:使用标签名作为选择器 → 选中同名标签设置相同的样式。

<style>
p {
color: red;
}
</style>

注意:标签选择器无法差异化同名标签的显示效果。

类选择器

作用:
查找标签,差异化设置标签的显示效果。

<style>
/* 定义类选择器 */ 
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

  • 类名自定义，不要用纯数字或中文，尽量用英文命名
  • 一个类选择器可以供多个标签使用
  • 一个标签只可以使用一个class 但是可以使用多个类名，类名之间用空格隔开

Id选择器

作用:
查找标签,差异化设置标签的显示效果。

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

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

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

通配符选择器

作用:
查找页面所有标签,设置相同样式。

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

* {
color: red;
}

经验:
通配符选择器可以用于清除标签的默认样式,例如:标签默认的外边距、内边距

复合选择器

在这里插入图片描述

后代选择器

在这里插入图片描述

<style>
div span {
color: red;
}
</style>

** 后代选择器，选中所有后代，包含儿子、孙子、重孙子… **

子代选择器

在这里插入图片描述

<style>
div > span {
color: red;
}
</style>

并集选择器

在这里插入图片描述

<style>
div,
p,
span {
color: red;
}
</style>

交集选择器–了解

在这里插入图片描述

  <style>/* 既又的关系：既是 p 标签，又是有 box 类 */p.box {color: red;}</style>

伪类选择器

在这里插入图片描述

<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>

伪类-超链接（扩展）

在这里插入图片描述

结构伪类选择器

作用： 根据元素的结构关系查找元素
在这里插入图片描述

<style>第一个 li:first-child {background-color: green;} 最后一个 li:last-child {background-color: green;} 任意个 li:nth-child(3) {background-color: green;} li:nth-child(1) {background-color: green;}</style>

伪元素选择器

作用： 创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器说明
E::before在E元素里面最前面添加一个伪元素
E:after在E元素里面最后面添加一个伪元素

注意点：

  • 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同

文字控制属性

字体大小

在这里插入图片描述

<style>/* 经验：谷歌浏览器文字有默认大小 16px */p {/* font-size 属性必须有单位，否则属性不生效 */font-size: 30px;}</style>

字体粗细

在这里插入图片描述

<style>h3 {font-weight: 400;}div {font-weight: 700;}</style>

字体样式（是否倾斜）

在这里插入图片描述

<style>em {font-style: normal;}div {font-style: italic;}</style>

行高

在这里插入图片描述

在这里插入图片描述

 <style>p {font-size: 20px;/* line-height: 30px; *//* 行高值是数字，表示是当前标签字体大小的倍数 */line-height: 2;}</style>

行高-垂直居中

文字垂直居中： 行高属性值等于盒子高度属性值
注意： 该技巧适用于单行文字垂直居中效果

<style>div {height: 100px;/* 注意：只能是单行文字垂直居中 */line-height: 100px;}</style>

子体族

在这里插入图片描述
在这里插入图片描述
了解
font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

文字复合属性

使用场景：设置网页文字公共样式
在这里插入图片描述

文本缩进

在这里插入图片描述

<style>p {text-indent: 2em;font-size: 30px;}</style>

文本对齐方式

**作用：** 控制内容水平对齐方式

 <style>h1 {/* 本质：居中的是文字内容，不是标签 *//* text-align: left; */text-align: center;/* text-align: right; */}</style>

水平对齐方式 – 图片

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>

文本修饰线

在这里插入图片描述

color 文字颜色

属性名 color
属性值
在这里插入图片描述

调试工具

谷歌浏览器

作用： 检查、调试代码；帮助程序员发现代码问题、解决问题
使用：

  • 打开浏览器 按f12
  • 使用调试工具

PxCook

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

  • 开发面板（自动智能识别）
  • 设计面板（手动测量尺寸和颜色）

使用步骤
创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

CSS 三大特性

继承性

继承性：
子级默认继承父级的文字控制属性
注意：
如果标签有默认文字样式会继承失败。

层叠性

在这里插入图片描述
注意：
选择器类型相同则遵循层叠性，否则按选择器优先级判断

优先级

优先级：
也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：
选择器优先级高的样式生效。
公式：
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）

优先级 – 叠加计算规则

叠加计算：
如果是复合选择器，则需要权重叠加计算
公式：（每一级之间不存在进位）
在这里插入图片描述
规则：

  • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
  • !important 权重最高
  • 继承权重最低

Emmet 写法

Emmet写法：
代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。
在这里插入图片描述

背景属性

背景色

background-color

背景图

在这里插入图片描述

  <style>/* 盒子是 400 * 400 */div {width: 400px;height: 400px;/* 背景图默认是平铺（复制）的效果 */background-image: url(./images/1.png);}</style>

背景图平铺方式

属性名： background-repeat（bgr）
属性值：
在这里插入图片描述

  <style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);/* 不平铺：盒子的左上角显示一张背景图 */background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>

背景图位置

属性名：
background-position（bgp）
属性值：
水平方向位置 垂直方向位置

  • 关键字
    -在这里插入图片描述
  • 坐标 （数字+px，正负都可以）
    水平：正数向右；负数向左
    垂直：正数向下；负数向上

注意：

  • 关键字取值方式写法，可以颠倒取值顺
  • 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
  <style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;左上角 background-position: 0 0; background-position: left top; 右下角background-position: right bottom;水平：正数向右，负数向左 background-position: 50px 0; background-position: -50px 0; 垂直：正数向下，负数向上 background-position: 0 100px; background-position: 0 -100px; 特殊写法 background-position: bottom left; 关键字可以只写一个，另一个方向居中 background-position: bottom; 只写一个数字表示水平方向，垂直方向居中 background-position: 50px;}</style>

背景图缩放

作用： 设置背景图大小

属性名： background-size（bgz）

常用属性值：

  • 关键字
    cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
    contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
  • 百分比：根据盒子尺寸计算图片大小
  • 数字 + 单位（例如：px）
  <style>div {width: 500px;height: 300px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 background-size: contain; cover：图片完全覆盖盒子，可能导致图片显示不全 background-size: cover; /100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 background-size: 100%;}</style>

背景图固定

作用： 背景不会随着元素的内容滚动。
属性名： background-attachment（bga）
属性值： fixed

  <style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}</style>

背景复合属性

属性名： background（bg）
属性值： 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

  <style>div {width: 400px;height: 400px;/* background: pink url(./images/1.png) no-repeat center bottom/cover; */background: pink url(./images/1.png) no-repeat center bottom/contain;}</style>

显示模式

块级元素

  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效

行内元素

  • 一行可以显示多个
  • 设置宽高属性不生效
  • 宽高尺寸由内容撑开

行内块元素

  • 一行可以显示多个
  • 设置宽高属性生效
  • 宽高尺寸也可以由内容撑开

转换显示模式

属性名： display
属性值：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

下载pytorch报错：没有发现某个版本

下载pytorch报错：没有发现某个版本

报错如下&#xff1a; 解决&#xff1a; 降级python版本&#xff0c;显卡小于等于 11.3 时&#xff0c;下载pytorch gpu时&#xff0c;python版本选择&#xff1a;3.7即可。
阅读更多...
cuda、pytorch-gpu安装踩坑！！！

cuda、pytorch-gpu安装踩坑！！！

前提&#xff1a;已经安装了acanoda cuda11.6下载 直接搜索cuda11.6 acanoda操作 python版本3.9 conda create -n pytorch python3.9conda activate pytorch安装Pytorch-gpu版本等包 要使用pip安装&#xff0c;cu116cuda11.6版本 pip install torch1.13.1cu116 torchvi…
阅读更多...
音视频入门基础：H.264专题（17）——FFmpeg源码中，获取H.264视频的profile的实现

音视频入门基础：H.264专题（17）——FFmpeg源码中，获取H.264视频的profile的实现

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…
阅读更多...
LeetCode --- 421周赛

LeetCode --- 421周赛

题目列表 3334. 数组的最大因子得分 3335. 字符串转换后的长度 I 3336. 最大公约数相等的子序列数量 3337. 字符串转换后的长度 II 一、数组的最大因子得分 数据范围足够小&#xff0c;可以用暴力枚举移除的数字&#xff0c;得到答案&#xff0c;时间复杂度为O(n^2)&#…
阅读更多...
Linux下Java的多种方式安装

Linux下Java的多种方式安装

Linux下Java的多种方式安装 博客&#xff1a; www.lstar.icu 开源地址 Gitee 地址&#xff1a; https://gitee.com/lxwise/iris-blog_parent Github 地址&#xff1a; https://github.com/lxwise/iris-blog_parent 序言 Java是一门面向对象的编程语言&#xff0c;不仅吸收了…
阅读更多...
易灵思fpga pwm生成报错

易灵思fpga pwm生成报错

避免复杂总线 选择正确板子 这个是是全部执行 但是不会自动保存 注意设置 或者使用其他文本显示工具 可能约束会掉 注意复位后没有程序 注意软件不同电脑可能报错 问题未知 尽量简单逻辑
阅读更多...
JavaEE初阶--servlet篇（三）HttpServlet/response/request对应方法使用

JavaEE初阶--servlet篇（三）HttpServlet/response/request对应方法使用

文章目录 1.总括说明2.httpservlet父类2.1方法介绍2.2dopost方法的演示2.3doput方法的演示 3.HttpServletRequest类3.1方法说明3.2方法使用演示3.3getparameter方法使用3.4使用form表单的方式3.5jackson获取参数 4.HttpResponse类4.1设置状态码4.2自动进行刷新4.3重定向跳转4.3…
阅读更多...
矩阵起源 CEO 王龙出席 1024 超互联（苏州）总部节点发布会

矩阵起源 CEO 王龙出席 1024 超互联（苏州）总部节点发布会

10月24日&#xff0c;矩阵起源 CEO & 创始人王龙出席了由中关村超互联新基建产业创新联盟、数字人民币研究院联合主办&#xff0c;世纪互联承办的“超互联&#xff08;苏州&#xff09;总部节点发布会”&#xff0c;并分享了矩阵起源及世纪互联在多模态AI数据智能平台与超互…
阅读更多...
大数据-202 数据挖掘 机器学习理论 - 决策树 sklearn 绘制决策树 防止过拟合

大数据-202 数据挖掘 机器学习理论 - 决策树 sklearn 绘制决策树 防止过拟合

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…
阅读更多...
LTE及EPC技术原理（笔记）

LTE及EPC技术原理（笔记）

无线网络发展历史 20世纪80年代&#xff1a;模拟技术和FDMA 20世纪90年代&#xff1a;数字技术和TDMA 21世纪初&#xff1a;数字技术和CDMA LTE进步 下行100Mbps&#xff0c;上行50Mbps 用户面时延10-20ms&#xff0c;控制面时延小于100ms 带宽从1.4MHz~20MHz&#xff0…
阅读更多...
域用户账户与域组账户管理实战

域用户账户与域组账户管理实战

Windows Server 通过建立账户(包括用户账户和组账户)并赋予账户合适的权限&#xff0c;保证使用网络和计算机资源的合法性&#xff0c;以确保数据访问、存储和交换服从安全需要。 如果是单纯的工作组模式的网络&#xff0c;需要使用“计算机管理”工具来管理本地用户和组&#…
阅读更多...
C++类与对象（中）

C++类与对象（中）

类的默认成员函数 1. 默认成员函数&#xff0c;就是用户没有去显式实现&#xff0c;而编译器会自动生成的成员函数。 2. 对于⼀个类&#xff0c;一般情况下&#xff0c;编译器会默认生成6个默认成员函数。我们主要学习前面4个默认成员函数&#xff0c;对于后面两个默认成员函数…
阅读更多...
HFSS 3D Layout中Design setting各个选项的解释

HFSS 3D Layout中Design setting各个选项的解释

从HFSS 3D LAYOUT菜单中&#xff0c;选择Design Settings打开窗口&#xff0c;会有六个选项&#xff1a;DC Extrapolation, Nexxim Options, Export S Parameters, Lossy Dielectrics, HFSS Meshing Method, and HFSS Adaptive Mesh. DC Extrapolation 直流外推 直流外推分为标…
阅读更多...
Python绘制爱心

Python绘制爱心

文章目录 系列目录写在前面技术需求完整代码代码分析写在后面 系列目录 序号直达链接爱心系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python漂浮爱心代码7Python爱心光波代…
阅读更多...
C++ | Leetcode C++题解之第538题把二叉搜索树转换为累加树

C++ | Leetcode C++题解之第538题把二叉搜索树转换为累加树

题目&#xff1a; 题解&#xff1a; class Solution { public:TreeNode* getSuccessor(TreeNode* node) {TreeNode* succ node->right;while (succ->left ! nullptr && succ->left ! node) {succ succ->left;}return succ;}TreeNode* convertBST(TreeNo…
阅读更多...
Linux基础命令（十）之 压缩命令 zip，gzip，bzip2，xz，tar

Linux基础命令（十）之 压缩命令 zip，gzip，bzip2，xz，tar

目录 一&#xff0c;zip和unzip 常见用法 二&#xff0c;gzip和ungzip命令 常见用法 三&#xff0c;bzip2和bunzip2命令 常见用法 四&#xff0c;xz和unxz命令 常见用法 五&#xff0c;归档命令tar 参数及其作用 常见用法 一&#xff0c;zip和unzip 语法&#xff1a;…
阅读更多...
已解决，部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘

已解决，部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘

部署GPTSoVITS过程中&#xff0c;开启一键三连进程发生&#xff0c;报错AsyncRequest object has no attribute _json_response_data 具体报错内容为 (GPTSoVITS) PS D:\Code\GPT-SoVITS-beta0706> python webui.py Running on local URL: http://0.0.0.0:9874 IMPORTANT:…
阅读更多...
ISUP协议视频平台EasyCVR视频融合平台接入各类摄像机的方法

ISUP协议视频平台EasyCVR视频融合平台接入各类摄像机的方法

安防视频监控ISUP协议视频平台EasyCVR兼容性强、支持灵活拓展&#xff0c;平台可提供视频远程监控、录像、存储与回放、视频转码、视频快照、告警、云台控制、语音对讲、平台级联等视频能力。 想要将摄像机顺利接入EasyCVR平台&#xff0c;实现视频监控的集中管理和分发&#x…
阅读更多...
to_sql报错not all arguments converted during string formatting

to_sql报错not all arguments converted during string formatting

报错&#xff1a; DatabaseError: Execution failed on sql SELECT name FROM sqlite_master WHERE typetable AND name?;: not all arguments converted during string formattingb 报错的代码如下&#xff1a; import pymysql import pandas as pd con pymysql.connect(…
阅读更多...
7.机器学习--K-means算法（聚类）

7.机器学习--K-means算法（聚类）

聚类分析是在没有给定划分类别的情况下&#xff0c;根据数据相似度进行样本分组的一种方法。与分类模型需要使用有类标记样本构成的训练数据不同&#xff0c;聚类模型可以建立在无类标记的数据上&#xff0c;是一种非监督的学习算法。 聚类的输入是一组未被标记的样本&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023