1 CSS简介
- CSS（Cascading Style Sheets），全称层叠样式表
- 可以把HTML文件想向成是一个房子骨架，里面标签（块元素、行内元素）理解为搭建房子的砖，而CSS负责美化房子（进行装修）,让你的静态页面（网站）相对好看一些
2 选择器
- 用于选择对指定的名称的标签(标签选择器)、指定的id的标签(id选择器)、指定的class的标签(class选择器)，编写样式
2.1 标签选择器
-
标签名{}，可以指定某种标签的样式，例如div{} -
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!--样式一般写在head中的style标签里，type属性中内容，表示在编写纯文本的css--> <style type="text/css"> /*表示指定div标签的样式 1. color：文字严肃 2. font-size：文字大小，px表示单位是像素，最小12像素 3. background-color：该标签所在行的背景颜色 4. background-image：设置背景图，背景图如果宽高没有div标签设置的宽高大，默认会平铺该图，但image标签引入图片时，无论图片多大，都不会导致图片平铺 5. background-repeat：背景重复设置，可以设置为不平铺，也就是背景图没有div大时，图片不会将背景全部覆盖 6. background：以上内容，可以简写在background属性中，例background:no-repeat url(jie.jpg) red; 7. text-align：文字左右方向对齐方式 8. border：边框 9. opacity：透明度，值在0～1之间取 10. font-style：字体样式，italic表示倾斜 11. cursor：表示光标放上去时，变成小手 12. width：宽度 13. height：高度 14. overflow：如果子元素超出父元素部分隐藏 */ div{ color:green; font-size:30px; background-color:red; background-image: url(1.png); background-repeat: no-repeat; /*background: no-repeat url(1.png) red;*/ text-align:center; border:5px solid black; opacity:.5; font-style:italic; cursor:pointer; width: 2000px; height: 2000px; overflow: hidden; } </style> </head> <body> <div>文本内容</div> </body> </html>
2.2 id选择器
-
#id{}，可以具体按id指定某个具体标签的样式，而不是所有标签都一个样式 -
页面中标签id属性值应唯一，如果重名，虽然此处可以生效，但学js时，会有问题
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>id选择器</title> <style type="text/css"> #box{ color:black; /* 对文本设置某种效果，例如加下划线，a标签默认有下划线，此处表示去掉下划线 1. underline：下划线 2. overline：上划线 3. line-through：中划线 4. none：什么都没有 */ text-decoration:none; } #box1{ /* 列表默认样式设置，默认应该文字前面有一个实心圆点 1. circle：空心圆点 2. square：实心方块 3. none：表示不再加内容 */ list-style:square; } #cur{ color:cyan; } #box2{ /* 列表默认样式设置，改为不用默认的数字 */ list-style:square; } </style> </head> <body> <a href="http://www.baidu.com" id="box">百度</a> <ul id="box1"> <li>吃饭</li> <li id="cur">睡觉</li> <li>打豆豆</li> </ul> <ol id="box2"> <li>unity3D</li> <li>cos2D</li> <li>PHP</li> </ol> </body> </html>
2.3 class选择器
-
.class{}，可以匹配某一类的标签，id尽量不能重名，但class可以 -
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /*相当于对下面两个div标签设置样式*/ .current{ font-size:30px; background-color:cyan; } /*相当于对span标签设置样式*/ .cur{ color:skyblue; font-size:18px; } </style> </head> <body> <div class="current">current1</div> <div class="current">current2</div> <div>普通div</div> <div>今天是北京 <span class="cur">cur</span> </div> </body> </html>
3 样式分类
- 样式分为内部样式、外部样式、行内样式三种
- 优先级：行内样式>内部样式>外部样式
- 使用率：行内样式<内部样式<外部样式
3.1 内部样式
- 内部样式的设置，通过在head标签中，书写style标签完成
3.2 外部样式
-
可以将所有样式放在.css文件中，通过在head标签中，书写link标签，将外部的这个.css文件引入
-
.css
.box{ width:280px; height: 280px; background:red; } #cur{ font-size: 20px; color:green; text-align:center } -
.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!-- 引入外部样式文件(CSS文件)，此处由于html和css在同一个文件夹，因此default.css前不用加路径 --> <link rel="stylesheet" type="text/css" href="default.css"> </head> <body> <div class="box"> <p id="cur">北京昨天下大雪了,真的很美</p> </div> </body> </html>
3.3 行内样式
-
可以在标签内，通过style属性，直接设置该标签的样式
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <p style="width:600px;height:300px;font-size: 30;color: red;">文本内容</p> </body> </html>
4 盒模型
-
所有HTML元素可以看作盒子，都拥有如下属性
- margin：外边距，两个标签(盒子)之间的距离
- border：外边框，相当于相框
- padding：内边距，content到border的距离
- content：盒子的内容，显示文本和图像
- width：宽，图像的宽
- height：高，图像的高
-
padding、border会导致整个元素向外扩展，但margin不会
-
右键浏览器–检查，可以查看指定的元素的html写法和使用的样式
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .box{ width:200px; height:200px; /* 外边框：5像素(最小1像素)，实线(dashed为虚线)，红色，所以整体像素由原来的200*200变为了210*210*/ border:5px solid red; /*padding：文字到边框的距离*/ padding:100px; } .box1{ /*标签与标签间距离，不会导致标签变大，可以使用margin-left表示距离左边标签的距离*/ margin:10px; width:200px; height: 200px; background:red; } </style> </head> <body> <div class="box">文字文字</div> <div class="box1"></div> </body> </html>
5 定位
- html中，块元素会按定义顺序，从上到下，每个元素独占一行进行排列，而行内元素会按定义顺序，从左到右进行排列，遵循的这种规定，就叫做文档流，或普通流
- 如果想打破文档流让标签可以在任意地方显示，就需要通过定位实现
- 通过元素的position属性完成定位，被定位元素可以使用额外left、top、right、bottom四个新属性
- 定位分为固定定位(fixed)、相对定位(relative)、绝对定位(absolute)三种
- 一般情况，子元素绝对定位，父元素相对定位，“子绝父相”
5.1 固定定位
-
固定定位是以网页作为参照物的，可以将标签固定在网页中某一个位置，即使页面有上下滑动，效果也不影响
-
固定定位元素不占用起始位置，他原来的位置会被下面的元素占用
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> div{ width:400px; height: 200px; } body{ height: 10000px; } .box{ /* 固定定位 */ position: fixed; left:500px; top:200px; background:red; } .box1{ background:green; } .box2{ background:purple; } </style> </head> <body> <div class="box"></div> <div class="box1"></div> <div class="box2"></div> </body> </html>
5.2 相对定位
-
相对定位是以元素原本位置作为参照
-
相对定位元素占用起始位置，他原来的位置不会被下面的元素占用
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /* 清除默认样式的margin和padding：默认情况下有缝隙 */ *{ margin:0; padding: 0; } div{ width:400px; height: 200px; } .box1{ background:red; } .box2{ /*相对定位*/ position: relative; /*表示原来位置在新位置的坐上方，也就是新位置为原位置的右下方*/ left:400px; top:200px; background:green; } .box3{ background:purple; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
5.3 绝对定位
-
绝对定位元素，如果没有定位父元素，以网页作为参照物，和固定定位效果相同
-
如果有被定位的父元素，以父元素位置作为参照物
-
绝对定位元素不占用起始位置，他原来的位置会被下面的元素占用
-
父元素无定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /* 清除默认样式 */ *{ margin:0; padding: 0; } body{ height: 1000px; } div{ width:400px; height: 200px; } .box1{ position: fixed; left:100px; top:100px; background:red; } .box2{ background:green; } .box3{ background:purple; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html> -
父元素相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } .outer{ position: relative; /* 父元素 */ width:400px; height: 400px; background:red; margin:200px; } .inner{ position: absolute; left:10px; top:20px; width:200px; height: 200px; background:green; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
6 浮动
-
浮动也可以打破文档流
-
当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到其父元素的右边缘
- 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到父元素的左边缘，因为它不再处于文档流中，所以它不占据空间，因此框2到达原来框1位置，但由于浮动元素会在非浮动元素上显示，所以框1覆盖住了框2，使框2从视图中消失
- 如果父元素太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素"卡住"
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /* 清除默认样式 */ *{ margin:0; padding: 0; } div{ /* 靠左侧浮动 */ float:right; width:150px; height: 50px; background:cyan; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </body> </html>
7 常用案例
7.1 导航
- google获取某个标签的颜色编号
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } .box{ position: relative; /* 宽度可以按父元素宽度的百分比进行设置*/ width:100%; height:50px; /* 使用上面方法获取到的百度新闻中标签的颜色编码*/ background:#01204f; } ul{ position: absolute; left:20%; width:80%; height: 50px; /* 将列表默认样式清除（将前面黑色圆球干掉） */ list-style: none; } li{ float:left; width:60px; height: 50px; color:white; /* 行高：通常设置为和父元素高度一样，这样就能让文字在上下方向居中 */ line-height:50px; /* 小手 */ cursor:pointer; /* 文字在li中左右居中 */ text-align:center; } li:hover{ background:red; } </style> </head> <body> <div class="box"> <ul> <li>首页</li> <li>国内</li> <li>国际</li> <li>军事</li> <li>财经</li> <li>娱乐</li> <li>体育</li> <li>互联网</li> <li>科技</li> <li>游戏</li> <li>女人</li> <li>汽车</li> <li>房产</li> </ul> </div> </body> </html>
7.2 轮播图小圆球
- border-radius：将元素的四个角，用以指定像素为半径的圆角替代
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } ul{ position: relative; width:300px; height: 50px; list-style: none; border:1px solid black; left:500px; } li{ float:left; /* 左侧外边距 */ margin-right:10px; width:50px; height: 50px; background:green; /* 后面跟1个值，表示四个角都设置，如果跟4个值，表示分别设置左上、右上、右下、左下四个位置的圆角的半径 此处50%表示，圆角的半径，为其自身宽高的一半*/ border-radius:50%; } .cur{ background:yellow; } </style> </head> <body> <ul> <li class="cur"></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
7.3 四叶草
-
我们可以通过
@keyframes或@-浏览器厂商私有前缀-keyframes来创建动画，然后通过animation:动画名或-浏览器厂商私有前缀-animation:动画名将动画绑定在某个选择器上，此时动画才能生效，注意如果动画使用了浏览器厂商私有前缀，那么该动画只在对应的浏览器中生效 -
私有前缀与浏览器对照关系
谷歌 IE 火狐 欧朋 webkit ms moz o -
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } .box{ position: relative; width:200px; height: 200px; left:40%; /* 将动画绑定到一个选择器上，否则动画不会有效果:动画名 动画执行时间 动画速率(匀速) 动画延迟时间 动画执行次数(无穷次) */ animation:donghua 5s linear 0s infinite; } .ye1{ position: absolute; width:100px; height: 100px; background:green; left:0px; top:0px; border-radius:0px 90px 0px 90px; } .ye2{ position: absolute; width:100px; height: 100px; background:green; left:100px; border-radius:90px 0px 90px 0px; } .ye3{ position: absolute; width:100px; height: 100px; background:green; left:0px; top:100px; border-radius:90px 0px 90px 0px; } .ye4{ position: absolute; width:100px; height:100px; background:green; left:100px; top:100px; border-radius:0px 90px 0px 90px; } /* 创建一个animation动画，需指定起始样式和终止样式 */ @-webkit-keyframes donghua{ from{ /* 旋转属性：让元素按图片几何中心进行旋转(旋转单位是degree)，此处表示，动画为从旋转0度的位置，转换到旋转360度的位置*/ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> </head> <body> <div class="box"> <div class="ye1"></div> <div class="ye2"></div> <div class="ye3"></div> <div class="ye4"></div> </div> </body> </html>
7.4 轮播图布局
-
轮播图指那种隔几秒一会换一个图的效果，本例只有布局和样式，还没使用javascript，因此不会动态变换
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } .box{ position: relative; width:520px; height:280px; border:1px solid red; left:400px; top:100px; /* 如果子元素超出父元素部分隐藏*/ overflow: hidden; } ul{ position: absolute; list-style: none; width:520px; height: 280px; } .leftbtn{ position:absolute; width:60px; height:30px; background:black; left:0px; top:120px; color:white; text-align:center; line-height:30px; cursor:pointer; opacity: .8; } .rightbtn{ position: absolute; width:60px; height: 30px; background:black; right:0px; top:120px; color:white; text-align:center; line-height:30px; cursor:pointer; opacity: .8; } ol{ position: absolute; width:200px; height:25px; list-style: none; left:35%; bottom:5px; } /* 后代选择器，表示这个li是ol的那个子标签*/ ol li{ float:left; width:25px; height: 25px; background:black; color:white; /* 变为圆球 */ border-radius:12.5px; text-align:center; line-height:25px; margin-right:5px; } .cur{ background:skyblue; /* 进行缩放，宽高放大1.2倍，旋转也是它 */ transform:scale(1.2); } </style> </head> <body> <div class="box"> <!--有序列表去做显示图片 --> <ul> <li><img src="1.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li> </ul> <!-- 做左右按钮 --> <div class="leftbtn">left</div> <div class="rightbtn">right</div> <!-- 分页器 --> <ol> <li class="cur">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
2242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
