LOGOHtml和Css网页设计和美化的基础知识LOGO主要内容LOGO什么是html和cssHtml是HypertextMarkupLanguage缩写。即超文本标记语言是用于描述网页文档的一种标记CSS是CascadingStyleSheet的缩写。即层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。LOGOhtml的一些基本标签<html></html>之间的文本描述网页<head></head>标签用于定义网页文档的头部，一般内容不显示给读者<title></title>定义文件标
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
，将显示在浏览器顶端<body>与</body>之间的文本是可见的页面内容<p></p>用来分段段落，最多只识别一个空格<h1></h1>写标题<br/>换行<!---->注释标记符<hr/>标签定义水平线<pre></pre>是预格式文本，保留空格和换行<ahref=“链接目标”>链接</a><table></table>创建表格<tr></tr>表格行<td></td.>表格列文本域输入：多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。（单选按钮：RadioButtons复选框（Checkboxes））*<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。LOGODiv标签<div>是一个块级元素，<div>标签可以把文档分割为独立的、不同的部分。<div>主要用来块的定位在div中能加多种属性，如：id选择器，类选择器，style也可以通过z-index来设置div层，值越大的越在前面，也就是说数值大的会覆盖数值小的层LOGO属性的详细解释 背景属性：background-color:black背景颜色 background-image:url(image/bg.gif)背景图片 background-repeat:no-repeat不重复排列repeat-x在x轴重复排列repeat-y在y轴重复排列background-position:背景图片x与y轴的位置 文字属性：color:#999999文字颜色font-family:文字字型font-size:文字大小font-style:italic文字斜体letter-spacing:文字间距line-height:设定行高font-weight:文字粗细，用normal|bold|bolder|lighter|具体数值LOGO 边框 border-top:上框后面值可以为：1pxsolidblack 同理可以设置border-bottom:下框border-left:左框 border-right:右框 border:1pxsolid#6699cc是同时设置四边框LOGOCSS的插入 插入外部样式表： <head> <linkrel=“stylesheet”type=“text/css”href=“mystyle.css"/> </head> mystyle,.css是我们自己写的CSS文件 插入内部样式表：例如： <head> <styletype="text/css"> hr{color:sienna;} p{margin-left:20px;} body{background-image:url("images/back40.gif");} </style> </head>LOGOId选择器和类选择器 id选择器可以为标有特定id的HTML元素指定特定的样式。 id选择器以“#”来定义。 同一个body中的id选择器不能同名， 类选择器以一个点号(.)显示,例如：.center{text-align:center} 同一个body中的类选择器可以同名LOGOCSS框模型Css中边距比较图LOGO网页中关于长度的一些东西 Px：相对长度单位。像素（Pixel），像素是相对于显示器屏幕分辨率而言的。 em相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 Ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 Pt：绝对长度单位。点（Point）。1in=2.54cm=25.4mm=72pt=6pc Pc：绝对长度单位。派卡（Pica） In：绝对长度单位。英寸（Inch）LOGOCSS文字样式设置： a）正文通常使用易读性较强的serif字体，标题和表格则采用较醒目的sans-serif字体 b）文字大小font-size c）文字颜色color d）文字粗细font-weight e）斜体font-style f）文字的下划线、顶线、删除线、闪烁text-decoration g）英文字母大小写text-transformcapitalize首字母大写uppercase全部大写lowercase全部小写 h）letter-spacing：字母间距 段落的多样式：段落的水平对齐方式：text-align 段落的垂直对齐方式：vertical-align 行间距：line-height 字间距：word-spacingLOGOCSS设置图片效果 a）CSS图片设置样式： border-style定义边框的样子 border-color定义边框的颜色 border-width定义边框的粗细 分别设置4个边框：border-left，border-right，border-top，border-bottom 合并书写各个属性值，用空格分开 b）图片缩放： width height 当只设置图片width属性，而没有设置height属性时，图片会自动的纵横比例缩放 c）图片的对齐 横向对齐方式：图片的水平对齐通常不能直接通过设置图片的text-align属性，而通过设置其父元素的该属性来实现 纵向对齐方式：vertical-align d）图文混排 float来实现文字环绕 设置图片和文字间距：marginLOGOcss文字浮在图片上两种办法 1.把这张图片做为层的背景background:url(图片路径) 2.用绝对定位来把层定位到图片上，绝对定位语法：position:absolute;top:坐标;right:坐标;bottom:坐标;left:坐标 <divstyle="position:relative"> <divstyle="position:absolute;left:0;top:0;color:#fff;font-weight:bold">图片文字</div> <imgsrc=""></img> </div>LOGOClicktoeditsubtitlestyleLOGOLOGOLOGO*<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。
浙公网安备 33021202002483