HTML5网页设计基础概述.pptVIP

* 二、CSS的神奇性 网站： 网站提供一套标准的页面及CSS文件 使用一个不同的CSS文件，就可以体现不同的设计风 格，这些风格各异的页面，若查看源文件，会发现所有风 格页面的源文件都是相同的，只是引用了不同的CSS文件。 。 三、CSS的选择器（selector） 要想使CSS样式应用到特定的HTML元素，需要找到 这个元素，执行这一任务的样式规则叫选择器。 标签选择器 例： body{ color:#111111; font-size:12px;} img{ border-width:0;} 对应的标签对应相应的样式； id选择器（整个文档中这种样式是唯一的） p id=“intro”测试文本/p #intro {font-weight:bold;} 3. class选择器 多个地方需要使用同种样式 p class =“intro”测试1/p p class =“intro”测试2/p css样式 .intro{font-weight:bold;} 5. 选择器的灵活组合 （1） div id =“mainco” p Welcome/p /div 应用CSS #mainco p{color:red;} （2）div id =“HeadTop” div id=“Logo” ….. /div /div 样式定义 #HeadTop #Logo { …} 四、对网页应用样式 1. 直接在标签的style属性进行设置 img src=“1.gif” alt=“测试” style=“border-width:0px;”/ 格式是---某个属性：值 在HTML页面中直接使用 在head标签中加入 3. 链接外部样式表（.css文件） 这是作为Web标准推荐使用的方式 在head标签中使用 link href=StyleSheet.css rel=stylesheet“ / href：表示引用哪个.css文件； rel：是指在页面中使用这个外部的样式表 4. CSS样式的特殊性权重 多个选择器可能会选择同一个元素时，会根据样式的权重 顺序进行应用，最终应用权重最高的选择器。 标签选择器，权重为1； class选择器，权重为10； id选择器，权重为100； 在html标签中直接使用style属性，这里的style属性的权重为1000； 权重一样时，会采用“层叠原则” 后定义的会被应用。 五、CSS中的单位和值 16进制颜色 如#ffffff， #07dc0f 长度 （1）绝对单位：英寸(in)、厘米(cm）、毫米（mm）、磅（pt）、pica=12pt （2）相对单位： em—相对于字体的font-size ex—相对于小写字母x的高度 px— 像素，最常用 六、常用CSS介绍 1.width ； 元素宽度，可以给数值，也可以给父级容器的宽度 百分比 2.height：元素高度 3.background-color: 元素背景色 4.color: 元素文字的颜色 5.border: 设置元素的边框 border: 1px solid red; // 元素边框为实线，宽度1px，红色 border:0；//控制元素无边框 6.margin：元素的外边距 maring: 1px;//所有边距为1px margin:2px 4px;//上下边距为2px,左右为4px margin:2px 4px 5px;//上边距为2px,左右为4px,下边距为5px margin:2px 4px 3px 5px;//上边距为2px,右为4px，下为3px,左为5px maring:0 auto；//上下边距为0，左右根据容器宽度自动计算，常用于自动居中 也可单独使用magrin-top、margin-bo