一、环境搭建
- 浏览器 --- 谷歌/火狐/IE/Safari
- 编辑器 --- HBuilder/Sublime/Dw/记事本
二、语言了解
- HTML 超文本标记语言 【基本架构】
语言: 和浏览器沟通的
标记: <文本>
标签对:
单标签: ![]()
文本: 显示文本内容
超文本: 显示图片、显示视频、播放音乐....
- 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~6]
- 段落
段落文本内容(段落与段落之间有间距)
- 文本节点
文本结点
- 换行
语法:
备注: 换行是一个空标记，是强制换行
- img图片
// src: 图片路径(网络图片url/本地图片path)
- 文本输入框
// type: 文本类型
// placeholder: 提示文本
// value: 输入框中内容
- 密码输入框
// type: 密码类型
// placeholder: 提示文本
// value: 输入框中内容
- 按钮
// type: 按钮类型
// value: 按钮名称
- 超链接
// href='链接地址'
百度一下
样式表
- 文档区域(网页结构布局)
四、样式表写法
- 内联样式表
![]()
div{
background:purple;
}
// ...
- 外部样式表
// 外部样式表(即在另外一个文件 *.css)
// ...
五、选择器
- 类型选择符(标签选择器)
语法: 标签名称 {属性:属性值;}
例如: div{width:30px;}
- 类选择符(class选择器) [可以同名]
语法: .class名{属性:属性值;}
例如:
.top{ width: 300px; }
- ID选择符(id选择器)
语法: #id名{属性：属性值;}
例如:
#box{ height: 300px }
注意: 整个文档中，id名必须是唯一标识
- 包含选择符(后代选择器)
语法: 选择符1 选择符2{属性：属性值;}
例如:
.header .left{ background: red; }
啦啦啦
- 通配符
语法: *{属性：属性值;}
说明: 通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；
- 伪类选择符
语法: 元素: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;
- 音频
- 视频
- 内嵌网页
七、案例 --- 照片墙
- 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: 层级
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。