第1章 css书写及调用第2章 颜色与背景 第3章 字体 第4章 文本 第5章 连接 第6章 边框第7章 定位 第8章义 层次堆叠 第9章浮动元素float 交流内容.pptVIP

* * 第1章 CSS书写及调用 第2章 颜色与背景 第3章 字体 第4章 文本 第5章 连接 第6章 边框 第7章 定位 第8章 层次堆叠 第9章浮动元素float 交流内容 第1章 CSS书写及调用 第1章 CSS书写及调用 ? CSS存放形式 1、在页面元素嵌套 td style=“width:200px;” 2、与页面嵌套:在head与/head之间 style /style 3、把css页面移到外面形成一个单独文件并以css为后缀(外部css) link rel=stylesheet href=../styles/tab.css type=text/css 第1章 CSS书写及调用 ? CSS格式 1.类型(标签)选择符,直接使用元素名称定义 html{/*定义网页结构总体样式*/} body{/*定义页面属性*/} div{/*定义div元素的属性*/} span{/*定义span元素的属性*/} 2. id选择符 #top{ {/*定义id为top元素的文本颜色为red*/ color:red; } div. #top {/*定义id为top的所有子div元素样式,但不包含id为top的样式*/} 第1章 CSS书写及调用 ? CSS格式 3、class 选择符 .select_row{ color:red; } 4. 分组选择符(群选择器) h1,h2,h3,h4,h5,h6,p{/*定义所有级别的标题和段落行高都为字体大小的1.6倍* line-height:1.6em; /} .class1,class2{{/*所有这些class类型样式*/} 第1章 CSS书写及调用 ? CSS格式 5. 包含选择符（扩展选择器） .div1 h2 p span{/*多层包含选择符*/ font-size:18px; } 6. 元素指定选择符 span.red{/*定义div元素中class为red元素的颜色为红色*/ color:red; } span#top{/*定义div元素中id为top元素的颜色为红色宽度为百分之百*/ width:100%; } 第1章 CSS书写及调用 ? CSS格式 7. 子对象选择符 #main table{/*定义id为main的主体模块中子对象table的样式*/} #main .title{/*定义id为main的主体模块中子对象class为title的样式*/} 以上是定义css格式的语法格式,但是不同格式也让样式具有优先级,简单说下优先级顺序: id选择符 class选择符 类型（标签）选择符 第2章 颜色与背景 ? color //前景色 background-color: //背景色 background-image:url() //背景图像 background-repeat: //平铺背景图像 background-attachment//固定背景图像 background-position //放置背景图像 background //背景 background-repeat ? background-repeat 值 描述 background-repeat:repeat-x 图像横向平铺 background-repeat:repeat-y 图像纵向平铺 background-repeat:repeat 图像横向和纵向都平铺 background-repeat:no-repeat 图像不平铺 body { background-color: #FFCC66; background-image: url(butterfly.gif); background-repeat: no-repeat; } background-attachment ? 值 描述 background-