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: right p.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注释以“/*” 开头，以“*/“ 结尾，如下： /* 定义段落样式表 */ p text-align: center; /* 文本居中排列 *
5、/ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ ,任务三、注释,一、Div+CSS标准的优点： 1.缩减页面代码，提高页面浏览速度，缩减带宽成本; 2.结构清晰，容易被搜索引擎搜索到，天生优化了seo； 3.缩短改版时间。 4.强大的字体控制和排版能力。 5.CSS非常容易编写。 6.提高易用性，使用CSS可以结构化HTML。 7.可以一次设计，随处发布。 8.更好的控制页面布局。 9.表现和内容相分离。 10.可以将许多网页的风格格式同时更新 。,任务四、Div+CSS布局,二、Div+CSS实例制作案例中网站。,三
6、、常用布局实例 1、单行一列 bodymargin: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、三行一列 bod
7、ymargin:0px;padding: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:aut
8、o; #bodycenter #dv1float: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:righ
9、t;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-left:auto;overflow:auto;clear:both;,通过本讲的学习，掌握CSS的几种插入方式，CSS代码的编写规范；掌握Div+CSS布局的原理。,小结,1、操作本讲的几种CSS样式，学习编写CSS代码。 2、制作“四月咖啡馆”网站。,上机操作,模板和库,预习,
