本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

文章目录

  • 更多的样式
    • 透明度
    • 鼠标
    • 盒子隐藏
    • 背景图
      • 涉及的css属性
  • 参考资料

更多的样式

透明度

  1. opacity 设置的是整个元素的透明度，取值为0-1
  2. 在颜色位置设置alpha通道（rgba）

鼠标

cursor 默认auto（浏览器自行控制）、pointer小手…

cursor:url(“./img/target.ico”),auto; 还可以设置图片（后缀名为ico/cur），得加上后面的auto，就是告诉浏览器前面设置失效的话，可以用浏览器自带的

盒子隐藏

  1. display：none; 不生成盒子，但是会影响其他盒子
  2. visibility：hidden; 生成盒子，只是从视觉上移除盒子，盒子仍然占据空间（默认visible）

背景图

img元素是属于html的概念，背景图属于css的概念

  1. 当图片属于网页内容时，必须使用img元素
  2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

  1. background-image
    默认情况下，背景图会在横坐标和纵坐标上进行重复

  2. background-repeat

repeat/repeat-x/repeat-y/no-repeat

  1. background-size

contain 完整显示到区域，且比例不变
cover 撑满区域，且比例不变
数值或比例 相对于盒子的大小，只写一个数值表示横向撑满，纵向按比例缩放；写俩数值则是横纵各自的比例

  1. background-position 位置

预设值：left/right/top/bottom/center
也可以写数值或百分比

background-position: 50% 50%; 居中

eg: background-position :0px -23px;

雪碧图（精灵图） （sprite）

  1. background-attachment 通常用来设置背景图是否固定

  2. 背景图和背景颜色混用

  3. 速写（简写）属性
    background-position、background-size都是数值可能会冲突 浏览器要求先写位置再写尺寸 50% 50%/100%

background:url(“imgs/main_bg.jpg”) no-repeat 50% 50%/100% fixed #000;
… center/100% …
每个位置都可以不写

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码

CSS基础（14）- 更多的样式相关推荐

  1. CSS基础 外部样式表 内嵌样式表 行内样式表

    CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...

  2. CSS基础(21)_字体样式、图标字体

    字体相关的样式 color            前景色,主要用来设置字体颜色 font-size       字体的大小 em               相当于当前元素的一个字体大小(font-s ...

  3. 前端笔记之CSS基础 - 字体和文本样式

    目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...

  4. CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

    前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...

  5. html css标记文本,HTML图像标记和CSS核心基础和文本相关样式

    HTML常用图像格式 1.GIF格式 GIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失.再加上GIF支持透明(全透明或全不透明),因此很适 ...

  6. 我的前端学习之CSS基础--选择器、字体、非布局样式、背景

    CSS基础 选择器 半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...

  7. CSS基础：基础选择器、字体和文本样式

    CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式 基础认知 学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...

  8. CSS基础样式属性设置

    文章目录 css基础样式与属性设置 一.宽和高 二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...

  9. Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)

    CSS语法基础 一.单纯html控制样式的缺点 二. CSS✪✪✪ CSS概述 CSS基础语法 组成 选择器 标签选择器 类选择器 id选择器 通配选择器 后代选择器 插入样式表的三种方式 行内样式 ...

最新文章

  1. Docker核心技术之Dockerfile
  2. 别挖我的墙脚！乔布斯生前邮件竟爆出秘密协议
  3. webuploader结合php实现图片上传到本地和保存数据库
  4. java三大范_Java深度学习系列——数据库的三大范式
  5. Deepgreen数据库日志清理脚本
  6. java if和else if的区别_关于C语言中if，elseif和else的区别在哪里
  7. gdiplus判断一个点是否在圆弧线上_面试前必读！！！原生JS补给(上)
  8. 基于JAVA+Swing+MYSQL的电影院购票管理系统
  9. android ddmlib,通过 ddmlib 使用 adb，构建框架基础库
  10. 实现简单的web框架
  11. DeepLab图像分割
  12. [Python从零到壹] 十八.可视化分析之Basemap地图包入门详解
  13. c语言不用死等的延时函数,matlab延时函数怎么写
  14. 117. 请简述文本文件和二进制文件的区别
  15. C# 模拟鼠标移动和点击
  16. mysql中的不等于
  17. Python+opencv 人脸识别
  18. c语言规定 程序中各函数之间().,C语言基础笔试题
  19. 《微波原理与技术》学习笔记2传输线理论-传输线方程的推导与求解
  20. 设置网络唤醒电脑（WAKE ON LAN,WOL）

热门文章

  1. 手把手教你使用Django如何连接Mysql
  2. C语言计算长方体体积的代码（代码中稍加美化了一下）
  3. 180119 杂项-生物特征识别原理和绕过
  4. 【AIGC使用教程】AutoGPT 安装使用完全教程
  5. fieldset lengend
  6. 高级灰+中国红，这才是家应该有的样子
  7. 拓端tecdat|R语言向量误差修正模型 (VECMs)分析长期利率和通胀率影响关系
  8. 图像矫正：桶形畸变矫正的原理及python简易实现与加速
  9. selenium报异常：it is not in the current frame context, or the document has been refreshed
  10. C语言（百钱买百鸡问题）