好程序员HTML5培训教程-html和css的使用方法以及样式

好程序员 HTML5 培训教程 -html 和 css 的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站建设、成都网站建设、曲江网络推广、微信小程序、曲江网络营销、曲江企业策划、曲江品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供曲江建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

布局步骤
第一步：清除默认样式
第二步：划分模块
第三步：设置模块的大小以及位置
第四步：划分下一级模块
html 和 css
引入网页头像
<link rel="shortcut icon" href="img/...ico">
css 样式表的引入方式

css 样式表的引入方式
1 、外链式

2 、嵌入式

3 、行内样式

@import url('')

文件命名以及变量命名

命名规范
1 、严格区分大小写
2 、可以采用字母数字下划线 $, 数字不开头
3 、命名语义化
4 、可以采用驼峰命名法
清除默认样式

清楚边距

margin : ;

padding : ;

list-style : none;

}

a 标签清楚下划线和颜色

a {

color : black;

text-decoration : none;

}

css 中颜色的表示方式

css 中颜色的表示方式：
1. 预定义的颜色【关键字颜色】 red pink blue yellow
2.#6 位数的色值 #00-00-00 红绿蓝
3.rgb （红，绿，蓝）： rgb([0-255],[0-255],[0-255])
4.rgba （ red ， green ， blue ，透明度）： rgba([0-255],[0-255],[0-255] ， [0-1])

0-1: 0 全透明， 1 不透明

html 中的标签和属性
html ：
标签：
按照语法分类：

1. 单标签：只有开始标签

meta img a

2. 双标签：有开始标签和结束标签

3. 属性的语法

语法：

属性名 = " 属性值 "

属性名 = " 属性值 1 属性值 2"

注意 :

1 、标签名和属性名之间要有空格

2 、多个属性之间要有空格

3 、多个属性值之间要有空格

4. 开始标签标签名后有空格

按照标签在页面中的呈现效果分类：

1 、行内元素

行内元素定义 : 在一行内显示，只能设置左右间距，不可以设置上下间距。

举例： span del i em b strong a(title= " 鼠标移入时显示的文字 " ;target= " " ( 新窗口打开的位置 _self: 在本窗口打开 ;_blank: 在新窗口打开 ) ...

2 、块元素

块元素定义：可以设置宽高，独占一行。

举例： div 标题标签列表标签段落标签 ...

3 、行内块元素

行内块元素定义：可以设置宽高，在一行显示。

举例： img 【 title= " 鼠标移入时显示的文字 " 】表单控件

元素的转换

块元素： display: block;

行内块元素： display: inline-block;

行内元素： display: inline;

元素的级别

块元素 > 行内块元素 > 行内元素

元素嵌套规范

1 、同一级别可以相互嵌套

2 、级别高的元素可以嵌套级别低的元素

3 、段落标签只能嵌套行内元素

4 、 a 标签不可以嵌套 a 标签； p 不能嵌套 p

盒子模型及其问题

四部构成：

1 、 margin 外间距盒子与盒子之间的距离

2 、 border 边框

3 、 padding 内填充（内间距）边框与内容之间的距离。

4 、 content 内容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin: 0 auto; auto 自动

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width ：上边框的宽度

padding: 设置方法同 margin

content: ;

width : 数值百分比 auto

height: 数值百分比 auto

盒子模型的问题：

1. 大部分元素的 margin 和 padding 默认为，但有一部分的 margin 和 padding 不为，例如 body 标题标签（ h2-h7 ）（ ul ol il 等列表标签）段落标签

2. 想领的两个块元素的 margin 会重合，值会取最大值

3.margin 可以为 [ 负数 ] ， padding 不可以设置 [ 负数 ] 。

4. 行内元素 margin 只有左右，没有上下

5. 如果（ 1 ）发生嵌套关系的元素，（ 2 ）父元素没有上边框，（ 3 ）上 padding ，（ 4 ）父元素与子元素之间没有别的内容，此时子元素 margin-top 就会作用到父元素身上

margin-top 的解决方式：

1. 用父元素的 padding-top 代替子元素的 margin-top ；

2. 给父元素添加 overflow ： hidden ；

宽高的设置和计算

height ： auto / 百分比 / px ；
width ： auto / 百分比 / px ；
height ： auto ；参照与父元素
width ： auto ；参照与内容
box-sizing ： border-box ；将边框算入盒子内；

一个元素实际的宽高
实际宽度 = border-left + padding-left + width +paddint-right + border-right;
实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;
浮动

作用：让块元素横排排列
样式： float ： left ；从左往右排列

float ： right ；从右往左排列

原理：让元素脱离文档流，让元素从文档层浮动到浮动层。
引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）

* 解决方式一：给父元素添加 overflow ： hidden ；（超出部分隐藏）

* 解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。

clear ： right/left/both ；别的浮动对它的影响清除掉

例：

.box ： after{

content: "";

display: block;

width: 0;

height: 0;

clear: both;

}

* 解决方式三：父元素能设置高度的尽量设置高度

浮动之后的块元素参照内容：属性值 auto
定位

定位的元素脱离文档层，到达定位层
定位的元素会多出 5 个样式：

top right bottom left z-index ： 999

上右下左层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】

层级：
z-index ：整数；
定位的几种方式：
1. 相对定位：

相对于自身来定位，在文档层中保留原来的位置

用法：

position ： relative ；

2. 绝对定位：

相对于最近的定位的祖先元素来定位，完全脱离文档流（其他顶替其位置）

用法：

position ： absolute ；

+ 方向值

3. 固定定位：

相对于浏览器的四条边，完全脱离文档流

用法：

position ： fixed ；

top 与 bottom 同时定义，那个样式会作用到元素身上的判断关系：

top 的权重比 bottom 的权重大

left 的权重比 right 的权重大

元素作用时：

1. 如果是

position ： relative ；

left ：；

margin ：；

先作用 margin ，在作用 relative ；

2. 如果是

position ： absolute ；

left ：；

margin ：；

先作用 absolute ，在作用 margin ；

定位元素的居中方式：
方法一：

1 . 水平居中：

position ： absolute ；

left ： 50 % ；

margin- left ： - 自身长度的一半；

2 . 垂直居中：

position ： absolute ；

top ： 50 % ；

margin-top ： - 自身长度的一半；

3 . 绝对居中：

position ： absolute ；

left ： 50 % ；

top ： 50 % ；

margin- left ： - 自身长度的一半；

margin-top ： - 自身长度的一半；

方法二：

1 . 水平居中：

position ： absolute ；

left ：；

right ：

2D 和 3D

2D 和 3D 属性：
1. 平移样式

transform :translate(x, y ); 向上为负，向下为正

transform :translateX(100px);

transform ： rotate （ 180 deg ）；（ 1 turn ）转一圈

平移 transform :translate （）例子： translate （ x ， y ） translateX （）

旋转 transform :rotate （）例子 rotate （ 180 deg ）顺时针 -180deg 逆时针

transform ： rotate （）空格 translate （）；

transform-origin :px px ; 变换的中心点；

left center ；

缩放 transform :scale （）例子： scale （ 2 ）放大为原来的 2 倍 scale （ 0.n ）缩小为原来的 0.n scale （ m ， n ） x 轴 m ， y 轴 n

斜切 transform :skew （）例子： skew （ 45 peg ）左拉伸 45° skew （ 45 peg ， m ）

过渡 transition
transition ： all 0.5s ；

全部时间

3. 过渡的属性样式： transition-property: ， ;

可以为：属性的全部样式

4. 过度的总时间： transition-duration ：；
5. 过渡的时间函数： transition-timing-function ：；

linear （匀速） ease （开头结尾慢，中间快）

cubic-bezier （ 1 ， 0.07 ， 0.54 ， 0.21 ）贝塞尔曲线

6. 延迟 transition-delay ：；

3d 效果：和 2d 的一样 transition ， transform ；

prespective ：给父元素加 prespective （灭点的值）

prespective-origin ： x y ；灭点的位置调整观察的角度（大多数情况不设置）

transform ： ratate3d （ 0-1 的值 , 0-1 的值 , 0-1 的值 , 45 deg ）

transform ： ratateY （ 45 deg ）

transform ： translate3d （ 0-1 ， 0-1 ， px ）

父元素： transform-style ： preserve-3d ；
动画

动画规则：

@ keyframes 动画名（随便给） {

（动画规则）

from {}

to {}

}

@ keyframes 动画名（随便给） {

（动画规则）

0%{}

50%{}

100%{}

}

@ keyframes animation1{

from {

background-color :red;

}

to {

background-color :blue;

}

挂载动画 : 将动画加到元素身上

. 元素 {

animation ： animation1 时间步数时间函数延迟时间次数；

}

挂载多个动画：

. 元素 {

animation ： animation1 时间 ,animation2 时间 ,animation1 时间；

其他动画的相同的可以附件通过 animation 属性；

}

animation 的样式
动画名： animation-name
时间： animation-duration
步数： animation-steps ： 8 ；
时间函数： animation-timing-function
延迟： animation-delay
动画次数： animation-iteration-count ： infinite （无限次） /2 ；
指定下一次动画是否逆向： animation-direction ： alternate （逆向） / normal （常规）；
最后的状态： animation-fill-mode ： backwards （默认（保持一开始的状态）） /forwards （保持当前的状态）；
状态即指定动画是否运动： animation-play-state: running （运行） /paused （静止） ;

元素分类

按照在页面中的呈现效果：
1. 行内元素：在一行内显示，不可以设置宽高：（存放文字）

span a b i strong del

2. 行内块元素：在一行内显示，可以设置宽高：（有缝隙不常用）

img 表单控件

3. 块元素：可以设置宽高，独占一行

div 标题标签（ h2-h7 ）列表标签（ ul-li ol-li dl>dt+dd 段落标签（ p pre ））

元素嵌套规范：

1. 同一级别可以相互嵌套

2. 级别高的可以嵌套级别低的元素

3.p 标签只能嵌套行内元素

4.a 链接不能相互嵌套

元素的转换：

1. 块元素： display ： block ；

2. 行内块元素： display ： inline -block ；

3. 行内元素： display ： inline ；

背景图片以及浏览器内核

背景图

先设大小，在引 background ；

background: url( ' 路径 ' ) no-repeat left bottom/contain ；

// 图片位置禁止重复位置（ top bottom left right ）

路径： background-image ： url （ “” ）， url （ “” ）；加载多张背景图
背景图大小： background-size ： 100px auto ， 100px auto ；会重复
背景的图重复：

4. background- repeat ： no- repeat ， repeat ；（无重复）

5. background- repeat ： repeat -x （ x 方向重复）

background- repeat ： repeat -y （ y 方向重复）

背景图的位置：

background-position ： x y ；（数值方位值（ top/bottom left / right center （可以省略）））

背景开始渲染的位置： background-origin: ;

8. padding- box ；（默认）从 padding 位置开始渲染

9. border- box ；从边框的位置开始渲染

content- box ；从内容的位置开始渲染

图片结束渲染的位置： background-clip: ;

11. padding- box ；（默认）从 padding 位置结束渲染

12. border- box ；从边框的位置结束渲染

content- box ；从内容的位置结束渲染

使得背景图加载到浏览器中
background-attachment: fixed;

8. 可以简写：

background ：空格隔开；

背景图渐变
background: linear-gradiend(top ，颜色 1 ，颜色 2 ，颜色 n)

// 渐变开始的方向（默认 top ）类似 25deg （ 25 度）

10. 浏览器内核 // 背景色渐变

1. /* 标准语法 */

例子： background : linear-gradient ( top , #3bbcff , #47eaff );

2. /* 谷歌内核 -webkit- */

例子： background : -webkit-linear-gradient ( top , #3bbcff , #47eaff );

3. /* 火狐内核 -moz- */

例子： background : -moz-linear-gradient ( top , #3bbcff , #47eaff );

4. /* 欧鹏内核 -o- */

例子： background : -o-linear-gradient ( top , #3bbcff , #47eaff );

5. /* IE 内核 -ms- */

例子： background : -ms-linear-gradient ( top , #3bbcff , #47eaff );

文件的读取方法路径

绝对路径：从盘符开始的一条完整路径
相对路径：两个文件的位置关系
边框的相关属性【圆角，边框形状】

border-radius ：边框的半径设置圆角 n% 或者 num 像素
border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

透明度

透明性的选择：（整个容器都变）
opacity ：； 0-1 之间的值；
字体

font-family =“ 字体 ” // 字体样式可以被继承
鼠标移入样式

span 标签
cursor ： pointer ；鼠标样式：手型
阴影

box-shadow ： x 轴偏移量 y 轴偏移量阴影的模糊程度阴影的大小（和本身一样大小）阴影的颜色；
引入字符图标

引入字符图标：
行内元素随意
span class=“iconfont 图标类名 ”
可调节样式：同文字
文档流

文档流：

标准情况下，页面元素从左往右从上往下依次排列

flex 布局 ( 规范的设计稿 )- 弹性布局

容器（父元素）的属性：【 display:flex; 】

*flex-direction: 决定主轴方向。

row 主轴在水平方向，从左向右（默认）。

row- reverse 主轴在水平方向，从右向左

column 主轴在垂直方向，从上到下

column- reverse 主轴在垂直方向，从下到上

*flex- wrap : 决定项目换行

wrap : 项目换行

nowrap: 项目不换行（默认值）

wrap - reverse ：项目换行且反转

*justify-content: 决定项目在主轴的对齐方式

flex-start; 主轴的起点

flex- end ; 主轴的终点

center; 主轴的中心

space-between; 两端对齐

space-around; 项目两侧距离相等

*align-items ：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）

flex-start: 交叉轴的起点

flex- end ：交叉轴的终点

Center ：交叉轴的中心

baseline ：基线对齐（文本底部）

*align-content: 定义项目在交叉轴上的对齐方式（仅适用于多根轴线）

flex-start; 交叉轴的起点

flex- end ; 交叉轴的终点

center; 交叉轴的中心

space-between; 两端对齐

space-around; 两侧距离相等

子元素（项目）的属性：

*order ：定义项目的排列顺序，数值越小，越靠前，默认值为（可以取负值）。

*flex- grow: 定义项目的放大比例。默认值为，即使存在剩余空间，也不放大。

*flex-shrik ：定义项目的缩小比例，默认值为 1 ，空间不足，项目缩小 ; 值为时 , 空间不足 , 项目也不缩小 .

*flex- basis: 定义项目占据的主轴空间 . 默认 auto 或者自己添加像素 ;

*align- self: 定义单个项目在交叉轴的对齐方式 .

flex- start: 交叉轴的起点

flex-end ：交叉轴的终点

Center ：交叉轴的中心

滚动条

overflow-x ： auto ；超出部分在 x 轴的表现形式。

auto ：自动；（如果超出，就自动以滚动条的形式显示）

去滚动条：加在具有 overflow 属性的元素身上

::-webkit-scrollbar {

height ：；

}

swiper(.js).com
表格

[ 行 ] [ 列 ]

table 身上的属性

table 身上的属性：

border ：表格边框 cellspacing ：单元格间的间距

cellpadding ：单元格的内容与其边框的内边距

bgcolor ：表格的背景颜色 background ：表格的背景图片

width ：表格宽度 height ：表格高度

border-collaspe ： collaspe ：边框合并，不叠加 cellspacing ：：边框合并，但合并之后的边框宽度等于前两个边框宽度之和

caption ：表格标题

background: 表格背景图

cellspacing: 单元格之间的间隙宽度

align: 表格的水平对齐方式，通常是 left ， center ， right

表格的标题

<caption align=" 水平对齐方式 " valign=" 标题与表格的相对位置 "></caption>
单元格【 tr 】【 td 】

width ：单元格宽度 height ：单元格高度
align ：单元格内文本的对齐方式 , 通常是左，中，右 left ， center ， right
valign ：单元格内文本的对齐方式 , 通常是上，中，下 top ， middle ， bottom
nowrap ：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

<td align = "center" nowrap > 手机空中免费充值 </td>

</tr>

表格的跨行与跨列【 td 】

rowspan ：跨行标签，表示跨了多少行
colspan ：跨列标签，表示跨了多少列

表格标签拓展及其属性

thead ：定义表格的表头。

tbody ：定义表格主体（正文）。

tfoot ：定义表格的页脚（脚注或表注）。

colgroup ：标签用于对表格中的列进行组合，以便对其进行格式化。

注意：不管 thead 、 tbody 、 tfoot 的代码先后顺序如何， html 显示时，始终是先显示 thead ，再显示 tbody ，最后显示 tfoot 。

1 、 <thead> 内部必须拥有 <tr> 标签！
2 、 <tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
3 、 <tbody> 元素内部必须包含一个或者多个 <tr> 标签。
4 、必须在 table 元素内部使用这些标签。
5 、当不同行间的单元格合并时各单元格所在的行不要加 tbody 标签。
标题栏

《 tr 》 <th></th> 《 /tr 》用法和 td 相似知识自动将单元格内容以粗体显示

表单控件表单标签

action: 表单信息提交的位置；

method ：提交的方式

get ：地址栏，信息量少，安全性低

post ：信息量多，比较安全

1. 输入文本【输入框】：

用户名： <input type = "text" placeholder= " 请输入用户名 " maxlength= "10" value= " " name= "username" class = "" >

placeholder ：默认提示文本 ;

maxlength: 规定输入的最大字符数

name: 本文本框的名字，与后台进行数据交互用

class : 定义本文本框的样式，相当于盒子

placeholder 下的缩进

text-indent ： 2 em ；缩进

2. 输入密码【密码框】：

密码： <input type = "password" placeholder= " 请输入密码 " maxlength= "10" value= " " name= "psw" class = "" >

3. 单选按钮 [name 的值必须相同 ] ：

请选择你的性别：

<label for = "man" > [label 实现点什么就选中， for 中的值和 id 中的值相同 ]

男： <input type = "radio" name= "sex" id= "man" checked> //checked 默认选项

</label>

女： <input type = "radio" name= "sex" id= "woman" >

</label>

4. 多选按钮 [name 的值必须相同 ] ：

请选择你喜欢的音乐：

摇滚： <input type = "checkbox" checked>

5. 下拉列表【下拉框】：

选择你的学历：

</select>

6. 上传文件：

选择你的照片：

7. 留言文本空间：

</textarea>

8. 用户是否允许重新设置 textarea 大小 css 属性：

resize: none/both/vertical/horizontal; 不允许 / 上下允许拖动 / 只能在垂直方向拖动 / 只能在水平方向拖动

9. 重置按钮：

10. 提交按钮：

11. 自定义按钮：

12. 颜色：

13. 时间日期：

年月： <input type = "month" >

年周： <input type = "week" >

时分： <input type = "time" >

年月日： <input type = "date" >

年月时分： <input type = "datetime-local" >

14. 验证

<input type = "email" > 邮箱验证

<input type = "tel" autofocus> 电话

15. autofocus 自动获取焦点

</form>
文本模型
文本换行

使非中日韩文本换行
word-break: break-all ;
文本禁止换行

white-space:nowrap;
单行文本溢出部分以省略号显示

overflow: hidden;( 放文本的容器 )
text-overflow: ellipsis;
多行文本溢出

指定为弹性盒子
display: -webkit-box;
在弹性盒模型中指定元素的排列顺序
-webkit-box-orient: vertical;
指定文本显示（溢出）的行数 ;
-webkit-line-clamp: 3;
height 要是 line-height 的倍数
line-height: 70px;
overflow ： hidden ；

文章名称：好程序员HTML5培训教程-html和css的使用方法以及样式
本文路径：https://www.cdcxhl.com/article20/gdpcjo.html

成都网站建设公司_创新互联，为您提供域名注册、App设计、静态网站、网站维护、网站营销、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容