码迷,mamicode.com
首页 > Web开发 > 详细

Web前端入门学习(1)——走进前端世界

时间:2016-10-20 01:27:53      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:前端开发 web基础入门

前端基础知识

  1. 前端开发语言

    HTML(Hypertext Markup Language):超文本标记语言;

    CSS(Cascading Style Sheets):层叠样式表;

    JS(JavaScript):脚本语言。


  2. 样式表:

    行间样式表、内部样式表、外部样式表。


  3. 样式

    样式格式:属性名:属性值


    常见样式:

    border:1px solid red

    border-width:1px

    border-style:solid

    border-color:red


    常见颜色模式:

    关键字:red yellow blue white...

    rgb:(123,12,44)

    十六进制:#3f3f3f


  4. 盒子边框

    border-top:1px solid red

    border-right:1px solid red

    border-bottom:1px solid red

    border-left:1px solid red


  5. 背景

    background-color

    background-image

    background-repeat:(no-repeat repeat-x repeat-y repeat inherit)

    background-position(top right bottom left 30px 20px 50% 30% inherit)

    background-attachment:(srcoll fixed inherit)

    background复合:blue url(./a.img) no-repeat 20px 30px fixed;


  6. 文字设置

    font-weight:(normal bold bolder lighter 100~900(normal:400,blod:700) inherit)

    font-style:(normal italic oblique inherit)

    font-size:字体大小

    line-height:行高

    font-family:元素字体

    font复合:font-style font-weight font-size/line-hight font-family


  7. 文本设置

    color

    text-align

    text-indent

    text-decoration

    letter-spacing

    word-spacing

    white-space:(normal pre nowrap pre-wrap pre-line inherit)


  8. 超链接

    a:link 未访问过的链接;

    a:visited 已访问过的链接;

    a:hover 鼠标放在链接上时;

    a:active 链接被点击的那一刻;

    规则:a:hover必须放在a:link和a:visited后面,a:active 必须放在a:hover后面。

    download下载:点击下载href指定的地址内容。

    target:_blank _self _parent _top filename

    base标签:在<head>头部为页面上所有链接规定默认目标。

  9. padding填充

    padding-top padding-rihgt padding-bottom padding-left


    padding:15px 20px 18px 25px

    上填充:15px

    右填充:20px

    下填充:18px

    左填充:25px


    padding:10px 20px 15px

    上填充:10px

    左右填充:20px

    下填充:15px


    padding:20px 15px

    上下填充:20px

    左右填充:15px

    填充(内边距):相当于给盒子填充了厚度,会影响盒子的大小。


  10. margin外边距

    margin-top margin-rihgt margin-bottom margin-left


    margin:15px 20px 18px 25px

    上边距:15px

    右边距:20px

    下边距:18px

    左边距:25px


    padding:10px 20px 15px

    上边距:10px

    左右边距:20px

    下边距:15px


    padding:20px 15px

    上下边距:20px

    左右边距:15px


    padding:100px auto 0px

    上边距:100px

    左右边距:居中

    下边距:0px


  11. 盒子模型

    盒子大小:边距、边框、填充、内容。

    盒子宽度:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;

    盒子高度:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;


本文出自 “小倩加油站” 博客,请务必保留此出处http://cherry360.blog.51cto.com/12176744/1863428

Web前端入门学习(1)——走进前端世界

标签:前端开发 web基础入门

原文地址:http://cherry360.blog.51cto.com/12176744/1863428

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!