html5和css 初步学者应用笔记

HTML 超文本 标记 语言
标签：是由一对 <> 构成的，有开始、有结束。
html架构：



网页的名称、网页的样式css、网页相关的js、网页的编码


书写要学习的标签（内容）


例子1：










hello world


例子2：设置中文编码
!doctype html>






哈哈哈


（1）  网页的编码
（2）网页文件的编码

标签：

 块标签：    单独占一行
1.标题标签  从1到6 文字大小依次变小 

2.水平线

---

3.段落标签

4.无序列表

5.div 布局标签

6.换行标签


行标签： 不单独占一行
7.span 标签 对文字起强调的作用

8.a标签
（1）链接
     外网
     内网
（2）锚链接  链接到一个确定的位置
     位置 锚点
     去锚点    
     回到顶部  
 (3)空链接  
9.图片标签

10.音频标签

11.视频标签


CSS层叠样式表：
1.行内样式表
在标签的开始元素里面添加 style="" 属性

在style="样式名:样式值;样式名:样式值;样式名:样式值;...."

字体样式：
字体粗细 font-weight:bold;
字体大小 font-size:像素值;  像素值=数字+px     如 24px
字体倾斜 font-style: italic;  normal
字体下划线 text-decoration:underline ;  上划线  text-decoration:overline ;  

            删除线 text-decoration:line-through ; 去掉线 text-decoration:none;
字体颜色   color: red;  英文表示颜色  16进制颜色 #000-#fff  第一位 代表 红  第二位代表 绿 第三位代表 蓝   #000000-#ffffff    rgb颜色 rgb(0,0,0)-rgb(255,255,255)
字体       font-family:'宋体'
字体水平位置  text-align: right;  【left】；【center】；

背景样式
背景颜色：background-color: green;  英文   16进制  rgb
背景图片：background-image:url(图片的地址) ; 
背景图重复：background-repeat:no-repeat ;
背景图大小：background-size:100% 800px; 第一个值 控制宽度  第二个值 控制高度  表示 像素值  百分比
背景图固定：
背景图位置：


div的盒子模型
宽度  width：像素值;
高度  height:像素值;

外边距  margin  对div的大小没有影响
margin-left:像素值;
margin-right:像素值;
margin-top:像素值;
margin-bottom:像素值;
argin-left:20px;

内边距 padding 对div的大小有影响
padding-left:像素值;
padding-right:像素值;
padding-top:像素值;
padding-bottom:像素值;

padding-left:10px;




边框 border  对div的大小有影响
border-left: 边框的宽度（像素值）  边框的样式（solid、dashed）   边框的颜色;
border-right: 边框的宽度（像素值）  边框的样式（solid、dashed）   边框的颜色;
border-top: 边框的宽度（像素值）  边框的样式（solid、dashed）   边框的颜色;
border-bottom: 边框的宽度（像素值）  边框的样式（solid、dashed）   边框的颜色;
border: 边框的宽度（像素值）  边框的样式（solid、dashed）   边框的颜色;

border:1px solid red;

div的实际宽度=width+内边距（左右）+边框（左右）;
div的实际高度=height+内边距（上下）+边框（上下）;
div的水平居中 
margin:0 auto;
把块标签你变成行标签
float:left;

2.页内样式表
在head里面 title的下面加上：

选择器：
（1）标签选择器

(2)ID选择器     id名字不能重复出现
定义id

选择



（3）class选择器   多用class 选择器
定义

选择

html中的注释：  注释快捷键 ctrl+shift+/  描述网页中标签内容

css中的注释
/**/
去掉li的点点
list-style: none;


文字垂直居中
line-height:与height保持一致;
例：
height:50px;
line-height:50px;

伪类选择器
hover 鼠标移动到某个标签上面，设置器其样式
a:hover{
color:#fff;
}
把行标签变成快标签
display:block;
通用选择器 用于新建网页时，初始化网页的元素
*{margin: 0; padding: 0;}
子类选择器


充当父类选择器>充当父类的儿子{
}
.nav_div>ul>li{
list-style: none;
}


图片效果:
放大、缩小   transform:scale(放大的倍数);  transform:scale(1.5);
放大镜   overflow:hidden;

样式
.img_div{
width: 300px;
height: 170px;
background-color: yellow;
overflow: hidden;
}
.img1{
width: 300px;
}
.img1:hover{
transform:scale(1.5);
}


延迟效果  transition: all 1s; /*延迟 1s*/


旋转2d
transform: rotate(180deg);    deg时度数的意思
旋转3d
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);

表单：   收取、记录信息

表单元素：
 

性别： 男   女

爱好： 球 看球 玩球 



毕业院校：

兰州工业学院
皇家工业学院
兰州工业




个人简介：

3.外部样式：
新建css文件，文件名与html的名保持一致；
在html中引入css外部文件  




4.阴影效果
box-shadow: 10px 15px 25px #ddd;
/*
第一个值 代表 阴影 水平移动 + 右 —左
 第2个值 代表 阴影 垂直移动 + 下 —上
第3个值 代表 阴影范围 越大越虚
 第4个值 代表 阴影颜色
* */