html5和css 初步学者应用笔记

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

网页的名称、网页的样式css、网页相关的js、网页的编码 书写要学习的标签（内容） 例子1： hello world hello world 例子2：设置中文编码 !doctype html> hello world 哈哈哈 （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个值 代表 阴影颜色

  • */
posted @ 2019-11-29 17:03  一路微笑  阅读(112)  评论(0)    收藏  举报