你的位置:首页 > 软件开发 > 网页设计 > HTML5语法基础学习笔记

HTML5语法基础学习笔记

发布时间:2017-08-16 23:00:12
1.行间样式给单独的标签添加样式.<div ></div>优点:比较方便可以即时的添加属性。缺点:修改属性非常麻烦、需要一个个去修改。2.内联样式表<style>div{ <!--选择器跟{}符号 属性写在里面-->}</s ...

1.行间样式
给单独的标签添加样式.
<div ></div>
优点:比较方便可以即时的添加属性。
缺点:修改属性非常麻烦、需要一个个去修改。

2.内联样式表
<style>
div{ <!--选择器跟{}符号 属性写在里面-->
}
</style>
优点:针对当前HTML文件有效。
缺点:多页面修改时繁琐困难。

3.外联样式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>

边框:
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<!--
边框组成:
1、边框的粗细 1px;
2、边框的样式 solid(实线); dashed(虚线);
3、边框的颜色 red;
边框的方向:
top right bottom left
上右下左 可以单独设置边框方向和属性
改变某一个方向边框的做法:
border-top-color:red;
border-top-style:
border-top-width:
边框的形状:非矩形
边框画三角形实例:
首先设置边框宽度,背景色跟背景一致(假如背景为白色)。
border:20px solid white
然后设置边框某一方向样式(设置TOP为向下三角形)颜色,为三角形颜色。
border-top-color:red;
以上为红色三角形。
设置某一方向样式颜色会生成方向相反的三角形。
-->
<body>
<div></div>
</body>

边框练习的步骤及需求.

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
不分属性书写顺序的
颜色相关 图片相关

<!--内容:
<img src='/images/loading.gif' data-original="url">这样的图片链接样式会撑开容器宽高
背景不会占用容器宽高 -->

切图:
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
首行缩进

 

原标题:HTML5语法基础学习笔记

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。