html和css的使用方法以及样式

番茄西红柿发布于2019-04-23 11:46 / 2074人阅读

摘要：浮动的元素脱离文档流解决方式一给父元素添加超出部分隐藏解决方式二在父元素内容最后添加拥有清除浮动属性的元素。

布局步骤

第一步： 清除默认样式
第二步： 划分模块
第三步： 设置模块的大小以及位置
第四步： 划分下一级模块

html和css

引入网页头像

<link rel="shortcut icon" href="img/...ico">

css样式表的引入方式

css样式表的引入方式
1、外链式
    <link href="" rel="stylesheet">
2、嵌入式
    <style>style>
3、行内样式
    <div style="width:200px;height:200pxs;">div>
4. @import url()

文件命名以及变量命名

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

清除默认样式

清楚边距
    *{
        margin: 0;
        padding: 0;
        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.双标签：有开始标签和结束标签
        <html>html>
    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默认为0，但有一部分的margin和padding不为0，例如body  标题标签（h1-h6）（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：0；
        right：0

2D和3D

2D和3D属性：
1.平移样式
    transform:translate(x,y);  向上为负， 向下为正
        transform:translateX(100px);
    transform：rotate（180deg）   ；  （1turn）转一圈
    平移  transform:translate（）   例子：translate（x，y） translateX（）
    旋转  transform:rotate（）   例子rotate（180deg）顺时针   -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（45peg）  左拉伸45°  skew（45peg，m）
          
2. 过渡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的值,45deg）
        transform：ratateY（45deg）
    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 标题标签（h1-h6） 列表标签（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. 背景的图重复：
          background-repeat：no-repeat，repeat；（无重复）
          background-repeat：repeat-x（x方向重复）
          background-repeat：repeat-y（y方向重复）
4. 背景图的位置：
          background-position：x  y；（数值  方位值（top/bottom  left/right center（可以省略））  ）
5. 背景开始渲染的位置： background-origin:    ;
        padding-box；（默认）从padding位置开始渲染
        border-box；从边框的位置开始渲染
        content-box；从内容的位置开始渲染
6. 图片结束渲染的位置：background-clip: ;
        padding-box；（默认）从padding位置结束渲染
        border-box；从边框的位置结束渲染
        content-box；从内容的位置结束渲染
7. 使得背景图加载到浏览器中
    background-attachment: fixed;
8.可以简写：
    background：空格隔开；
9.  背景图渐变
    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轴偏移量  阴影的模糊程度  阴影的大小（0和本身一样大小）  阴影的颜色；

引入字符图标

引入字符图标：
行内元素  随意  
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：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。
    *flex-grow:定义项目的放大比例。默认值为0，即使存在剩余空间，也不放大。
    *flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.
    *flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;
    *align-self:定义单个项目在交叉轴的对齐方式.
        flex-start:交叉轴的起点
        flex-end：交叉轴的终点
        Center：交叉轴的中心

滚动条

overflow-x：auto；超出部分在x轴的表现形式。
            auto：自动；（如果超出，就自动以滚动条的形式显示）
去滚动条：  加在具有overflow属性的元素身上
    ::-webkit-scrollbar{
        height：0；
    }
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
  值                       描述                         测试
visible         不裁剪内容，可能会显示在内容框之外。          测试
hidden          裁剪内容 - 不提供滚动机制。                 测试
scroll          裁剪内容 - 提供滚动机制。                   测试
auto            如果溢出框，则应该提供滚动机制。              测试
no-display      如果内容不适合内容框，则删除整个框。           测试
no-content      如果内容不适合内容框，则隐藏整个内容。         测试

轮播图

swiper(.js).com

表格

<table border="" width="" bgcolor="背景色" cellspacing="设置单元格间的距离" cellpadding="内填充：内容到边框的距离" >
    <tr bgcolor="">[行]
        <td>td>[列]
        
    tr>
table>

table身上的属性

table身上的属性：
    border：表格边框 cellspacing：单元格间的间距
    cellpadding：单元格的内容与其边框的内边距 
    bgcolor：表格的背景颜色 background：表格的背景图片
    width：表格宽度 height：表格高度
    border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于       前两个边框宽度之和
    caption：表格标题
    background:表格背景图
    cellspacing:单元格之间的间隙宽度
    align:表格的水平对齐方式，通常是left，center，right

表格的标题

<caption align="水平对齐方式" valign="标题与表格的相对位置">caption>

单元格【tr】【td】

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

    <tr align="center" valign="bottom">
        <td align="center" nowrap>手机空中免费充值td>
        <td width="100px">IP卡td>
        <td width="100px" bgcolor="#006400" valign="top">网游td>
    tr>

表格的跨行与跨列【td】

rowspan：跨行标签，表示跨了多少行
colspan：跨列标签，表示跨了多少列
<table border="3" bordercolor="plum" width="300" height="100" align="center" cellspacing="0">
    <tr>
        <td rowspan="6" background="../img/4.jpg">td>
        <td rowspan="3">td>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td >td>
    tr>
    <tr>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td rowspan="3">td>
        <td>td>
    tr>
    <tr>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td>td>
    tr>
table>

表格标签拓展及其属性

    thead：定义表格的表头。  
    tbody：定义表格主体（正文）。
    tfoot：定义表格的页脚（脚注或表注）。 
    colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。
    注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。
1、<thead> 内部必须拥有 <tr> 标签！
2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
4、必须在 table 元素内部使用这些标签。
5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

idc机房托管专线服务 html的css样式 php使用css样式 html中css样式 css和html的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1146.html

前端修炼の道 | 带你走进迷人的 CSS 世界

摘要：每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

shiweifu 2019-08-23 13:58 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

levius 2019-08-02 18:17 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0
CSS、Sass、Scss，以及sass和scss的区别

摘要：即元素脱离文档流的布局，在页面的任意位置显示绝对定位脱离文档流的布局，遗留下来的空间由后面的元素填充。相对定位不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。 1、描述 CSS 指层叠样式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理...

caozhijian 2019-08-30 11:16 评论0 收藏0
如何写出高效率的HTML

摘要：之所以写这篇文章，就是为了告诉你如何写出干净整洁的代码，能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中，你能够学会如何搭建易于维护和的网站以及。无论如何，尽量避免同时在和，或者和添加。个人翻译，欢迎转载！英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻...

lsxiao 2019-08-28 18:10 评论0 收藏0