1、css介绍
css(cascading style sheet) 层叠样式表
css给html元素加各种各样的表现（样式）
目的：html的结构和css的样式分离，便于维护和更新
例如： h1{color:red;font-size:14px}
选择器 {属性:属性值; 属性:属性值; 属性:属性值1,属性值2; }
说明：
Ÿ 一个css样式，是由选择器和格式声明语句构成
Ÿ 选择器，就是选择html元素，给那个html标签加样式
Ÿ 格式声明语句，包括属性:属性值;
Ÿ 属性，在css样式中有各种各样的属性，属性已经定义好，直接用
Ÿ 属性值可以有多个，如果有多个之间用逗号相隔
Ÿ 一条格式声明语句的结束用;
Ÿ css样式的单位必须得写 ,通常以px为单位
css样式如何引入到html元素中
1. 行内样式表 ----临时的测试
格式 <标签 style=”属性：属性值;属性:属性值;”> 内容</标签>
例如:行样式只能应用到当前文档中的当前标签加css样式或里面包含的标签
2. 内嵌样式表
格式是 :在 <head></head>之间输入下面的语句
<style type=”text/css”>
选择器{属性:属性值; }
</style>
描述：把css样式和html结构分离开
例如
描述：该样式只能应用当前的文档
3、 外部样式表
语法:<link rel=”stylesheet” type=”text/css” href=”外部样式表文件” />
单独的空页面，里面写css样式，保存的格式 XX.css ---就是外部颜色样式表文件
css注释：
/*注释的内容*/
html<!—注释内容-->
css 选择器的类型
基本选择器
1 标签选择器：给指定的标签加样式
语法：标签选择器{属性:属性值; }
标签选择器 就是标签的名称
body{ } p{ } div{ } ul{ }
2类选择器 ：给哪类标签加样式，可以指定给那个html元素加样式
语法: 类选择器{属性:属性值; }
类是用点类表示类 (.)
选择器名称 自定义，定义规则 字母或下划线开头，后可以是字母 数字下划线
例如：.box{ } .myclass_one{ }
类必须的引用,那个标签想用，就给那个标签加下面的代码
每一个标签都有一个class属性
引用的方法：<标签 class=”选择器名称”></标签>
类选择器可以引用多次，你想要用，就可以引用3 id选择器：给特定的html元素加样式
语法: id选择器名 {属性:属性值; }
#来表示id
选择器名 自定义选择器名称 自定义，定义规则 字母或下划线开头，后可以是字母 数字下划线
例如:#myid{ } #box{ } #footer{ }
id选择器定义之后必须的引用
如何引用：<标签 id=”选择器名称”></标签>
注意定义好的的id选择器，只能引用一次，如果你想引用多次，就用类选择器
通常id选择器是给程序用的，通常不是用来设置样式的，设置样式通常使用的是类选择器
表示唯一性的可以用id选择器
4 通用选择器：（*）
*所有
复合选择器：
（组合元素选择器）多元素选择器：
将相同的样式放到一起来定义，标签有共有的属性和属性值
语法：选择器，选择器，选择器…{共有的属性：属性值; }
body,h1,h2,h3,h4,h5,h6,ul,li,ol,p,div,span{ }
*{ }
后代元素选择器：给html元素的后代元素加样式div的后代有 h2 ul ,li
语法: 选择器1 选择器2 ..{属性:属性值; }
选择器1里面的选择器2
.myclass .one .two h3{ }
#myid .one .two ul{ }
子元素选择器:给html元素的子元素加样式
某标签里面的第一层 就是子元素
<div >
<h2>后代元素选择器</h2>
<ul>
<li>我是孙子辈</li>
<li>我是孙子辈</li>
<li>我是孙子辈</li>
</ul>
</div>
语法：选择器>选择器{属性：属性值； }
伪类：（a）锚的伪类
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移到链接上
a :active 单击鼠标左键的那一时刻
注意：通常未访问和访问过的效果设置一样，这样就解决了兼容问题
文本的属性
Ÿ font-size:数值 ; 文本的大小 例如font-size:12px;
Ÿ font-family:字体;文本的字体 例如font-family:宋体,隶书;
Ÿ font-weight:文本是否加粗; 例如 font-weight:bold;加粗 font-weight:normal;
Ÿ font-style:文本是否倾斜;例如font-style:italic;倾斜 font-style:normal;
Ÿ color:文本颜色；例如color:blue; 文本为蓝色
Ÿ text-decoration:none; 去掉下划线，text-decoration:underline:加上下划线
text-decoration:line-through; 删除线 text-decoration:overline;上划线；很少用
Ÿ text-align:文本水平对齐方式text-align：left/center/right;
Ÿ word-spacing:英文单词和单词之间的距离；
Ÿ letter-spacing:英文字母和字母之间的距离; 汉字也可以
Ÿ img{width:宽度值px;height:高度值；}设置图片的宽度和高度
line-height:为行高
背景（所有的html标签）
Ÿ 背景颜色background-color：颜色值；
Ÿ 背景图片background-image:url(背景图片的地址)；注意图片名不能是中文
Ÿ 背景图片是否平铺background-repeat:是否平铺; 取值
repeat;横向和纵向平铺 no-repeat 不平铺 repeat-x;横向平铺 repeat-y; 纵向平铺
Ÿ 背景附件（背景图片是否随着滚动条一起滚动）---body 标签
background-attachment:fixed; 背景图片固定，
background-attachment:scroll; 默认的情况是滚动
Ÿ 背景图片的位置 background-position:水平 垂直;
水平 left左 center中 right 右 ；垂直 top上 center中 bottom;下
注意：background-position:center;水平和垂直中间
例如：
p{
background-color:blue;
background-image:url(images/01.jpg);
background-repeat:no-repeat;
background-postition:right bottom;
}
简写为
background:颜色背景图片 是否平铺 附件水平位置 垂直位置;
background: 背景图片是否平铺 水平 垂直
background:颜色;
p{列表
去掉列表前面的符号 list-style-type:none;
简写为 list-style:none;
用一张小图片代替列表前面的符号 list-style-image:url(图片的地址);
边框
Ÿ border-top-width:数值；上边框的宽度
Ÿ border-top-color:颜色; 上边框的颜色
Ÿ border-top-style:线型; 线型:solid实线 dotted 点状线 dashed虚线
简写为
border-top：粗细线型 颜色;
上下左右，都一样的，只不过是改一下top,right,left,bottom简写 border:粗细 线型 颜色;
盒子模型：
内边距（内填充）：内容和边框之间的距离
l padding-top:内容和上边框之间的距离
l padding-right: 内容和右边框之间的距离
l padding-bottom: 内容和下边框之间的距离
l padding-left: 内容和左边框之间的距离
可以简写为
l padding:10px 20px 30px 40px; 上10 ，右20 ， 下30 ，左40
l padding:10px 20px 30px; 10px上， 20px 左右， 30px 下
l padding:10px 30px; 10px上下 30px左右
l padding:40px; 上右下左都是40px
外边距
边框往外的部分
margin-top: 上边框往外的部分
margin-right: 右边框往外的部分
margin-bottom:下边框往外的部分
margin-left:左边框往外的部分
内容区宽度和高度
width:宽度
height:高度;
盒子的深入
盒子的结构 内容区 内边距 边框外边距
盒子的总的宽度是:内容区的宽度width +内边距（左右）+边框（左右）+外边距(左右)
通常div 里面包含若干个div (外边的叫父盒子) 里面的div总的宽度（width+padding+border+margin---左右）要小于外面父盒子的内容区宽度width
网站布局就是分成两部分 纵向和横向
如果是纵向排列 直接用 div 就可以了
如果是横向就得用浮动，设置内容和边框之间的距离和，外边距之间的距离就可以
清除格式
html标签会自带格式，我们通常清除格式，清除以后，那个标签需要，在从新设置
ul,h2,li,ol,div,body{
padding:0;
margin:0;
}
浮动：
就是把纵向变成横向
语法： float:left; float:right;
左—左 左 右 左左右 左左左
l 一行的html元素 要设置浮动就都设置浮动 ，在一行中的所有盒子都设置浮动
l 浮动的元素层级要比普通元素高
l 无论html之前是否是块元素，浮动之后是块元素（可以设置width,height属性）
清除浮动
clear:left; clear:right; clear:both;
设置浮动之后，浮动的盒子不占据空间，所有下方的盒子会上去，解决方案
是清除浮动
如果父盒子设置的不是固定高，那么里面的盒子如果设置了浮动，受浮动的影响，无法获得自然高，解决方法
1. 在父盒子里面的最下方加一个<div> </div> 设置清除浮动clear:both;
2. 在父盒子的样式中（浏览器bug） ----overflow:hidden;
块和行内元素
块元素：自己独立占一行 ，可以设置宽度和高度
行内标签：不是自己独占一行，行内元素的宽度个高度是由内容决定
行内标签转换为块标签 display:block;
块元素转为行内元素display:inline; 不能设置width和height
隐藏某个盒子display:none;
盒子在窗口水平居中
margin-left:auto;
margin-right:auto;
可以简写为
margin:XX auto;
定位：
position 四种
1. static 静态效果（不设置position）默认的正常的文档流
2. fixed固定定位
3. relative 相对定位
4. absolute绝对定位
通常定位方式和坐标一起用
坐标：就是目标内容距原来位置的距离
left: 目标位置距原来位置左边的距离
right: 目标位置距离原来位置右边的距离
top ：目标位置距原来位置上边的距离
bottom 目标位置距原来位置下边的距离
fixed 固定定位
1. 设置完固定定位之后，不占空间，固定到一个位置不随滚动条滚动
2. 层级要比普通的高
3. 如果没有设置定位坐标，就是在原来的位置
4. 如果设置定位坐标----（相对于浏览器窗口）
5. 无论之前是否是块元素，设置固定定位之后一定是块元素
例如：}
relative 相对定位
如果不结合定位坐标，就是在原来的为
相对定位是以“自身” 定位原点
相对定位占空间
层级要比普通元素高
之前是行内元素，设置相对定位之后还是 行内元素，是块元素，设置完还是快元素
absolute绝对定位
设置完绝对定位之后不占空间
层级要比普通元素高
如果不结合坐标，就是在原来的位置
结合了坐标
绝对定位相对于祖先元素（相对定位，绝对定位）定位原点
如果祖先元素没有设置定位，直到 body ，还没有找到定位，就以body（窗口）作为他的定位原点
如果结合了定位坐标，就是相当于祖先元素（相当定位，绝对定位）作为他的定位原点
html5
如何建立html5页面
注意:前提条件必须先保存当前页面
1. ！单击tab
2. html:5 单击tab
如果利用好快捷键
ul>li*10 --tab表单的新增属性
| placeholder | 输入框的提示信息 |
| required | 如果不输入内容，不能提交 ，必填项 |
| autofocus | 自动获取焦点 |
<input type="text" name="name" placeholder="用户名"/>
表单的type 新增属性值
| | 限定用户输入的必须是email类型 |
| date | 限定用户输入的必须是日期类型 |
| week | 限定用户输入的必须是周类型 |
| time | 限定用户输入的必须是时间类型 |
| month | 限定用户输入的必须是月类型 |
| number | 限定用户输入的必须是数字类型 |
| url | 限定用户输入的必须是地址类型 ，网络地址 |
| range | 产生一个滑块 |
| color | 产生一个颜色选项 |
html5新增了一些标签
<header></header>网页的头部
<nav></nav>网页的导航
<section></section>网页的一块区域，里面可以放 章节
<article></article>网页的文章内容
<aside></aside>测边栏
<footer></footer>页面的尾部
如何插入视频
视频格式：ogg mp4 webm
格式:<video src=”视频的路径” width=”宽度” height=”高度” />
autoplay=”autoplay” 自动播放
controls=”controls”控件
第二种写法
<video autoplay=”autoplay” controls=”controls”>
<source src=”XX.ogg”>
<source src=”XX.mp4”>
<source src=”XX.webm”>
</video>
音频：
ogg mp3 wav
语法<audio src=”音频的地址”autoplay=”autoplay” controls=”controls”>
第二种写法
<audio autoplay=”autoplay” controls=”controls”>
<source src=”XX.ogg”>
<source src=”XX.mp3”>
<source src=”XX.wav”>
</audio>
文本阴影
text-shadow:水平 垂直 模糊 颜色；
盒子设置阴影
box-shadow:水平 垂直 模糊 模糊的尺寸 颜色 内外阴影inset/outset(不写，默认是不写)
圆角
border-radius:左上 右上 右下 左下；
背景
background:url(图片的地址);
背景的缩放
background-size:水平 垂直;
background-size:cover; 背景图片会等比例缩放，把该容器完全覆盖上
background-size:contain; 背景图片会等比例缩放，只要容器宽度或高度一个被覆盖就停止
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
