Dreamweaver教程 第9讲 CSS基本语法.ppt

1、CSS样式表基本语法,第9讲, 掌握CSS代码的编写 掌握Div+CSS布局页面,目的要求, CSS的几种插入方式 CSS代码的语法 Div+CSS进行页面布局,主要内容,1、嵌入式样式表通过style属性直接套进HTML中，作用范围仅限于本标记。如： 注：尽量避免使用。,任务一、HTML中加入CSS,2、内联式样式表服务于当前整个页面。在头标签head里面，标签style里包含当前页面的所有样式。 如： 应用：这是内联式样式表,3、外联式样式表 为整个网站的多个页面服务。这是一个独立的CSS文档。 使用外联样式表： ,1、基本语法CSS的定义由三部分构成：选择符，属性和属性的取值。,任务二、

2、CSS样式表的语法,2、HTML标记选择符 基本格式如下：选择符 属性：值 A. 属性的值是多个单词，必须在值上加“引号” 比如：p font-family: “sans serif” B. 属性和值要用“冒号”隔开，如果需要指定多个属性时，使用“分号”将所有的属性和值分开 p text-align: center; color: red,3、书写格式 可以把相同属性和值的选择符组合起来书写，用“逗号”分开： 如：p ,table font-size: 9pt 效果完全等效于：p font-size: 9pt table font-size: 9pt ,4、把不同的元素定义为相同的样式 在选择

3、符中省略HTML标记名定义 在自定义类的名称前面加一个点号。如： .abc background-color: #FF0000;使用 在HTML标记里加入定义的class参数，如： 这个表格的背景色为红色 注意：这是最常用的CSS方法，使用这种方法，可以很方便地在任意元素上套用定义好的类样式。,5、将相同的元素定义不同的样式 定义在自定义类的名称前面加一个点号。如：p.right text-align: rightp.center text-align: center 使用在HTML标记里加入定义的class参数，如：这个段落是向右对齐的 这个段落是居中排列的注意：类的名称可以是任意英文单词或

4、以英文开头与数字的组合，一般以其功能和效果简要命名。,6、ID选择符 定义 #intro font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 使用 设置id属性： 这是一个CSS样式的实例 注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,CSS注释以“/*” 开头，以“*/ 结尾，如下： /* 定义段落样式表 */ptext-align: center; /* 文本居中排列 */color: black;

5、/* 文字为黑色 */font-family: arial /* 字体为arial */,任务三、注释,一、Div+CSS标准的优点： 1.缩减页面代码，提高页面浏览速度，缩减带宽成本; 2.结构清晰，容易被搜索引擎搜索到，天生优化了seo； 3.缩短改版时间。 4.强大的字体控制和排版能力。 5.CSS非常容易编写。 6.提高易用性，使用CSS可以结构化HTML。 7.可以一次设计，随处发布。 8.更好的控制页面布局。 9.表现和内容相分离。 10.可以将许多网页的风格格式同时更新 。,任务四、Div+CSS布局,二、Div+CSS实例 制作案例中网站。,三、常用布局实例 1、单行一列 bo

6、dymargin:0px;padding:0px;text-align:center; #contentmargin-left:auto;margin-right:auto;width:400px; 2、二行一列 bodymargin:0px;padding:0px;text-align:center; #content-topmargin-left:auto;margin-right:auto;width:400px; #content-endmargin-left:auto;margin-right:auto;width:400px; 3、三行一列 bodymargin:0px;paddi

7、ng:0px;text-align:center; #content-topmargin-left:auto;margin-right:auto;width:400px; #content-midmargin-left:auto;margin-right:auto;width:400px; #content-endmargin-left:auto;margin-right:auto;width:400px;,4、单行两列 #bodycenterwidth:700px;margin-right:auto;margin-left:auto;overflow:auto; #bodycenter #d

8、v1float:left;width:280px; #bodycenter #dv2float:right;width:420px; 5、两行两列 #headerwidth:700px;margin-right:auto;margin-left:auto;overflow:auto; #bodycenterwidth:700px;margin-right:auto;margin- left:auto;overflow:auto; #bodycenter #dv1float:left;width:280px; #bodycenter #dv2float:right;width:420px;,6、三行两列 #headerwidth:700px;margin-right:auto;margin-left:auto; #bodycenterwidth:700px;margin-right:auto;margin-left:auto; #bodycenter #dv1float:left;width:280px; #bodycenter #dv2float:right;width:420px; #footerwidth:700px;margin-right:auto;margin-le