1、第1章 CSS书写及调用 第2章 颜色与背景 第3章 字体 第4章 文本 第5章 连接 第6章 边框 第7章 定位 第8章 层次堆叠 第9章浮动元素float,交流内容,第1章 CSS书写及调用,第1章 CSS书写及调用,CSS存放形式1、在页面元素嵌套2、与页面嵌套:在与之间3、把css页面移到外面形成一个单独文件并以css为后缀(外部css),第1章 CSS书写及调用,CSS格式 1.类型(标签)选择符,直接使用元素名称定义 html/*/ body/*/ div/*/ span/*/ 2. id选择符#top/*/color:red;div. #top /*/,第1章 CSS书写及调用,
2、CSS格式 3、class 选择符.select_rowcolor:red; 4. 分组选择符(群选择器)h1,h2,h3,h4,h5,h6,p/*line-height:1.6em;/.class1,class2/*/,第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%;,第2章
3、 颜色与背景,color /前景色 background-color: /背景色 background-image:url() /背景图像 background-repeat: /平铺背景图像 background-attachment/固定背景图像 background-position /放置背景图像 background /背景,background-repeat,background-repeat,body background-color: #FFCC66; background-image: url(“butterfly.gif“); background-repeat: no-r
4、epeat; ,background-position,body background-color: #FFCC66; background-image: url(“butterfly.gif“); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; ,background,简称:background-color | background-image | background-repeat | background-attachment | backgrou
5、nd-position background: #FFCC66 url(“butterfly.gif“) no-repeat fixed right bottom; background-color: #FFCC66; background-image: url(“butterfly.gif“); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;,第3章 字体,font-family 字体 font-style 样式normal（正常）、italic（斜体
6、）或oblique（倾斜 font-variant normal（正常）或small-caps（小体大写字母 font-weight normal（正常）或bold（加粗 ) font-size 字体大小 font,第4章 文本,text-indent 文本缩进 text-align文本对齐 text-decoration文本装饰 underline overline line-through letter-spacing字符间距 text-transform文本转换首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）,add(),第5章 连接,
7、伪类：link a:link color: blue; a:visited color: red; a:active background-color: #FFFF00; a:hover color: orange; font-style: italic; a text-decoration:none; 去下划线,add(),border-top-width: thick; border-top-style: solid; border-top-color: red;,第6章边框,border-width :“thin”（薄）、“medium”（普通）或“thick”（厚） border-co
8、lor border-style Border 缩写border: 1px solid blue; Boder可分bodder-left-color(style、width),add(),第6章边框 border-style,add(),第7章 定位,相对定位#dog1 position:relative; left: 350px; bottom: 150px; 绝对定位 #box1 position:absolute; top: 50px; left: 50px; ,add(),第8章 层次堆叠,z-index数字较大的元素将叠加在数字较小的元素之上。 #ten_of_diamonds position: absolute; left: 100px; top: 100px; z-index: 1;,add(),第9章浮动元素float,#picture float:left; width: 100px; causas naturales et antecedentes, idciro etiam nostrarum voluntatum.,
