html学习笔记★日志加线框背景色,HTML5语法基础学习笔记(示例代码)

1.行间样式

给单独的标签添加样式.

优点：比较方便可以即时的添加属性。

缺点：修改属性非常麻烦、需要一个个去修改。

2.内联样式表

div{

}

优点：针对当前HTML文件有效。

缺点：多页面修改时繁琐困难。

3.外联样式表

边框：

div{

width:400px;

height:400px;

border:1px solid red;

}

边框练习的步骤及需求.

1.先分析设计图的结构.

2.根据所分析的结构,进行结构编码.

3.根据所书写的结构,进行CSS编码.

4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.

5.样式添加.

background 背景

background-color 背景颜色

颜色英文关键字

RGB

十六进制

background-image 背景图

背景图默认铺满整个容器大小

background-repeat

背景是否重复

no-repeat

不重复

repeat-x;

X轴方向横向平铺

repeat-y;

Y轴方向纵向平铺

repeat；

X\Y都重复

background-position:X Y;

背景图位置

具体数值：

X轴：left right center

Y轴：top bottom center

当第二个Y轴属性值没有填写，默认居中。

background-attachment: fixed;

背景图是否滚蛋

fixed 固定在浏览器可视区域

scroll 跟随滚动条滚动

background

不分属性书写顺序的

颜色相关 图片相关

切图：

1、头部区域(第一个块)切一张完整的图片

2、内容区域里的每一个小块需要有ICO并且还有背景颜色

文字样式：

font-weight 文字加粗

bold 加粗

normal 正常

font-style 文字倾斜

italic斜体

font-size 文字大小

font-family 字体

line-height 行高 文字在一行里面所占用的位置

heigth:400px;

line-height:400px;

当行高的值与容器高度一致时 文字会垂直居中显示

多行文字测量行高的方法：

1、确认文字大小

2、确认两行文字之间的空隙大小

3、空隙大小除以2，得出来的值就是每行文字的上下的空隙大小。

3.1当行高为奇数时，那么文字的上方要比下方少一个像素。

3.2当行高为偶数时，文字上下的空隙一致。

4.通过辅助线测量多行文字的行高。

文字的复合样式：

font:bold italic 26px "微软雅黑";

font复合样式需要注意书写顺序

font: font-weight | font-style | font-size/line-height | font-family

文本设置：

color

文字颜色

text-align

文本对齐(显示)方式

left(默认值)

right(右边)

center(中间)

text-indent

首行缩进