189 8069 5689

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

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

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

布局步骤
第一步: 清除默认样式
第二步: 划分模块
第三步: 设置模块的大小以及位置
第四步: 划分下一级模块
html 和 css
引入网页头像

css 样式表的引入方式

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

2 、嵌入式

3 、行内样式

  1. @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

     

  1. 过渡 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 )

  1. 路径: background-image : url ( “” ), url ( “” );加载多张背景图
  2. 背景图大小: background-size : 100px auto , 100px auto ; 会重复
  3. 背景的图重复:

4.     background- repeat : no- repeat , repeat ;(无重复)

5.     background- repeat : repeat -x ( x 方向重复)

  background- repeat : repeat -y ( y 方向重复)

  1. 背景图的位置:

background-position : x y ;(数值 方位值( top/bottom  left / right center (可以省略)) )

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

8.   padding- box ;(默认)从 padding 位置开始渲染

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

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

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

11. padding- box ;(默认)从 padding 位置结束渲染

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

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

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

8. 可以简写:

background :空格隔开;

  1. 背景图渐变
         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 : ;

}

overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 描述 测试
visible 不裁剪内容,可能会显示在内容框之外。 测试
hidden 裁剪内容 - 不提供滚动机制。 测试
scroll 裁剪内容 - 提供滚动机制。 测试
auto 如果溢出框,则应该提供滚动机制。 测试
no-display 如果内容不适合内容框,则删除整个框。 测试
no-content 如果内容不适合内容框,则隐藏整个内容。 测试

轮播图

swiper(.js).com
表格

[ 行 ] [ 列 ]



table 身上的属性

table 身上的属性:

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

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

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

width :表格宽度 height :表格高度

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

caption :表格标题

background: 表格背景图

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

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

表格的标题


单元格【 tr 】【 td 】

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

    手机空中免费充值

    IP 卡

    网游

表格的跨行与跨列【 td 】

rowspan :跨行标签,表示跨了多少行
colspan :跨列标签,表示跨了多少列













表格标签拓展及其属性

thead :定义表格的表头。  

tbody :定义表格主体(正文)。

tfoot :定义表格的页脚(脚注或表注)。

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

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

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

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

表单控件表单标签

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

    method :提交的方式

        get :地址栏,信息量少,安全性低

        post :信息量多,比较安全

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

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

        placeholder :默认提示文本 ;

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

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

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

       placeholder 下的缩进  

       text-indent : 2 em ;缩进

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

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

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

    请选择你的性别:

   

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

   

   

    女: type = "radio" name= "sex" id= "woman" >

   

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

    请选择你喜欢的音乐:

    摇滚: type = "checkbox" checked>

     摇滚: type = "checkbox" checked>

     摇滚: type = "checkbox" checked>

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

    选择你的学历:

   

6. 上传文件:

    选择你的照片:

    type = "file" >

7. 留言文本空间:

   

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

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

9. 重置按钮:

    type = "reset" >

10. 提交按钮:

    type = "submit" >

11. 自定义按钮:

    type = "button" value= " 按钮 " >

   

12. 颜色:

    type = "color" >

13. 时间日期:

    年月: type = "month" >

    年周: type = "week" >

    时分: type = "time" >

    年月日: type = "date" >

    年月时分: type = "datetime-local" >

14. 验证

    type = "email" >   邮箱验证

    type = "tel" autofocus>   电话

15. autofocus 自动获取焦点    


文本模型
文本换行

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

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

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

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

本文题目:好程序员HTML5培训教程-html和css的使用方法以及样式
链接分享:http://cdxtjz.cn/article/gdpcjo.html

其他资讯