HTMLCSS基础初识代码

2020/2/21CSS第一课初识代码什么是语言？语言：交流工具人与人之间的沟通交流，我们会用到各种语言，比如：汉语，英语……；作为一个前端工程师，要与浏览器沟通交流，就要用到浏览器所能识别的语言；前端开发语言介绍html（HypertextMarkupLanguage）——结构超文本标记语言css（CascadingStyleSheets）——样式层叠样式表js（javascript）——行为html第一个页面html超文本标记语言标记html标签html/html标签对!DOCTYPEHTML声明文档类型metacharset=utf-8/代码编码格式单标签：直接在后面斜杠结束的标签叫做单标签。样式表出现的位置行间样式表divstyle=……/div内部样式表style…………/style外部样式表linkhref=style.cssrel=stylesheet/常见样式一background属性：属性值；width宽度height高度background背景background-attachment:fixed;背景是否滚动background-color:gray;背景颜色background-image:url(bg.jpg);背景图background-repeat:no-repeat;背景图是否重复background-position:center0px;背景图位置常见样式一borderborder边框border-width边框宽度border-style边框样式border-color边框颜色边框样式：solid实线dashed虚线dotted点线（IE6不兼容）常见样式一paddingpadding内边距padding-top上边内边距padding-right右边内边距padding-bottom下边内边距padding-left左边内边距padding:toprightbottomleft;注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。常见样式一marginmargin外边距外边距的问题：1、上下外边距会叠压；2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）外边距复合：margin:toprightbottomleft;盒模型盒子大小=border+padding+width/height盒子宽度=左border+左padding+width+右padding+右border盒子高度=上border+上padding+height+下padding+下border常见样式一结构结构样式：width宽度height高度background背景border边框padding内边距margin外边距复合属性：一个属性多个属性值的命令，叫做复合属性。常见样式—文本设置font-size文字大小（一般均为偶数）font-family字体（中文默认宋体）color文字颜色（英文、rgb、十六位进制色彩值）line-height行高text-align文本对齐方式text-indent首行缩进（em缩进字符）font-weight文字着重font-style文字倾斜text-decoration文本修饰letter-spacing字母间距word-spacing单词间距（以空格为解析单位）常见复合属性复合属性：backgroundborderpaddingmarginfont：font-style|font-weight|font-size/line-height|font-family；常见样式(17个)width宽度height高度background背景border边框padding内边距margin外边距font-size文字大小font-family字体color文字颜色line-height行高text-align文本对齐方式text-indent首行缩进font-weight文字着重font-style文字样式text-decoration文本修饰letter-spacing字母间距word-spacing单词间距前端开发环境Photoshop（切图、修图、测量）Dreamweaver浏览器（两大类）：IE浏览器：IETester（IE6、IE7、IE8）、IE9、IE10……标准浏览器：firefox（fireBug）、chrome、safari、oprea…