一、环境搭建
- 浏览器 --- 谷歌/火狐/IE/Safari
- 编辑器 --- HBuilder/Sublime/Dw/记事本
二、语言了解
- HTML 超文本标记语言 【基本架构】
语言: 和浏览器沟通的
标记: <文本> <html>
标签对: <html></html>
单标签: <img />
文本: 显示文本内容
超文本: 显示图片、显示视频、播放音乐....
- CSS 层叠样式表 【搞装修的】
一个人的描述:
身高: 183cm
年龄: 18岁
体重: 70Kg
一个元素的描述:
style="width: 100px; height: 100px; background: red;"
width: 100px; // 属性名: 属性值;
width: 100px; // 宽度为100像素
height: 100px; // 高度为100像素
+ background: red;// 背景为红色
————————————————————————————————————
style="width: 100px; height: 100px; background: red;"
- Javascript 脚本语言【智能化】
// 点击之后要做的事情
onclick="this.style.width='800px';"
this.style.width='800px'; // 自己(this) 的(.) 样式(style) 的(.) 宽度(width) = '800像素'
三、常用标签
- 注释方式
<!-- 1、这是注释的用法 -->
- 标题
<h#> 标题内容 </h#> [其中#是1~6]
- 段落
<p> 段落文本内容(段落与段落之间有间距) </p>
- 文本节点
<span> 文本结点 </span>
- 换行
语法: <br />
备注: 换行是一个空标记，是强制换行
- img图片
// src: 图片路径(网络图片url/本地图片path)
- 文本输入框
// type: 文本类型
// placeholder: 提示文本
// value: 输入框中内容
<input type="text" placeholder="请输入账号" value="zhangsan" />
- 密码输入框
// type: 密码类型
// placeholder: 提示文本
// value: 输入框中内容
<input type="password" placeholder="请输入密码" />
- 按钮
// type: 按钮类型
// value: 按钮名称
<input type="button" value="登陆" />
- 超链接
// href='链接地址'
<a href="http://www.baidu.com"> 百度一下 </a>
<a href="03-样式表.html"> 样式表 </a>
- 文档区域(网页结构布局)
<div></div>
四、样式表写法
- 内联样式表
<img style="属性1:值1; 属性2:值2; 属性3:值3;……”/>
- 内部样式表
<head>
// 内部样式表
<style type="text/css">
div{
background:purple;
}
</style>
</head>
<body>
// ...
</body>
- 外部样式表
<head>
// 外部样式表(即在另外一个文件 *.css)
<link href=“样式表文件路径” rel="stylesheet" />
</head>
<body>
// ...
</body>
五、选择器
- 类型选择符(标签选择器)
语法: 标签名称 {属性:属性值;}
例如: div{width:30px;}
- 类选择符(class选择器) [可以同名]
语法: .class名{属性:属性值;}
例如:
.top{ width: 300px; }
<div class="top"></div>
- ID选择符(id选择器)
语法: #id名{属性：属性值;}
例如:
#box{ height: 300px }
<div id=“box”></div>
注意: 整个文档中，id名必须是唯一标识
- 包含选择符(后代选择器)
语法: 选择符1 选择符2{属性：属性值;}
例如:
.header .left{ background: red; }
<div class=“header”>
<p class=“left”> 啦啦啦 </p>
</div>
- 通配符
语法: *{属性：属性值;}
说明: 通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；
- 伪类选择符
语法: 元素:hover{ 属性: 属性值; }
说明: 鼠标移入
六、CSS核心属性
- width: 宽度
width: 100px;
- height: 高度
height: 200px;
- background
background-color: 背景颜色
background-color: purple;
background-image: 背景图片
background-image：url(背景图片的路径及全称);
background-repeat: 背景图片平铺
background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x/repeat-y
background-size: 背景图片大小
background-size: 宽度 高度;
例如: background-size: 100% 100%;
background-position: 背景位置
background-position:left/center/right/数值 top/center/bottom/数值;
background: 背景属性的缩写
background:url(背景图片的路径及全称) no-repeat center top;
- color: 文本颜色
color: black;
- font-size: 字体大小(默认是16px)
font-size: 13px;
- text-align: 水平对齐方式
{text-align:left/right/center/justify;}
justify: 实现两端对齐文本效果(可以使文本两端都对齐；在两端对齐文本中，文本行的左右两端都放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等);
- line-height: 行高
line-height: 30px;
备注: 单行文本等于容器高时，文本垂直居中;
- text-decoration: 文本属性
text-decoration: none没有修饰符/underline添加下划线/overline添加上划线/line-through删除线
备注: a标签比较常用
- border: 边框属性
简写:
border: 线型(solid/dashed/dotted/double) 粗细(数值+单位) 颜色
例如: border: 3px solid red;
border-width 边框的粗细
border-style 边框的线型
border-color 边框的颜色
solid:实线，dashed:虚线，dotted:点状线，double:双线
- margin:边距(一般用于调整盒子位置)
边界: margin，在元素外边的空白区域，被称之为边距;
margin-left: 左边界 / margin-right: 右边界
margin-top: 上边界 / margin-bottom: 下边界
属性值的4种方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右 【margin: 0 auto; 即表示上下边距为0，左右边距为自动】
一个值：四个方向 margin:2px; 定义元素四边边界为2px
- padding: 填充(一般用于调整盒子内容位置)
填充: padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白；
用法:
> 用来调整内容在容器中的位置关系;
> 用来调整子元素在父元素中的位置关系;
注: padding属性需要添加在父元素上;
> padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变，即元素宽高上减去添加的padding属性值;
说明：可单独设置一方向填充，如：padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;
四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
注: 顺时针方向
三个值：上 左右 下 {padding:10px 20px 30px;}
二个值：上下 左右 {padding:10px 20px;}
一个值：四个方向 padding:2px; 定义元素四周填充为2px
- float: 浮动属性
语法:
float:none/left/right;
说明:
float:定义网页中其它文本如何环绕该元素
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值，不浮动。
备注:
浮动框可以向左或右边移动，直到它的边缘碰到包含边框或另外一个浮动框的边框为止；
浮动框是脱离了普通的文档流；
- border-radius圆角
语法:
border-radius: 圆角半径
// 圆角半径为20px
border-radius: 20px;
- box-shadow阴影
语法:
box-shadow: h-shadow v-shadow blur color;
h-shadow: 水平阴影的位置。允许负值。
v-shadow: 垂直阴影的位置。允许负值。
blur: 模糊距离。
color: 阴影的颜色。
box-shadow: 5px 5px 10px black;
- 音频
<!--audio:音频 src:文件链接 autoplay:自动播放-->
<audio src="http://o9vplcp9o.bkt.clouddn.com/music.mp3" autoplay="autoplay" controls></audio>
- 视频
<!--video:视频 src:文件链接 autoplay:自动播放-->
<video src="http://www.html5videoplayer.net/videos/madagascar3.mp4" controls="controls" autoplay="autoplay">
- 内嵌网页
<!--src:内嵌的网页-->
<iframe src="http://www.runoob.com"></iframe>
七、案例 --- 照片墙
- transition: 过度效果
/* transition: 过度效果;
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
*/
transition: all 5s; // 所有属性，过渡效果持续时间5秒
- transform: 形变
/* transform: 形变
该属性允许我们对元素进行旋转、缩放、移动；
translateX: 水平方向移动
translateY: 垂直方向移动
rotate: 旋转
scale: 缩放
*/
transform: rotate(-5deg) scale(1.2); // 逆时针旋转5°，放大1.2倍
-
图片参考
照片墙
position: 定位
z-index: 层级
