HTML-CSS1


html转义字符:

           <                             &lt;

            >                            &gt;

            空格                       &nbsp

             &                           &amp;

 列表:

             ul                          无序列表

             ol                          有序列表

             dl                          自定义列表

表格(table):

         包含:

            thead                     表格头部

            tbody                     表格主体

            tfoot                       表格尾部

            tr                            单元行

            th                           表头单元格

            td                            单元格

        属性:

            border                                  边框粗细

            cellpadding                          单元格内边距大小

            cellspacing                          单元格外边距大小

            colspan                                横向合并

            rowspan                               竖向合并

表单:

            abel                                       标签 语义化标签

   input:

       属性值:

             text                                          普通输入框

             password                                 密码输入框

             number                                         数字框

             image                                        自定义按钮

             radio                                              单选框

             checkbox                                       多选框

             range                                               滑杆

     以下了解:

              file                                                  上传框

              color                                            颜色选择框

              url                                                网址输入框

              tel                                                手机号输入框

           属性:

                placeholder                              预输入内容

                value                                        设置当前输入框里的内容

                maxlength                                限制输入框输入的最大长度

                minlength                                 限制输入框输入的最小长度

            数字框 (number)

                         max                                  最大值

                         min                                   最小值

            下拉框 (sekect)

                          optgroup                        代表一个大选项

                          option                             代表大选项下的小选项

                   属性:

                           label                              属性值是大标题的文本

                          selected                         默认选择


css常用文本样式

     color                       文字颜色                取值分为三种:1.英文    2.rgb  3.十六进制

     font-size                  字体大小                取值:一般分为像素值

     font-weight             字体粗细                取值:数字取值  100-900(整百数);

                                                                               normal  正常的字体相当于数值400

                                                                               bold  粗体,相当于数值700

                                                                               bolder  定义比继承值更重的值

                                                                               lighter  定义比继承值更轻的值

       font-style                   字体样式                取值:normal 正常字体;italic  倾斜字体

       font-family                  字体设置                取值:值为各种字体的名字

        text-align                    居中方式                取值:left  居左;

                                                                                    center  居中;

                                                                                    right  居右

        text-decoration              文本装饰线            取值:underline  下划线;

                                                                                       line-through  删除线;

                                                                                       none  没有

         text-indent                     文本缩进                取值:一般使用em,em可以自动

                                                                                        判断多少px像素,1em是

                                                                                        1个文字格

         letter-spacing                   字间距                    取值:px或者em

         word-spacing                   词间距                    取值:px或者em  

                                                                                 注意:需要在词的两边加上

                                                                                            空格才会生效

         line-height               行间距             自定义字体库:1.首先下载对应的字体库                                                                                                                                      文件

                                                                                            2.把文件放到html文件的

                                                                                                目录结构中

                                                                                             3.css当中使用@font-face

                                                                                                 关键字来设定其中的

                                                                                                 font-family和src

                                                                                            4.如果某个标签要使用自

                                                                                              定义字体库,则使用

                                                                                              font-family属性即可


css三大特性

1.层叠性:如果权重值一样,那么就会按照顺序来执行最后一个样式,这就是层叠性。

2.继承性:a:给父类设置的一些属性,子元素可以继承这些属性。

                  b:有些属性是没有继承性的,判断一个元素是否有继承性,则需

                        要查看文档和测试。比如:颜色,字体,文本有继承性;

                        大小,内外距,浮动,定位没有继承性。

3.优先级:a:css权重值,权重值大优先级越大,权重值越小优先级越小。

                  b:权重值:i:!inportant 无穷大

                                           行内样式    1000

                                           id选择器    0100

                                           calss选择器,伪类,属性选择器  0010

                                           标签选择器和伪选择器    0001

                                         通用选择器(*),子选择器(>),包含选择器,相邻选择器(+)等

                                          选择器不在等级之内0000

                                     ii:权重值可以想加,但不可以进位。


定位 position

相对定位 relative               i .相对定位是以自身的位置来参考位移

                                         ii.相对定位的元素不脱离文档流(就是原来的位置不会被

                                         占用)(还是遵循流式布局,从左往右,从上到下的排列

                                          方式)

                                        iii.通过left top right bottom 来进行位移。


绝对定位 absolute            i.绝对定位的移动参考元素是带有定位的父元素,如果找不

                                           到有定位的父元素,则一直向上找,直至body/html/浏览

                                            器窗口,当成参考元素

                                           ii.绝对定位会脱离文档流,原有的位置会被后面的元素取代,

                                            不遵循流式布局。

                                           iii.通过left top right bottom 来进行位移


静态定位 static                   i.没有使用过定位的元素就是静态定位的状态,也就

                                            是默认状态。

                                           ii.静态定位不脱离文档流,而且四个方向的位移也不能使用,

                                             使用也是无效。


固定定位 fixed                        i.将元素固定到视窗某个位置

                                              ii.固定定位脱离文档流

                                             iii.如果不设置宽度,宽度就是内容的宽度

                                            iiii.通过left top right bottom 来进行位移


粘性定位 sticky                     i.当用户滚动时,在相对定位和固定定位来回切换,

                                              在达到某个值的时候,就会固定到屏幕上。

                                            ii.通过 top bottom 来进行判断


定位的层级关系                  i.如果碰到两个定位浮起的元素,则有可能自己的那

                                            一个元素在后面被遮住,如果想要让这个元素在最

                                           上面则需要用z-index

                                            ii.   z-index             值:        数字,数字越大层级越高


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容

  • 好看的网页千篇一律,有趣的代码万里挑一。 祝大家元宵节快乐!做个快乐的小脑斧。。。-今天过后,全面复工啦!要收心工...
    云瑶糖糖阅读 815评论 0 2
  • 第一部分 HTML 第一章 职业方向和规划定位 职业方向规划定位: web前端开发工程师 web网站架构师 自己创...
    走到天边去阅读 211评论 0 0
  • 一、HTML5语义化 1.为什么需要语义化:易修改、易维护;无障碍阅读支持;搜索引擎友好,有利于SEO;面向未来的...
    linqii阅读 476评论 0 0
  • 目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...
    Moquyun阅读 513评论 0 0
  • 课程来自慕客网:http://www.imooc.com/code/49 另外有网易coursera合作的课程:网...
    喵在野阅读 1,752评论 3 30