HTML CSS入门

 1:创建环境

      (1)webstorm的安装:不做过多赘述,与多数软件安装方式一致。
      (2)建立project:目前只使用图中第一项,建立完成后在这个project中创建新的html与css格式页面(也可创建文件夹后在文件夹内创建,更便于管理。)

       (3)更多的辅助功能:webstorm与其他编译软件类似,在主题栏有多种设置辅助功能,这点可以私下慢慢了解,因为现阶段编译html中并没有设计过多辅助功能,所以在此忽略不提。

2:HTML基础

     (1)生成页面:在新的HTML编辑环境中生成的页面可通过在当页打开浏览器查看,查看有多种方法,最简单快捷的是在当前环境中当鼠标悬浮至右上角处时,会出现多种浏览器logo,只需点击你所想要运行的浏览器即可。其他方法后期会一点点补上。
      (2)基础标签:当前一些简单的标签足够我们写出一个像样的页面
             * 文本标签:<b></b>字体加粗   <i></i>斜体   <sub></sub>  下标(H <sub>2</sub> O)  <sup></sup>上标      <pre></pre>预先格式化标签(何种格式写入,何种格式输出显示)

           *  table(表格)标签:<table  ...></table> 建立表格,...可写入修饰样式(borber边框宽度 ,width表格宽度(总)等), <tbody></tbody>建立表格内容:<rt></tr>(行)中嵌入<th></th>(列 表标题)或<td></td> (列 表数据),特殊的当需要合并表格时<th  roespan="x">从当前位置起向下竖跨x行,  <th  colspan="x">从当前位置起向右横跨x行。

             *表单标签:<input  type="...">...代表各种形式表单数据,可查阅书籍得知。

             * 列表标签:<ol><li>...</li></ol>有序列表每一元素li前会有序号标识,<li>中使用type="a\A"来改变序列标识              <ul><li>...</li></ul>无序列表 无序号标识,用实心或空心圆点来列行,<li ...>...可加后缀修饰元素内容。

             * 样式:样式为修饰html中元素,根据样式设置位置与引入方式的不同又分为行内样式,内嵌样式与外部样式。

                      ** 行内样式:在<body>中的html标签中加后缀设置内容元素的内容,例如上文table中的修饰样式。

                      **内嵌样式:在<head>下建立<style></style>,利用选择器名称特殊或批量设置框架样式,选择器分为类选择器(同一标签为一类),class, id三种,常用为class与id:用class选择器时格式为.(class名称){...},class名称可多个区域块选择相同的名称,当所需样式一样时,相同的class名称更方便;用id选择器时格式为#(id名称){...},id为唯一名称,只能出现一次,不能重复使用。(样式内容与css特效写法一致,在css中会涉及整理。)

                      **外部样式:与内嵌样式内容一致,只是需将<style></style>换成<link>将css文件链接至html文件中实现样式编辑。

            * 块标签(容器标签)<div></div>框出一个大的架构,可嵌套所有内容,涉及继承问题(会在后续内容中写到)                                                <span></span>行级容器标签,只能包含文字内容,在特殊标记时常用。

3:css基础

           *盒子模型:盒子模型可以说是css中最基础最广泛应用的一种模型(自己理解的图)


               **盒子中的内容:content:                                                **盒子的边框:border

              **边框与内容之间的距离:padding                                    **盒子与其他盒子之间的举例:margin

            border:线宽,线的样式 ,  线颜色;

             padding与margin可分为:-left,-right,-top,-bottom;        也可:padding:上下值    左右值;  


                 **width,height为内容的宽度与高度;                  **line-height:字的高度(一行字),撑开内容

                **top:离顶部的距离,分为绝对定位与相对定位(与left一样)。

             *绝对定位与相对定位:在css样式中,定位决定着最后盒子块的展示效果,影响着各个方面的位置,我针对现在用到的最常用的父子集div与并行div,做了以下总结(更多层的还不能肯定自己的对错,在后续学习中会再次总结)

             **父子集:当父集与子集都没有定位时,子集的top与left值不做显示;      当父集相对定位或绝对定位,子集绝对或相对定位时,子集的top与left值以父集为相对目标丈量距离,父集的top与left值以页面边框为相对目标丈量距离;          当父集不做定位,子集绝对定位或相对定位时,父集的top与left值不做显示,子集的top与left值以父集为相对目标丈量距离;           当父集相对或绝对定位,子集不做定位时,子集top与left值不做显示,父集以页面边框为相对目标丈量距离。

    ***********默认父集与边框之间有一定的间隙,去除间隙用*{ margin:0; padding:0;}或绝对定位**********

              **并行div:绝对定位相对于浏览器定位,相对定位相对于上一个div定位(默认在上一个div的下方产生 )且相对的是上一个div不定位时的位置,绝对定位互不影响。

              *页面在Z轴上的层叠:以垂直屏幕向外的直线为Z轴,样式为Z-index:  当要求父集在子集上时,设置子集Z-index的值小于父集即可(Z-index的值可继承);Z-index的值与绝对定位有关,子集不做定位时,无法实现Z-index的功能。
              *样式:css:的样式多种多样,在这里只涉及至今为止比较常用的,更多的样式格式在各类书籍中均可查阅

                        **list-style:针对li前标识序列的标示,一般以“none”去掉;

                       **display:inline-block(转换为行级元素),none(不显示,多用于子集菜单div块),block(显示,与none相对);

                       **text-align:center文本对齐, 只用于文本,不能用于div块;

                        **float:  元素的浮动,常用left与right ,会对定位有影响,使用时应注意;

                       **hover鼠标悬浮(伪类):.A:hover{...}   ...中设置鼠标悬浮A时A的样式;      .A:hover .B{...}  ...设置鼠标悬浮A时B的变化,一般...为display:block,即鼠标悬浮A显示B的内容;

                       **overflow-y:scroll:超出y(高度)加滚动条;   overflow:scroll:超出(x与y)加滚动条;                                                    overflow:hidden:超出部分隐藏;

                       **text-decoration:none  :去下划线,针对a链接;

                       **border-radius:设置边框四周圆角,四个值按顺序分别为 左上,右上,右下,左下;

                       **background:linear-gradient(角度   颜色1   颜色2)  :背景渐变色,角度为0,90deg 180deg 270deg时分别为从下至上,从左至右,从下至上和从右至左的颜色1渐变至颜色2;

                       **outline:none  : 边框(input type中的自带边框)去除。

   以上只是初学一周对html和css的初步见解,在后续的深入学习与自我充实中,会陆续补齐这篇文章缺的内容,也许在文内也许开个新专题,谁知道呢。忙碌一周的总结就是:兴趣是最好的老师。都加油吧奋斗
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值