预览加载中，请您耐心等待几秒...

CSS初级教程.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共125页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS初级教程一.CSS简介一.CSS简介一.CSS简介一.CSS简介一.CSS简介二.CSS的发展二.CSS的发展二.CSS的发展三.如何将样式表加入您的网页而在XML中，你应该如下例所示在声明区中加入：<?xml-stylesheettype="text/css"href="http://www.dhtmlet.com/dhtmlet.css"?> 2.定义内部样式块对象(EmbeddingaStyleBlock)你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下： <html><head><title>文档标题</title><styletype="text/css"> <!--body{font:10pt"Arial"}h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon} h2{font:13pt/15pt"Arial";font-weight:bold;color:blue}p{font:10pt/12pt"Arial";color:black}--></style></head><body> 注意：这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 3.内联定义(InlineStyles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：<pstyle="margin-left:0.5in;margin-right:0.5in">这一行被增加了左右的外补丁<p> 4.样式表语法(CSSSyntax) Selector{property:value}参数说明：Selector–选择符property:value--样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法四.CSS语法五.CSS构造块为id为container的div元素添加CSS样式代码如下例： #container{ padding:20px; border:1pxsolid#000; background:#CCC; } 效果图： 2.维度：宽度和高度 设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、padding、border或者自元素都可能对结果产生连锁反应。 3.外边距 外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承。 下面来看一个外边距CSS定义的例子：#container{ width:300px; margin-top:20px; margin-left:auto; margin-right:auto; margin-bottom:1em; border:1pxsolid#000; padding:20px; background:#CCC;} 对外边距可缩写成如下： #container{ margin:20pxauto1emauto;} 属性值的排列顺序为：上外边距、右外边距、下外边距、左外边距。 CSS中将元素居中的最好的方法是把元素左右外边距属性值设定为auto。对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值。 4.内边距 内边距（padding）是(X)HTML元素的边框与元素之间的距离，适用于任何元素。 示例： #container{ width:300px; padding-top:20px;padding-left:10% padding-right:1em; padding-bottom:0; background:#CCC;} 可以将它缩写成如下代码： #container{ padding:20px1em010%;} 与margin属性一样，数值的排列顺序为：上、右、下和左。 下面来讨论一下：border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。#container{ width:400px; margin:10pxauto10pxauto; padding:20px; border-style:dasheddot