一、CSS简介 1.什么CSS 层叠式样式表(Cascading Style Sheets) CSS是对HTML进行修饰的语言 层叠式：层层覆盖叠加 用CSS修饰HTML有优先级 样式表 :CSS属性样式的集合 2.CSS作用 A.可以对HTML进行修饰 使得HTML更加美观 B.提高样式表的复用率 C.文本和样式完全分离 3.CSS引用方式及书写规范 1)内嵌式 把CSS样式嵌入到HTML标签中，使用一次 语法： <div style="color: red; font-size:14px; ">我的第一个CSS样式</div> 语法解析： 1.使用style属性将将CSS嵌入到HTML标签中 2.属性值的书写规范： 属性:属性值 3.多个属性使用分号来分割 不建议使用：违背w3c标准 2)内部式 在head标签中 使用style进行引用 本页面可以使用该样式 语法： <style type="text/css"> div{ color: red; font-size: 14px; } </style> 语法解析： 1.使用style标签引入CSS样式 <style type="text/css"> 属性type:告知浏览器使用CSS解析器解析 2.属性值的书写规范： 属性:属性值 3.多个属性使用分号来分割 3)外部式 将CSS提取出来形成CSS文件 谁使用谁调用 多个页面可以使用同一个样式 链接式 语法： <link href="demo1.css" type="text/css" rel="stylesheet"/> 语法解析： 1)创建一个CSS文件，将CSS属性写入到CSS文件中 2)在head标签中使用link标签作引入 <link href="demo1.css" type="text/css" rel="stylesheet"/> rel:引入文件与HTML的关系 type：告知浏览器采用CSS解析器解析 href:CSS文件地址 3)属性值的书写规范： 属性:属性值 4)多个属性使用分号来分割 导入式 语法： <style type="text/css"> @import url("demo1.css"); </style> 链接式与导入式区别 1)link所有浏览器都支持 部分低版本IE浏览器不支持 2)先加载HTML文件再加载CSS样式 3)import不支持js（javascript）动态修改
二、CSS选择器* 1.基本选择器 A.标签选择器 语法： HTML标签{CSS样式} 案例： <style type="text/css"> span{ color: red; font-size: 14px; } </style> <span>我的第一个CSS样式</span> B.id选择器 语法： #选择器名称{CSS样式} 案例： <style type="text/css"> #d1{ color: red; font-size: 14px; } #d2{ color: yellow; font-size: 14px; } </style>
<div id="d1">我的第一个CSS样式</div> <div id="d2">我的第一个CSS样式</div> C.class选择器 语法： .选择器名称{CSS样式} 案例： <style type="text/css"> .style1{ background-color: red; } .style2{ background-color: green; } </style> <div class="style1">我的第一个CSS样式</div> <div >我的第一个CSS样式</div> <div class="style2">我的第一个CSS样式</div> 优先级： id选择器>class选择器>标签选择器 2.属性选择器 语法： 基本选择器[属性='属性值']{CSS样式} 案例： <style type="text/css"> input[type='text']{ background-color: red;} input[type='password']{ background-color: yellow;} </style> username:<input type="text" name="username"/><br/> password:<input type="password" name="password"/><br/> birthday:<input type="date" name="birthday"/><br/> 3.伪元素选择器 a标签的伪元素选择器 语法： 静止状态 a:link{CSS样式} 悬浮状态 a:hover{CSS样式} 触发状态 a:active{CSS样式} 完成状态 a:visited{CSS样式} 案例： <style type="text/css"> a:link{ color: red;} a:hover{ color: blue; font-size: 28px;} a:active{ color: black;} a:visited{ color: green;} </style> <a href="#">点击我吧</a> 4.层级选择器 语法： 父级选择器 子级选择器{CSS样式} 案例： <style type="text/css"> #d1 .dd2 span{ background-color: red;} </style>
<div id="d1"> <div class="dd1"><span>div1</span></div> <div class="dd2"><span>div2</span></div> </div> <div id="d2"> <div class="dd1"><span>div1</span></div> <div class="dd2"><span>div2</span></div> </div>
三、CSS样式* 1.字体属性 font-size:字体大小 font-family:字体字型 案例： <style type="text/css"> span{ font-size: 100px; color: red; font-family: 黑体; font-style: italic; font-weight: bolder; } </style> <span>HELLOCSS</span> <em>HELLOCSS</em> <b>HELLOCSS</b> 2.文本属性 color：字体颜色 text-decoration:下划线 text-align:对齐方式 属性值：left center right 案例： <style type="text/css"> div{ color: blue; text-decoration: underline; cursor: pointer; } a{ text-decoration: none;} a:link{ color: black; cursor: text;} /* cursor: pointer; 小手 cursor: text; 文本 cursor: wait; cursor: help; cursor: crosshair; */ </style> <body> <div>HELLOCSS</div> <a href="#">点击我吧</a> </body> 3.背景属性 background-color:背景颜色 background-image:背景图片 属性值 url("图片地址"); background-repeat:平铺方式 属性值： repeat：横纵平铺 repeat-x:横向平铺 repeat-y:纵向平铺 no-repeat:不平铺 案例： <style type="text/css"> body{ /* background-color: black; background-image: url("images/dog.gif"); background-repeat: no-repeat; */ background: url("images/dog.gif") no-repeat black; background-size: 80px 60px; } </style> 4.列表属性 list-style-type:列表前可以加小点 list-style-image:列表前加图片 案例： <style type="text/css"> ul{ /* list-style-image: url("images/forward.gif"); */ /* list-style-type: decimal-leading-zero; */ /* list-style-position: outside; */ list-style: none; } </style> </head> <body> <ul> <li>香蕉</li> <li>苹果</li> <li>鸭梨</li> </ul> </body> 5.尺寸属性 width:宽度 height:高度 案例： <style type="text/css"> #d1{ background-color: red; width: 100px; height: 100px; } span{ background-color: blue; } </style>
<body> <div id="d1">div1</div> <div>div2</div> <span>span</span> </body> 6.显示属性 display 属性值： none;不显示 不占位置 block(块级显示) inline(行级显示) 案例： <style type="text/css"> a:hover #d1{ width: 200px; height: 200px; border: 1px solid red; display: block; } </style> <body> <a href="#">点击我吧<div id="d1"></div></a> </body> 7.浮动属性 float: 属性值： left right clear: 属性值：left right both 四、盒子模型 边框 border: border-color:边框颜色 border-style:边框样式 border-width:边框宽度 border-top:上边框 border-left:左边框 border-bottom:下边框 border-right:右边框 border:1px 2px 3px 4x; 上 右下左 border:1px 2px; 上下 左右 border:1px 2px 3px; 上1 左右2 下3 border:1px; 内边距 padding:内边距 padding-top:上内边距 padding-left:左内边距 padding-right:右内边距 padding-bottom:下内边距 外边距 margin:外边距 margin-top:上外边距 margin-left:左外边距 margin-right:右外边距 margin-bottom:下外边距 五、案例 div+css
