- 为什么需要计算机
对于现在的我们来说,每天要处理的信息是巨大的,所以如果还是人工的来对这些数据进行处理,那么效率是很低的。此时计算机的出现就可以帮助我们的来提高处理数据的速度。
- 计算机是什么
计算机就是一台自动高效完成计算的电子设备,我们俗称叫电脑(pc)
- 计算机的特点
- 计算机可以进行教学和逻辑运算。(逻辑运算可以实现在接收到不同操作指令的时候做出不同的响应)
- 计算机可以对数据进行记忆和存储。(数据不仅仅只是数字。图片 文字 声音 视频……)
- 计算机可以在程序的指令下自动高效地完成计算。
- 计算机的组成
- 从大的系统分类上我们将计算机的组成分为:软件系统+硬件系统
- 硬件:我们就可以认为是组成计算机的那些物理设备(看得见 摸得着)
- 软件:所谓的软件就是安装在计算机上供用户使用的操作指令集合。
- 硬件系统
一、为什么需要硬件
任何的计算操作,最终都需要通过相应的硬件来完成。
二、硬件的组成
1.现代的电子计算机我们依据“冯诺依曼“理论将它的硬件分为五个部分。
2.输入设备:核心作用就是给计算机输入不同格式的数据。
3.输出设备:作用就是将计算机处理之后的数据以不同的形式展示给用户。
4.控制器+处理器:这2个部分合在一起就是我们所说的中央处理器(CPU
5.存储设备”我们将计算机当中的存储器分为内存和外存两种,无论哪一种,它的作用都是对数据进行存储。
三、内存与外存
1.内存:就是我平常所说的内存条,它的大小一般在(4G-16G)
2.外存:外存的表现形式很多,例如硬盘(128G-1T)
四、内存与外存比较
1.内存的运算速度要快于外存
2.内存当中的数据断电之后会消失,而外存不会。
3.内存本身我们又分为只读内存(ROM)和随机内存( RAM)
1.3软件系统
一、为什么需要软件
如果计算机要没有软件系统那么它里面的硬件就不知道如何进行工作。
二、软件系统介绍
1.我们人为的将软件系统分为二类:系统软件+应用软件
2.系统分类(操作系统软件):
(1)桌面操作系统:
Windows:有微软推出,用户量很大。分很多系列
MacOS:苹果公司,本质也是一个Linux分支。
Linux:核心内容是由李纳斯编写,应用软件少。
(2)移动设备操作系统
IOS
Androids:底层就是一款小型的Linux
(3)服务器操作系统
Windows server:由微软推出,是收费的
Linux:开源 稳定
服务器:所谓的服务器我们可以理解为是一台给用户提供相应服务的机器。(文件上传下载服务,视频上传下载服务……)只不过,这台机器的处理能力要远远大于我们的个人电脑。
服务器操作系统查询地址:Site report for http://www.taobao.com | Netcraft
3.应用软件:我们就将那些可以安装在操作系统之上的第三方软件。(微信 QQ……)
1.4二进制基本介绍
一、二进制是什么
1.进制:就是一种人为规定的计算规则。
2.二进制:它就是缝二进一的一种计算规则。
二、二进制介绍
1.二进制里“基数”只有0和1
2.二进制当前被广泛的应用于计算机当中。(计算机底层只能读懂0和1)
三、计算机如何理解0和1
现代的计算机都是通电进行工作,当电流走过设备的时候必然会产生电压。此时前辈们就人为的设定规则。取了一个电压值。比这个值大的叫高电位。用数字1表示。比这个值小的叫低电位。用数字0表示。基于这种原理,此时的计算机就可以认识0和1了。刚好0与1又是二进制当中的基数。(计算机用了二进制)
四、计算机采用二进制的好处
1.二进制技术实现简单,状态稳定。
2.二进制里只有0和1 二个基数,刚好与程序语言当中的真和假对应(全世界都人为的认为1可以代表程序语言中的真,0就可以代表程序语言中的假)
3.二进制数值可以很容易的转成十进制。
1.5常见的数字进制
1二进制:基数就是0 1,缝二进一
2八进制:基数就是0-7,缝八进一
3十进制:基数就是0-9,缝十进一
4十六进制.:基数就是0-9 A B C D E F,缝十六进一
用二进制数数
0 1 10 11 100 101 110 111 1000
1.6进制转换
在线进制转换 (在线进制转换工具地址
一、其它进制转十进制
1.先确定当前数字的位数,然后从右向左数,依次认为是低位到高位。
2.记下每位数字所在的位数N(N不是一个固定的数字,由当前所在位数决定)
3.取出每一位上的数字m,然后用这个m去乘以当前进制的N-1次方。(m也不是固定的,它就是当前位数上所具有的数字)
4.将每位上的相乘结果进行相加,最后的和就是该位数所对应的十进制值。
二、其它进制转二进制
1.十进制转二进制
(1)用这个十进制的数值除以2,得到一个商和余数
(2)判断当前的商是否为0,如果不为0,则继续用这个商去除以2
(3)直到某一次商为0时结束,将这个除法过程当中产生的余数反向排列
(4)最终的排列结果就是当前这个十进制转成二进制后的数值
2.八进制/十六进制转二进制
(1)J将八进制或十六进制中的所有“基数”都转成二进制。(需要注意的就是八进制转二进制要写成三位,而十六进制要写成四位)
(2)有了上述的二进制基数转换之后,当我们拿到一个具体的八进制或十六进制数值之后我们只需要将其进行拼接就可以。
1.7编码
一、编码是什么
所谓的编码指的是将我们人类可以理解的语言编译成计算机可以执行的语言。
二、编码的思想
将我们人类中的自然语言认为的按照一个规则与二进制的数值做对应。当这种对应关系越来越多的时候就会形成一张表,我们将这个表称之为编码表。
三、ascii码表
1.它是全世界第一张通用的单字节编码表、
2.它分为三个部分,一共有256个字符。
3.当我们没有使用正确的编码来处理汉字的时候在网页展示就会乱码。
4.对于中文汉字来说,我们目前使用最多的一种编码标准就是UTF8编码。
1.8数据计量单位
一、为什么需要计量单位
计算机是用来处理数据的,当数据积累到一定的量级之后就会需要相应的单位来对它们进行衡量
二、最基本的计量单位
1.比特(bit/位):它被认为是计算机当中最小的一个单位。
2.字节(bytes):它比位要大一些,人为规定1字节=8位、
三、常见的单位及转换关系
1.1B=8b
2.1KB=1024B (文档 小图片)
3.1MB=1024KB (大图片 音乐)
4.1GB=1024MB (高清的电影)
5.1TB=1024GB
6.1[B=1024GB
1.9编程语言
由人类来设计的一种计算机可以理解的语言
- 编程语言的发展史
- 机器语言
机器语言就是纯二进制,将我们人类想让计算机完成的事情都直接用01来表示。
- 汇编语言
汇编语言就是在机器语言的基础之上将一些常用的操作直接规定成人类的一些语句来表达,但是随着计算机要做的事情越来越多,同时生产计算要的厂商也越来越多,我们不能保证所有的硬件都能很好支持我们的二进制。
- 高级编程语言
它就是一种类似于人类的自然语言。人类很容易理解。同时又不用担心计算机如何识别。当前全世界大概有(600)多种编程语言
- 常见的编程语言
- C语言:我们认为c是高级编程语言的鼻祖。
- C++:它就是c语言的基础上做了简化。更利于我们学习,c语言和c++都是由贝尔实验室推出。
- Java:由sun公司在1995年推出,最大的点是跨平台。(jvm虚拟机)
- C#:有微软推出的一个语言。
- Python:一种数学计算能力很强的语言。
- PHP:这门语言再出生的时候最大的特点就是用来做web网站。
- JavaScript:当前最流行的一种脚本语言。
- Nodejs:全栈型语言,前后端都可以写。
- Go:由谷歌公司推出的一门语言。
1.10常见的DOS命令
一、DOS是什么
DOS是一个操作系统,属于Windows,和我们现在用的win7 8 10去比较其实差别就在于我们现在使用的是图形桌面系统,而DOS是一个命令行执行的操作系统。
二、如今使用DOS
- 进入终端:win+r调出运行面板
- 在运行中输入cmd进入终端
- 在终端面板中书写DOS命令,然后回车执行
- 常见的命令
- time 显示当前计算机的本地时间
- ctrl+c 退出当前正在执行的命令
- shutdown /s /t 时间(秒):设置在多少时间后自动关机(中间有空格)
- shutdown /a 取消之前设置的自动关机
- cls 清空当前正在编辑的屏幕
- ping 网址
- 可以检查当前的网络是否是通的
- 可以得到当前被访问网页的IP地址
- ipconfig -all
- 可以将当前计算机当中的所有网卡信息都列出来
- IP地址:这个地址一般是用来在网络上唯一的标识计算机(一台机器的IP地址可以变)
- Mac地址:也叫物理地址,它是被写入ROM的,理论上每台计算机的mac地址是唯一的
- 上下键:调用我们之前使用过的命令,上建是往回找,下键是往下找
- 切换盘符
具体盘符名称:
- 返回上一级或根目录
Cd .. 返回上一级
Cd / 返回根目录
注意:
Cd 就是change directory 的首字母缩写,表示切换目录的意思
Cd 命令不可以切换盘符
根目录指的是某个盘符的一级目录
命令语句一定都是在英文输入法下面书写的,命令和参数之间往往都是用空格隔开
- 列表示展示某个目录下的内容
Dir
- 目录及文件相关操作
- 新建目录:md 路径
- 新建文件:echo“内容“>文件名称,通过这种方法间接得到一个文件
- 删除目录:rd 路径(默认情况下只能删除空目录,如果想连带它里的文件一起删除需要设置 /s参数)
- 删除文件:del文件名称
注:
- md只能新建目录
- rd默认只能删除空目录
- 参数与命令之间一定要有空格
- 如果del后面直接写的不是文件,而是一个目录,那么它就会将这个目录下的所有文件都删除(前提是我们选择Y)
- 文件的复制和剪命令
Copy 被复制文件路径 将这个文件复制到哪里
Copy aa/aa.txt C:\test\bb.txt 将目录aa下的aa.txt文件复制到c盘text目录下,同时将名称修改为bb
注:
复制操作语句,我们可以分为三段,第一段是命令copy,第二段是被复制文件的所在的,第三段可以指明将当前文件复制到哪里,三段之间都要用空格隔开
第三段可以省略,省略之后的结果就是会将西相应的文件直接复制到我们当前所在位置
Move 被剪切文件所在地 将这个文件剪切到哪里
注:
对于剪切操作来说 必须要进入到想要操作文件所在目录去执行命令
第三段来指明目标所在地的部分不能省略、
1.11Web基本介绍
1.web就是world wide web的缩写,称之为全球广域网,俗称www
2.我们可以将web理解为是当前的一种互联网,对于我们来说更多的是网站服务
3.网站我们可以认为是由多个网页合在一起而形成一种服务
4.web前端就是来负责一个网站当中前台网页里的内容
5.网页是由前端工程师使用HTML语言编写而成的一种文件,它里面会包含文字 图片 超链接 声音 视频……(网页本质就是一个html文件)
1.12HTML基本介绍
一、定义
HyperText markup language超文本标记语言,其中的超指的是它能表达的内容不仅仅只是文字
二、HTML语言发展历史
1.在互联网最初的时候是没有HTML的,我们只能通过网络传输最简单的文字内容
2.随着用户的要求越来越多,同时也是我们的技术不断发展就提出了一种可以表达文字内容之外的语言----HTML1.0
3.在最初的时候就是html1.0---xhml1.0过渡---xhtml2.0(放弃)---html5
1.13HTML网页骨架
1.网页是我们通过HTML语言来书写
2.因为我们需要使用HTML语言来书写网页,所以我们要有相应的书写代码工具(Hubuilder)
3.在我们使用HTML语言去书写网页的过程,我们会发现有一些结构是默认存在的,这个结构我们叫做网页(HTML)骨架
注:
1.DocType html:向浏览器声明当前的文档是 Html.类型。
2 html::它是网页当中最大的一个标签,我们称之为根标签
3.head :网页头的部,它里面的内容是写给浏览器看的。
4 meta::如果有charset那就表示在设置当前网页的显示编码
5 title::网页的标题,它里面的内容会在浏览器的标签页上显示
6 body:网页主体,它里面的内容会显示在浏览器的空白区域内。
1.14 Hubuilder工具使用
一、设置主题
二、设置字体(如果我们想使用某个电脑中默认不存在的字体,那么需要自己先安装)
..
三、安装字体
1.15HTML语法和标签基本介绍
一、HTML标签
所谓的标签就是HTML 语言的发明者人为定义好的一些"单词”,它就相当于我们汉语中的字。
二、语法
语法就是用来定义这些“字”应该如何去解析或者书写的规则。
三、HTML标签中的常见标签及基本语法
1.我们人为的将HTML标签分为单标签和双标签二种
<标签名称</标签名称> (在英文输入法下输入)
<标签名/>
2.常见的标签:
(1)标题标签:在 html当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网页当中,我们只允许出现一个h1。
(2)段落标签:p双标签(3)换行标签: br单标签
(4)空格:
3.标签书写语法
在HTML当中允许多个标签互相嵌套使用,但是不允许交叉嵌套|
1.16图片标签
<img src=”地址”/>
注:
1.img,是一个单标签,它的作用是可以在网页当中插入图片。
2.src 是img标签的属性,它里面的值称之为属性值,具体用来表示想要加载的图片存在哪里。
3.标签的身上可以有属性,属性名与标签名之间用空格隔开。
4.属性值与属性名之间用单等号连接
5..一个标签的身上可以有多个属性,之间都用空格隔开。
二、图片常见的属性
1.src设置图片所在位置
2.Alt当图片加载失败的时候会显示它里面的文字
3.Width/height 分别用来设置图片宽和高,如果只设置了宽度或者高度,那么另外一边会自动缩放。
4.Title当鼠标悬停在图片上的时候会显示它里面的文宁
1.17链接标签
一、语法
<a href=”目标地址”>内容</a>
二、作用
可以实现在当前页面向新页面进行跳转的操作
三、属性I
1.Target这个属性可以设置新页面在哪个窗口打开,当值为_blank 的时候可以在新窗口打开
2.Href的属性值设置为#的时候,可以设置为空链接,它的作用就是当用户点的时候不会发生跳转。
1.18路径
所谓的路径我们可以看做是在程序代码中用来查找某个具体的资源所“走"过的路。例如:C:/Users/Administrator/Desktopl/_book\img\2.png:
一、绝对路径
绝对路径一般是以盘符为起点来进行查找,或者就是一个绝对 URL地址。https://www.baidu.com/img/bd_logo1.png,但是在实际的工作中,我们不建议大家使用绝对路径。
二、相对路径
相对路径就是相对某一个已知的文件为起点进行资源的查找。
1.19相对路径用法
路径是一个通用的存在,我们当以查找图片为例来讲解路径的使用。在实际工作中相对路径使用的频率是最高的。我们人为的将相对路径分为三种:同级路径、下级路径、上级路径。(以查找图片为例的含义就是我们要在一个HTML网页中插入一张HTML 文件之外的图片,同时采用的是相对路径,所以这里的相对起点就是HTML网页)
1.同级路径:同级指的就是HTML 网页和目标图片在同一级目录里。对于同级路径的使用,我们只需要在src 中写入目标图片的名称即可。
2.下级路径:下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个 /来向下进行穿透查找(***下的***)
3.上级路径:图片在 html 文件的上级目录里,此时我们需要使用../来向上回退进行查找。
注:
01上述的路径规则虽然都是以查找图片为例,但是总结的规律适用于其它类型资源的查找。
02 / 表示向下级查找,可以无限级穿透。../ 表示向上级返回,同样可以无限级返回。
1.20表单基本介绍
表单就是一种在互联网上用于收集用户信息的一种结构.在 HTML 当中事先定义好一个标签来完成这件事。标签名称叫 form ,它是一个双标签,我们称之为表单域。
<form action="" method=""></form>
注:
01. form 标签就是HTML 当中定义好的一个用来表示整个表单结构的双标签.我们称之为表单域。
02. form 默认就相当于一张"白纸",如果想让它收集用户的相关信息,HTML 里又准备了很多的表单标签。这些标签里使用最多的一个叫 input 。
03. action属性值表示将当前表单中的数据提交到哪些。
04. method属性值表示以什么样试来提交当前表单中的数据。最常见的就是 get post。其中 get方式就是指将数据在URL 中进行提交.这种方式是明文。所以相对不安全。而POST方式就是指将数据写在HTTP请求的请求体当中()。
1.21常见的表单元素
From标签只负责定义具体的表单整体.它里面如果想要收集用户数据.就必须再有一些能够让用户进行输入填写的模块.此时 HTML 当中就定义许多的表单标签来让用户完成输入。最常见的表单标签就是input,因为标签名称都叫 input,所以HTML当中就设置通过type属性来进行区分。
01文本输入框:<input type="text” />
02密码输入框:<input type="password" />
03提交按钮:<input type="submit"/>
04单选框:<input type="radio”/>
05复选框:<input type="checkbox” />
06文本域:<textarea rows="行数” cols="列数”"></textarea>
07下拉框:
<select>
<option value="">选项1</option>
………..
</select>l
08重置按钮:<input type="reset” />
09普通按钮:<input type=button" value=”按钮”/>
1.22表单元素注意细节
1.name属性: form表单通过不同的表单元素来收集数据,在这个过程中很多的表单元素名称都叫input ,此时如果直接将这些数据提交到后台,就会出现这些数据无法区分的问题,此时为了分别哪个数属于什么样的表单项。我们就人为的在input身上设置name属性。这样一来数据到达后端之后就会变成以下格式: username="swx" pwd="123” gender=”男“....
2.value:它的作用就是定义某些表单元素的默认显示内容(文本输入框、提交按钮、重置按钮、普通按钮)
3.checked:这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。
4.selected:这也是一个属性值等于属性名的属性,添加在下拉选项身上实现某个选项被默认选中。
1.23CSS基本介绍
一、web标准
所谓的 web标准指的就是——系统规范网页书写的要求,它是由 W3C组织制定,在它里面要求网页的结构、样式、行为三者相分离。
二、名词解释
1.结构:就是通过HTML标签搭建的网页的结构
2.样式:就是通过CSS对当前的网页结构进行修饰和美化
3.行为:通过JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互
1.24CSS基本使用
一、定义
CSS在国内被称之为联样式表、层叠样式表、样式表,它的作用就是修饰当前网页中的HTML元素。
二、基本使用步骤
1.CSS与 HTML 可以看做是二门互相独立的语言,此时如果想用CSS来操作 HTML 那么就需要先将二者建立关系。
2 .此时在 HTML 当中就准备了一个叫style的标签(它是一个双标签),在这个标签对之间就可以用来书写我们的 CSS 代码。常见的存放位置可以是head 标签里title标签下。
3.通过CSS的选择器找到我们想要操作的元素然给它设置样式(写在 style标签之中)
1.25体验CSS
1.常见的CSS元素属性:width定义元素宽度单位是 pK , height定义高度.background-color 设置背景颜色。
2.CSS代码书写的固定语法:
选择器{CSS代码}
3.建议大家在开发阶段将 CSS样式分行写,且每行的结尾用;结束。
1.25CSS选择器
一、定义
所谓的CSS选择器就是 CSS中已经定义好的用来选中某些元素的固定语法。它的作用就是选中我们想要设置样式的元素。
二、CSS选择器的分类
在CSS 中有很多种选择器,我们人为的分成二大类:简单选择器+复合选择器。
三、简单选择器:I
1.标签名选择器:通过具体的HTML标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】
2.类名选择器:通过标签类名来选择元素
3.ld选择器:通过id名称选择元素。
1.26类名选择器
一、为什么需要类名选择器
一个完整的网页需要很多标签组合在一起进行编写实现,因为HTML标签的种类有限.所以同名的一个标签有可以会在一个网页中出现多次。此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。
二、类名选择器的基本使用步骤
1 .定义HTML 网页结构.然后在我们想选中的元素身上设置class属性。
2.将我们想要一起选中的元素们身上设置相同的class属性值(类名)
3.此时我们只需要在style 标签中按着固定的语法来调用我们的类名: .类名
1.27Id选择器
一、为什么需要id选择器
如果我们只想从一堆元素当中选中其中的某一个元素,那么就可以使用id选择器。这个id 就和人的身份证号是一样的。
二、ld选择器使用
1.在我们想要选中的元素身上设置一个id属性。
2.给这个 id属性设置一个值,我称为id名。
3.在 style当中通过固定的语法来进行调用:#id名书{}
4.注:要求在一个网页当中不能出现同名的id值【虽然有效果但也不能这么做】
1.28简单选择器总结
1.标签名选择器和类名选择器,默认可以一次性选中多个元素, id名选择器一次只能选中一个元素。
2.一个标签的身上可以既具有类名又具有id名,且这二个属性值是可以相同的。
3.允许一个标签的身上同时设置多个类名,要求多个类名之间用空格隔开。
4.关于id选择器要求一个页面当中同一个id名称只能出现一次。
1.29Id名与类名命名规则
1.名称不能是纯数字或者以数字开头(但是我们经常会以数字结尾)
2.名称不能使用中文
3.名称包含特殊字符(-_)
4.起名字时要做到见名知意
1.30元素展示类型
在 HTML 当中本身定义了很多的元素,这些元素默认在网页上展示的时候会存在自已默认的状态,例如有些元素默认情况下宽高属性不起作用,有些元素默认情况下都独占一行显示。这种现象我们就称之为元素展示类型,为了记忆我们人为的将元素展示类型分为三种:块元素、行内元素、行内块元素。
1.块元素:当同时存在多个块元素的时候,每个块元素都会独占一行显示.且默认情况下它的宽高属性可以起作用。
2.行内元素:当同时存在多个行内元素的时候,这些元素都会显示在一行.如果一行放不下自动折行。默认情况下它的宽高属性不起作用
3.行内块元素:当同时存多个行内块元素的时候,这些元素会显示在一行.默认情况下它的宽高属性起作用。
4.注:不需要去死记哪些元素是行内,哪些是块,哪些是行内块。
1.31布局标签补充
1. div 标签,它是HTML 当中定义好的一个双标签( DIV+CSS)。我们人为的认为它是一个体积最大的标签。
2. span标签它也是一个双标签主要用来放文字,我们人为的认为这体积很小。
3.段落标签里不能包裹标题,因为浏览器不能正常解析。
1.31元素展示类型转换
在我们进行网页布局过程中往往会遇到一些"特殊的模块”,对于这种模块来说我们之前的一些常见标签在使用的时候就会显示“语义”有些不对应,所以我们可以使用相应的标签进行强制的类型转换,从而让它可以展示成设计稿上的样子。在CSS当中看一个display属性,可以设置不同的值来完成元素类型的转换。
1.转成块元素: display: block;
2.转成行内块: display: inline-block
3.转成行内元素: display: inline; none
1.32简单选择器权重
权重:我们就可以理解为是不同类型的CSS选择器在对同一个元素进行样式设置的时候,出现的控制能力不同的现象。
对于简单选择器来说:id选择器>类名选择器> 标签名选择器
1.33CSS特性
1.在权重相同的情况下,同一个元素后写的CSS 样式会覆盖先写的CSS 样式。【覆盖性】
2.CSS的定义存在继承的特点,子元素会继承父元素的一些样式【继承性】
(1)不是所有的CSS属性都可以被继承。
(2)不是所有类型的元素都会去继承祖先元素的样式(继承一般发生在块元素的身
上)
(3)继承指的就是子元素可以使用祖先元素的一些样式
3.不同选择器对同一个元素的CSS控制能力存在着强弱。【优先级】
1.34复合选择器
一、为什么需要复合选择器
在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象,而这种结构模块又很多.大家使用的标签名称又一样。所以此时我们就可以通过复合选择器,将这些简单选择器进行组合。从而让我们选择元素变得简单。
二、常见的复合选择器:
1 .后代选择器:这种选择器就是以某一个元素为起点,将它做为祖先然后不停的向下进行穿透查找,去选择它下面的后代元素。
起点元素 后代元素……{设置样式}
注:
01后代选择器当中的每个部分都可以采用任意的简单选择器代替。
02不同的部分之间要用空格隔开。
03.....就表示可以不停的向下层查找。|
2.并列选择器:就是将多个选择器使用 逗号 进行连接.表示同时选中这些元素,然后设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。
1.35选择器权重总结
1简单选择器:id名>class名 >element名
2复合选择器:需要在大家明白的就是复合选择器由多个其它类型选择器组合而成.为了方便比较,我们人为的给每个简单选择器都定义了一个数值,分别是:ld(100) class(10) ele(1),这三个数值我们也称之为权重值,有了它们之后只需要将当前选择器中出现的权重值进行相加求,最终的结果就是该选择器的权重。数值越大的权重越大
3切记权重比的就是不同选择器对同一个元素的控制力比较(区别继承的影响)
1.36CSS文件存放位置
CSS 代码可以被我们放在很多的地方,习惯性的有三种写法:内嵌CSS、外链CSS、行内CSS。
1.内嵌CSS指的就是将 CSS 代码写在 html 网页中。
2.外链CSS 指的就是就将 CSS代码写在外部的独立CSS 文件中。
3.行内CSS 指的就是将CSS代码写在具体的 HTML 标签身上。
注:
01依据浏览器渲染页面原理,我们选将CSS代码写在 HTML 文件靠前的位置。
02使用外链CSS写法的时候.外部独立的CSS 文件当中不需要写style标签.同时还需通过link标签将某个CSS 文件引入到具体的HTML 文件当中。【rel 属性对不要省略】
<link href=”目录CSS文件路径” type=text/css" rel="stylesheet”/>
03对于上述的三种CSS文件存放位置来说,行内CSS的权重是最高,但是外链与内嵌并不存在谁一定大于谁的现象(权重).它的控制能力完全取决于各自所使用的选择器权重。
04 如果想要直接将某一个样式的权提至最高,我们只需要在该句CSS代码的最后设置!important .
P{ color:pinklimportant; }
1.37音频标签
<audio autoplay controls loop>
降级的说明性文字
<source src="格式1路径”/>
.......
</audio>
注:
01 audio是一个双标签,用来定义一个声音资源模块。
02 autoplay用来设置自动播放。
03 controls调用当前设备的播放控制。
04 loop设置当前音频循环播放。
05默认 audio里的文字不显示、只有在当前浏览器不支持这个标签的时候会显示文字。
1.38常见的文字样式
1.行高: line-height,当我们将行高的大小设置成当前元素的高度时,可以实现单行文本在当前元素中垂直方向居中显示的效果。
2.水平对齐方式: text-align: left | center | right ,分别表示设置文字在当前盒子当中水平的对齐。
3.字体大小: font-size ,单位是px,一般情况下浏览器都会有一个最小的显示字体。
4.字体粗细: font-weight,可以设置关键字,或者数值( 100-900).关键字有normal表示正常,还有bold 表示加粗。
5.字体名称:font-family ,一般常用的就是"微软雅黑""黑体”
6.字体颜色:color,可以设置颜色单词,还可以是十六进制的数字。
1.39文字阴影
一、字体样缩写
Font:文字粗细 大小/行高 字体名称;
Font: bold 20px/200px ‘微软雅黑;
二、CSS3中的文字阴影
Text-shadow: x y r color;
Text-shadow: Opx Opx Opx red;
注:
01 x表示阴影在水平方向的偏移量,可以设置负值,正负不表示大小,只表示方向。水平向右为正,向左为负,单位是px
02 y表示阴影在垂直方向的偏移量,垂直向上为负,向下为正
03 r表示阴影的模糊程度.数值越大阴影越模糊,单位pX
04 color 表示阴影的颜色
05 C3允许一段文字有多层阴影,多层之间用逗号隔开.每一层内,不同参数之间用空格隔开。
1.40过渡属性
过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在C3中新增了一个属性叫transition
Transition: all 1s linear Os;
注:
01第一个参数的作用是设置元素身上的哪些属性产生过渡,一般用all表示所有的属性都过渡。
02第二个参数的作用设置过渡需要时长,单位是s不要省略
03第三个参数的作用设置过渡的动画形式,linear 表示匀速
04第四个参数设置当前过渡等待多久之后才会执行(延时)。即使为0,单位也不能省。
05 :hover选择某个元素被鼠标移上时的状态。
06 transition这个属性既可以添加在元素默认状态,也可以添加在鼠标移上状态,区别就是第二种做法在鼠标离开的时候不会在有过渡变化。