css3制作八棱锥_CSS基础八部分-第二部分
emmet语法
1.简介
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
2.快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的, 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
3.快速生成CSS样式语法
CSS 基本采取简写形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;
4.快速格式化代码
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
"editor.formatOnType": true,
"editor.formatOnSave": true
css的复合选择器
1.什么是复合选择器?
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
2.后代选择器 (重要)
定义:
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
语法说明:
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
例子:
3.子选择器 (重要)
定义:
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
(简单理解就是选亲儿子元素)
语法:
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
语法说明:
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
例子:
4.并集选择器 (重要)
定义:
并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
上述语法表示选择元素1 和 元素2。
语法说明:
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
例子:
5.伪类选择器
定义:
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
6.链接伪类选择器
定义:
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接
链接伪类选择器注意事项
为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
记忆法:love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法:
7.:focus 伪类选择器
定义:
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取
例子:
复合选择器总结
css的显示模式
1.什么是元素的显示模式
定义:
元素显示模式就是元素(标签)以什么方式进行显示,比如
作用:
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
2.元素显示模式的分类
2.1、块元素
常见的块元素:
~
、
、
、
、
、
标签是最典型的块元素。
块级元素的特点:
比较霸道,自己独占一行。高度,宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%。是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能放块级元素
标签主要用于存放文字,因此
里面不能放块级元素,特别是不能放
同理,
~
~
等都是文字类块级标签,里面也不能放其他块级元素
等都是文字类块级标签,里面也不能放其他块级元素
2.2、行内元素
常见的行内元素:
、、、、、、、、、
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
相邻行内元素在一行上,一行可以显示多个。高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接特殊情况链接 里面可以放块级元素,但是给 转换一下块级模式最安全
2.3、行内块元素
常见的行内块标签:
、、它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。高度,行高、外边距以及内边距都可以控制(块级元素特点)。
2.4、元素显示模式总结
学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。
3.元素显示模式的转换
简单理解:
一个模式的元素需要另外一种模式的特性 比如想要增加链接 的触发范围。
转换方式
转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块:display: inline-block;
4.单行文字垂直居中的代码
解决方案:
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
简单理解:
行高的上空隙和下空隙把文字挤到中间了,
如果行高小于盒子高度,文字会偏上,
如果行高大于盒子高度,则文字偏下。
css的背景
css的背景
1.背景颜色
样式名称:
background-color 定义元素的背景颜色
使用方式:
其他说明:
元素背景颜色默认值是 transparent(透明)
2.背景图片
样式名称:
background-image 定义元素的背景图片
使用方式:
其他说明:
实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。
3.背景平铺
样式名称:
background-repeat 设置元素背景图像的平铺
使用方式:
4.背景图片位置
样式名称:
background-position 属性可以改变图片在背景中的位置
使用方式:
参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
其他说明:
1、参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
5.背景图片固定
样式名称:
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
使用方式:
其他说明:
background-attachment 后期可以制作视差滚动的效果。
6.背景样式合写
背景合写样式:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
使用方式:
7.背景色半透明
CSS3 提供了背景颜色半透明的效果。
使用方式:
最后一个参数是 alpha 透明度,取值范围在 0~1之间我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
注意:
背景半透明是指盒子背景半透明,盒子里面的内容不受影响CSS3 新增属性,是 IE9+ 版本浏览器才支持的,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
8.背景总结
CSS基础回顾:CSS基础八部分-第一部分
标签回顾:网页开发网页的相关概念你知道吗?
表格回顾:网页开发之表格用法,该如何制作?
css3制作八棱锥_CSS基础八部分-第二部分相关推荐
- css3制作八棱锥_CSS 绘制各种形状
说明 使用 CSS 可以绘制出许多形状,比如三角形.梯形.圆形.椭圆,等 并不只是可以绘制矩形.下面来看看怎么实现这些形状的吧. 为了容易理解,文章分为基本形状 和 组合形状来说,基本形状是比较容易实 ...
- creator 跳跃弧线_(转)CocosCreator零基础制作游戏《极限跳跃》八、添加游戏积分系统...
CocosCreator零基础制作游戏<极限跳跃>八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的地方就是我们的游 ...
- C++学习基础八——重载输入和输出操作符
C++学习基础八--重载输入和输出操作符 一.重载输入操作符的要点: 1.返回值为istream &. 2.第一个参数为istream &in. 3.第二个参数为自定义类型的引用对象( ...
- html5游戏制作入门系列教程(八)
今天,我已经准备了一个新的游戏 – SkyWalker.基本上 – 这是用飞飞行模拟射击类游戏.我们的目标到达终点线.这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动 ...
- Socket基础八:网络IO模型的应用
Socket基础八:网络IO模型的应用 作者:刘磊 2020.4.27 参考书目:<Windows网络编程>刘琰等著 一.实验目的 1)掌握WindowsI/O操作的基本原理. 2)掌握阻 ...
- 视频教程-三十八课时零基础matlab精通优化算法-Matlab
三十八课时零基础matlab精通优化算法 图像和算法等领域有多年研究和项目经验:指导发表科技核心期刊经验丰富:多次指导数学建模爱好者参赛. 宋星星 ¥100.00 立即订阅 扫码下载「CSDN程序员学 ...
- 八、Python基础(综合演练:飞机大战)
八.Python基础(综合演练:飞机大战) 目录: 八.Python基础(综合演练:飞机大战) 一.模块 1.利用 pip 安装 pygame 模块 2.图片素材下载 二.pygame 模块初识 1. ...
- css过渡 取消过渡_CSS基础知识:CSS3过渡
css过渡 取消过渡 随着CSS3在网络上的推广,它带来了一些有趣的新演示技术. 今天,我们将回顾使用CSS3过渡和动画的基础知识,以增加额外的修饰. 本教程包括Tuts + Premium成员可用的 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
最新文章
- 程序员必知的7种软件架构模式
- 2022版全球及中国消防设备市场营销策略分析与竞争趋势展望报告
- 60多套html5移动端模板_美容整形高保真移动端原型模板发布
- mysql 定时同步数据_MySQL数据同步之otter
- 蔡砚刚:uAVS3对标x265 veryslow将节省30%码率
- java系列4:数组初始化(省略格式)
- 【移动开发】startForeground()让服务保持前台级别
- setuna.exe在win10下使用,桌面自动放大问题
- Mimics-基础操作教程-1
- Windows 环境下 onenote中表格插入行和列的问题
- Clipboard.js实现复制文本到剪贴板功能
- 手机拍照就能实现的免费文档扫描,告别打印店扫描和付费软件
- SQL Server 2000 数据库安装与配置图文教程
- iis 值不在预期的范围错误解决办法
- 基于解决sci和ei等外文思维顺序问题的辅助软件分析
- 50道MySQL面试题,掌握之后你将获得无上法力,一发不可收拾!
- 无法启动此程序因为计算机丢失msvcr110.dll,Win7运行程序提示计算机中丢失msvcr110.dll如何解决...
- echarts 柱状图,分别给每个柱子设置不同的颜色
- h3c sr6608路由器IP限速
- 最大流与最小割(Maxflow与Mincut)
热门文章
- 卓老师 ,k车模能自制吗?
- 通用双谐振固态特斯拉驱动器 UD2.7
- 手持红外温度计AR802B
- js判断是由含有a节点_如何在 JS 中判断数组是否包含指定的元素(多种方法)
- 苏教版四下用计算机计算,苏教版四年级下册数学单元测试-4.用计算器计算 (含答案)...
- c++重定向后恢复_【STM32CubeIDE】重定向printf
- ptpd和ptp4l 软件核心算法
- oracle找不到mts,oracle 11g启动时找不到OracleMTSRecoveryService的解决方法
- 科技边框_智能手机窄边框喷射点胶机欧力克斯
- kettle 日志存到mysql_kettle作业(job)调用转换,设置变量,写日志到数据库中【转】...