代码初识、盒模型详解笔记

1、  html为超文本标记语言(在写网页中主要起搭建结构的作用),css为层叠样式表(做样式),js为javascript(主要做出控制的行为)。

2、  <表示为标记,<xxx>表示为标签。<html></html>表示为标签对,前者叫开标签,后者叫做闭合标签,/表示闭合,在两个标签对中间可放入代码。

3、  <html></html>表示页面骨架结构,<head></head>表示页面的头,<body></body>表示页面的主体,<title></title>表示页面头部里面的标题(放在<head>中)。

4、  浏览器解析页面的文件的后缀只能为.html。

5、  头声明:<!DOCTYPEHTML>,!表示声明或注意,DOC表示文件,TYPE表示类型,HTML表示文件类型为超文本标记文件。

6、  <meta charset=”utf-8”/>表示代码编码格式为utf-8(国际标准),还有一种编码格式叫GB2312为中文简体标准,注意保存时文件本身的编码格式要与代码编码格式对齐。

7、  <div></div>表示块标签(放在<body>中),<div>中style为风格样式,可以放一个块的样式

8、  把样式放在块标签里面为行间样式,<!--  -->为body中的注释。

9、  在页面的头部直接放入<style></style>表示内部样式表,在内部样式表中样式主体写在{}中,在前加上这个style的名字#id{}。注意/*  */为css注释。

10、             把样式存在Css类型文件中的方法叫外部样式表(实际工作中都用这种方法),利用<link href=”链接文件”rel=“stylesheet”>链接外部样式表文件。

11、             XX:??;  XX表示属性,“:”表示的,??表示属性值,“;”表示结束。Width表示宽度(可不写,只有height的话,那默认为width为整个屏幕,height也是),height表示高度,background表示背景。

12、             Background中可放入背景颜色,url链接背景图片(默认铺满整个块),是否重复或者在哪个方向上重复repeat,还可以控制背景图的位置(先写在X轴移动几个px,再写在Y轴上移动几个像素,还可以用center等方位词来放置,还可以用%百分数来置位),是否固定fix,各个属性值之间用空格分开。Background为复合属性,表示一个属性有多个属性词。

13、             Border表示加边框(写在样式内)。border中可以放入边框的宽度,边框的样式(solid为实线,dashed为虚线,dotted为点线),边框的颜色。Border的上右下左四个边框分别可以赋予三个完全不同的属性,简便赋值时必须遵循上右下左的顺序。用border-top、border-left等来标记不同边框。

14、             Padding为内边距(写在样式内)。Padding中只能放入距离,用XX像素来表示。可以用padding-bottom、padding-right等来标记不同边框,同时padding在简便赋值时,必须遵循上右下左的顺序。注意:内边距相当于给块加了一些填充厚度,会影响块的大小。因此,在定义块的大小时,如果你不想让块的大小发生改变,要在宽高上减小你加入的padding值。

15、              Margin为外边距(写在样式内)。Margin中只能放入距离,用XX像素来表示。可以用margin-top、margin-bottom等来标记不同的外边距,同时再给margin简便赋值时,也必须遵循上右下左的顺序。注意:上下外边距会叠压;父子级包含的时候子级的margin-top会传递给父集(但是可用父集的内边距替代子级的外边距)。外边距有很多问题,尽量用内边距来替代外边距。但是margin外边距有一个很重要的应用,当写下margin-left:auto时,块的左边的外边距就等于原本块的右边的外边距;margin-right:auto也同理;如果,margin-left:auto和margin-right:auto,即左右的外边距都为自动时,网页的内容就全部居中,无论怎么调整窗口的大小,都居中。

16、             块的大小=border+padding+width/height

 

17、             文本设置:Frot-style表示文字样式,italic表示文字斜体,normal表示正常样式。

18、             Frot-weight表示文字着重,blod表示粗体,normal表示正常字体。

19、             frot-size表示文字大小,12像素为最小值,像素值都用偶数像素。

20、             Line-height表示文字行高,用XX像素表示。文字上的间隙和文字上的间隙是相同的,俩间隙+文字的像素大小=行高,即文字是在行高的上下居中。

21、             Frot-family表示字体样式,可直接跟中文字体名,比如:“微软雅黑”、“宋体,airal”,“,”表示如果前面的字体计算机中没有,可以用“,”后面的字体,“airal”表示最基本的英文字体。

22、             Frot是一个复合属性,其定义的顺序必须为frot:frot-style|frot-weight|frot-size/line-height|frot-family。

 

23、             Color表示文字的颜色。可用英文表示颜色;同时也可用ps的取色器取出的十六位进制的颜色代码,当然在代码前面要加“#”(常用);还可用rgb(XX,XX,XX)来表示颜色。

 

24、             Text-align表示文字的对齐方式。有left、right和center三种。

25、             Text-indent表示首行文字缩进,用XX像素表示,但一般可以用XXem,就可以缩进XX个文字。

26、             Text-decoration表示文本修饰,underline表示有下划线,overline表示上划线,line-through表示文本中间线,none表示无文本修饰。

27、             Letter-spacing表示文字间距,用XX像素表示。

28、             Word-spacing表示单词间距,用XX像素表示,注意源文字中必须有空格。

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值