-
webkit
-
user
-
select
:
none
;
-
moz
-
user
-
select
:
none
;
-
ms
-
user
-
select
:
none
;
user
-
select
:
none
;
appearance
:
none
;
-
moz
-
appearance
:
none
;
-
webkit
-
appearance
:
none
;
将样式表编写到head中的style标签中
<style type="text/
css
"></style>
使用内部样式表，进一步将表现和结构分离，可以同时为多个
元素
设置
样式，方便后期的维护
3.外部样式表
将样式表编写到外部的
CSS
文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/
css
" href="文件的路径"/>
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式
编写的位置
1.内联样式
将样式编写到标签的style属性中
<p style="color:red;"></p>
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用
2.内部样式表
将样式表编写到head中的style标签中
<style type="text/
css
"></style>
使用内部样式表，进一步将表现和结构分离，可以同时为多个
元素
设置
样式，方便后期的维护
3.外部样式表
将样式表编写到外部的
CSS
文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/
css
" href="文件的路径"/>
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式
通过
选
择器可以
选
中页面中的一组
元素
，然后为其
设置
样式
元素
选
择器
根据标签名，
选
中页面中的指定
元素
语法：标签名{ }
div{}
id
选
择器
根据
元素
的id属性值
选
中一个唯一的
元素
语法：#id {}
#box1{}
#hello{}
类
选
择器
根据
元素
的class属性值，
选
中一组
元素
语法：.class{}
.hello{}
.box{}
通配
选
择器
选
中页面中的所有
元素
语法：*{}
通配
选
择器的性能比较差，尽量避免使用
并集
选
择器
可以同时
选
中符合多个
选
择器的
元素
语法：
选
择器1,
选
择器2,
选
择器N{}
div,p,#box,.hello{}
交集
选
择器
可以
选
中满足多个条件的
元素
语法：
选
择器1
选
择器2
选
择器N{}
例子：p.hello{}
后代
元素
选
择器
选
中指定
元素
的指定后代
元素
语法：祖先
元素
后代
元素
{}
div span {}
div p{}
子
元素
选
择器
选
中指定
元素
的指定子
元素
语法：父
元素
> 子
元素
{}
div > span {}
div > p{}
声明块中实际上就是一个一个
CSS
声明
每一个
CSS
声明都是一个样式，实际上就是一个名值对的结构
名和值之间使用:链接
:左边是样式的名字
:右边是样式的值
每一个声明以;结尾
color:red;
font-size:20px;
元素
之间的关系
直接包含子
元素
的的
元素
叫做父
元素
直接被父
元素
包含的
元素
叫做子
元素
祖先
元素
直接或间接包含后代
元素
的
元素
叫做祖先
元素
，父
元素
也是祖先
元素
后代
元素
直接或间接被祖先
元素
包含的
元素
叫后代
元素
，子
元素
也是后代
元素
兄弟
元素
拥有相同父
元素
的
元素
叫做兄弟
元素
块
元素
和内联
元素
块
元素
会独占页面中的一行，无论他的内容的多少
一般使用块
元素
对页面进行布局
常见的块
元素
h1~h6
内联
元素
内联
元素
只占用自身的大小，不会独占一行
内联
元素
也叫行内
元素
（inline）
一般内联
元素
都是用来为
文本
来
设置
效果
常见的内联
一般都是使用块
元素
去包裹内联
元素
，而不会使用内联去包裹块
元素
a
元素
可以包含任意
元素
，除了a本身
p
元素
不能包含任何块
元素
伪类和伪
元素
伪类和伪
元素
用来表示
元素
所处的一个特殊的状态，或者是一个特殊的位置
:link
表示一个普通的链接（未访问过的链接）
:visited
表示访问过的链接
:hover
鼠标移入的链接，也可以为其他
元素
设置
hover
:active
正在被点击的链接，也可以为其他
元素
设置
active
:focus
表示
元素
获取焦点的状态，一般用于
文本
框
::selection
表示内容被
选
中的状态
在火狐中使用::-moz-selection来代替
:first-letter
表示第一个字符
:first-line
表示文字的第一行
:before
选
中
元素
的最前边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
:after
选
中
元素
的最后边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
属性
选
择器
根据
元素
的属性
选
择指定
元素
[属性名]
选
取含有指定属性的
元素
[属性名="属性值"]
选
取属性值等于指定值的
元素
[属性名^="属性值"]
选
取属性值以指定内容开头的
元素
[属性名$="属性值"]
选
取属性值以指定内容结尾的
元素
[属性名*="属性值"]
选
取属性值中包含指定内容的
元素
兄弟
元素
选
择器
选
取后一个兄弟
元素
前一个 + 后一个
选
取后边所有的兄弟
元素
前一个 ~ 后边所有
子
元素
的伪类
:first-child
寻找父
元素
的第一个子
元素
，在所有的子
元素
中排序
:last-child
寻找父
元素
的最后一个子
元素
，在所有的子
元素
中排序
:nth-child
寻找父
元素
中的指定位置子
元素
，在所有的子
元素
中排序
p:nth-child(3)
可以使用even，来找到偶数的子
元素
可以使用odd，来找到奇数的子
元素
:first-of-type
寻找指定类型中的第一个子
元素
:last-of-type
寻找指定类型中的最后一个子
元素
:nth-of-type
寻找指定类型中的指定子
元素
从一组
元素
中将符合要求的
元素
剔除出去
:not(
选
择器)
.abc:not(div)
HTML，超
文本
标记语言
负责页面中的结构，定义出页面中的各个组成部分
HTML是采用纯
文本
的形式的编写，采用HTML标签来标识出页面中的不同部分
<标签名></标签名>
自结束标签
<标签名 />
通过属性可以
设置
标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
<标签名 属性名="属性值" 属性名="属性值"></标签名>
<标签名 属性名="属性值" 属性名="属性值" />
HTML页面的基本结构
网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
<title>
用来
设置
网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
用来
设置
网页的元数据，比如网页使用的字符集
<meta charset="utf-8" />
设置
网页的关键字
<meta name="keywords" content="关键字,关键字,关键字,关键字"/>
设置
网页的描述
<meta name="description" content="网页的描述"/>
请求的重定向
<meta http-equiv="refresh" content="秒数;url=地址" />
网页的主体
网页中所有的可见部分都需要在body中编写
<h1> ~ <h6>
在html中一共有六级标题
六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
一般一个页面中只能写一个h1
水平线标签
可以向一个页面中引入其他的外部页面
<iframe></iframe>
外部页面的地址，可以使用相对路径
width和height
可以
设置
框架的宽度和高度
可以为内联框架指定一个名字
可以将该属性值
设置
为超链接的target属性的值
这样当点击超链接时，页面将会在相应的内联框架中打开
内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架
可以使当前页面跳转到其他的页面
<a>链接的文字</a>
指向链接跳转的目标地址，可以是一个相对路径
还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置
可以使用mailto:来创建一个发送电子邮件的超链接
target
指定在哪个窗口中打开链接
可
选
值
_self
默认值，默认在当前窗口打开链接
_blank
在新窗口中打开链接
内联框架的name属性值
在指定的内联框架中打开链接
<!-- 注释内容 -->
注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码
也可以通过注释隐藏一些页面中不想显示的内容
在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
常用的实体
④是一个容器及盒子 里面看可以放行内或块级
元素
⑤文字类的
元素
如p h1-h6里面不能放块级
元素
尤其是div
（2）行内
元素
a strong b em i del s ins u span
①相邻行内
元素
在一行上，一行可以显示多个
②宽高直接
设置
是无效的
③默认宽度就是他本身内容的宽度
④行内
元素
只能容纳
文本
或其他行内
元素
⑤链接（a标签）里面不能再放链接 但可以放块级
元素
比如图片
（3）行内块
元素
img
input td
①一行上可以有多个行内块
元素
中间有空隙（行内
元素
特点）
②默认宽度就是他本身内容的宽度（行内
元素
特点）
③宽高 高度 外边距 内边距可以控制（块级
元素
特点）
元素
显示模式的转换
（1）行内
元素
转块级
元素
display：block；√
（2）块级
元素
转换为行内
元素
display：inline；
（3）行内块
元素
display：inline-block√、
单行文字垂直居中
文字的行高line-height=盒子高度 仅限于单行文字垂直居中
3.
css
的背景属性
（1）背景颜色
选
择器{
background-color： transparent透明（透明）/color；
（2）背景图片（便于控制位置）
常用于logo 装饰性的小图片或者超大图片
background-image： none（默认） | url（图片地址/路径）;
（3）背景平铺
background-repate: repate（默认） | no-repate | repate-x（沿x轴/横向平铺） | repate-y（沿y轴/纵向平铺）;
页面
元素
既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色
（4）背景图片的位置
background-position: x y;
①参数是方位名词 top | center | bottom | left | center | right 方位名词
x（ left | center | right）
y（top | center | bottom）
background-position: 水平 垂直;
background-position: center top ;
background-position: top center ;
指定两个方位名词时 与顺序无关
指定一个方位名词时 没有指定的那个默认是居中对齐
②参数是精确单位 前面x 后面y 顺序
不可
变
若第一个是精确单位 一定是x 则另一个垂直居中
③混合单位
有顺序要求 第一个为x 第二个为y
（5）背景固定
background-attachment: scroll | fixed ;
（6）背景复合写法
background：颜色 图片地址url 平铺 滚动 位置
没有顺序要求
（7）背景色半透明
background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3
背景色半透明 盒子里面内容不受影响
由于我最近在开发一个互动小游戏，碰到一个情况必须要用
img
标签来实现，平时我都是用div再给它背景的方式实现的。（为什么小游戏还要用dom？用游戏引擎不行吗？我太菜了，不会游戏引擎，只能用原生js和jQuery实现了，反正我接触到的游戏都不是很复杂，用
css
实现一些动效还挺简单的）。
遇到的问题
其实我一开始就是用
img
来添加物品到场景中的，后来测试发现图片会被
选
中，并且某些浏览器甚至会打开...
其中, class="unselectable"是添加一个名为unselectable的
CSS
类, 用于禁用鼠标
选
中; draggable="false"用于禁用拖拽, oncontextmenu="return false;"用于禁用鼠标右键.
2. 添加
CSS
类:
<style>
<input id="dw_1" name="shape[]" value="Round" type="checkbox" >
<label for="dw_1">Round<br><
img
src="images/shape/Round.gif" ></label>
