- A+
所属分类：Web前端
第一个css程序
项目结构：
html文件
<meta charset="UTF-8"> <title>Title</title> <!--<style> 可以编写css的代码 语法： 选择器{ 声明1; 声明2; 声明3; ..... } link ： 引入css文件 相当于： <style> h1{ color: red; } </style> --> <link rel="stylesheet" href="css/style.css"> <h1>我是标题</h1> css文件：
h1{ color: red; } CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录
css的三种导入方式
html文件：
<meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color: green; } </style> <!--外部样式--> <link rel="stylesheet" href="css/style.css"> <!--优先级： 就近原则，哪个样式离这个元素近，就用哪个--> <!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> <h1>我是标题</h1> css文件：
/*外部样式*/ h1{ color: yellow; } 基本选择器
- 标签选择器: 选择一类标签 格式(标签{})
<meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择这个页面上所有的这个标签 color : 字体颜色 background-color : 背景颜色 border-radius : 边框圆润度 */ h1{ color: #e51010; background-color: aqua; border-radius: 20px; } /* font-size : 字体大小 */ p{ font-size: 30px; } </style> <h1>学java</h1> <h1>学java</h1> <p>你会发财</p> - 类选择器:选择所有class属性一致的标签，格式(.class的值{})
<meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的值{} 好处，可以让多个标签归类，属于同一个class，设置相同的属性，可以复用 */ .c1{ color: blue; } .c2{ color: aqua; } </style> <h1 class="c1">标题1</h1> <h1 class="c2">标题1</h1> <h1 class="c1">标题1</h1> <p class="c1">p标签</p> - id选择器:全局唯一，格式(#id的值{})
<meta charset="UTF-8"> <title>Title</title> <style> /*id选择器格式 #id的值{} id的值必须保证全局唯一 不遵循就近原则，固定的 id选择器 > 类选择器 > 标签选择器 */ #i1{ color: #e51010; } .c1{ color: aqua; } h1{ color: green; } </style> <h1 id="i1">标题标签</h1> <h1 class="c1">标题标签</h1> <h1>标题标签</h1> 层次选择器
<meta charset="UTF-8"> <title>层次选择器</title> <style> /*p{ background-color: green; }*/ /*后代选择器 某一个元素的后面所有元素*/ /*body p{ background: #e51010; }*/ /*子选择器 只有后面的所有同级元素有效*/ body>p{ background: aqua; } /*兄弟选择器 选择某个元素后和它同一级的元素,只对下面的元素有效并且只有一个*/ /*.active + p{ background: green; }*/ /*通用选择器 当前选中元素的向下的所有同级元素*/ /*.active~p{ background: blue; }*/ </style> <p>p1</p> <p class="active">p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p7</p> 结构伪类选择器
<meta charset="UTF-8"> <title>层次选择器</title> <style> /*选择ul下面的第一个li元素*/ ul li:first-child{ background: #e51010; } /*选择ul下面的最后一个li元素*/ ul li:last-child{ background: blue; } /*选择p1 ： 定位到父元素，选择当前的第一个元素 p:nth-child(1) ： 选中p元素的父元素，选择父级元素的第一个,并且是当前元素才会生效 */ p:nth-child(1){ background: aqua; } /*选中父类元素里面第二个类型为p的元素*/ p:nth-of-type(2){ background: green; } </style> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> 属性选择器
<meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; text-align: center; border-radius: 10px; background-color: aqua; color: blue; text-decoration: none; margin-right: 10px; font: bold 20px/50px Arial; } /*选中a标签里面带有id属性的元素 语法 ： a[属性名或者属性名=属性值]{} 这里面的 = 表示绝对等于 *= 包含这个元素 ^= 表示以什么开头 $= 表示以什么结尾 */ /*a[id]{ background-color: yellow; }*/ /* a[id=first]{ background-color: #e51010; }*/ /*选中class中含有links的元素*/ /*a[class*="links"]{ background-color: yellow; }*/ /*选中href中以http开头的元素*/ /*a[href^=http]{ background-color: yellow; }*/ /*选中href中以pdf结尾的元素*/ a[href$=pdf]{ background-color: yellow; } </style> <p class="demo"> <a href="https://www.baidu.com" class="links item first" id="first">1</a> <a href="https:" class="links item first" target="_blank" title="test">2</a> <a href="image/123.html" class="links item">3</a> <a href="image/123.png" class="links item">4</a> <a href="image/123.jpg" class="links item">5</a> <a href="abc" class="links item">6</a> <a href="abc/a.pdf" class="links item">7</a> <a href="/ad.pdf" class="links item">8</a> <a href="abd.doc" class="links item">9</a> <a href="djw.doc" class="links item last">10</a> </p> 效果如下图:
字体样式
<meta charset="UTF-8"> <title>Title</title> <!-- font-family : 表示字体 font-size : 表示字体大小 font-weight : 表示字体形状，粗体，斜体等 color : 表示字体颜色 --> <style> body{ font-family: 楷体; color: #e51010; } h1{ font-size: 50px; } .p1{ font-weight: bold; } </style> <h1>原神</h1> <p class="p1"> 《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。 </p> <p> 游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5] 。 </p> 文本样式
<meta charset="UTF-8"> <title>Title</title> <style> /* color :字体颜色，后跟参数可以为： 单词 RGB 参数为0~255，0~255，0~255 RGBA 参数为0~255，0~255，0~255，0~1 最后一个参数表示透明度 text-align :排版 后跟参数有: center 居中 right 靠右 left 靠左 */ h1{ color: rgba(0,255,0,0.2); text-align: center; } /*text-indent: 2em; 段落首行缩进，缩进两个字符 或者也可以为px，即缩进两个像素*/ .p1{ text-indent: 2em; } /*line-height 行高，如果行高和块的高度一致，就可以上下居中*/ .p2{ background-color: yellow; height: 300px; line-height: 150px; } /*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } /*超链接去除下划线*/ a{ text-decoration: none; } /* 水平对其，，需要参照物，a,b */ img,span{ vertical-align: middle; } </style> <a href="">123</a> <p class="l1">123122</p> <p class="l2">123122</p> <p class="l3">123122</p> <h1>原神</h1> <p class="p1"> 《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 [29] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。 </p> <p class="p2"> 游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相 [5] 。 </p> <img src="images/2.png" alt="css学习" alt=""> <span>cececececececececece</span> 超链接伪类
<meta charset="UTF-8"> <title>Title</title> <style> /*默认颜以及去除下划线*/ a{ text-decoration: none; color: #000000; } /*鼠标悬停到上面的状态*/ a:hover{ color: blue; } /*鼠标按住未释放的状态*/ a:active{ color: #e51010; } /*text-shadow 阴影效果 参数依次为：阴影颜色 水平位移 垂直位移 阴影半径*/ #price{ text-shadow: #00e5e1 10px 0px 2px; } </style> <a href="#"> <img src="images/2.png" alt="css学习" alt=""> </a> <p> <a href="#">码出高效：Java开发手册.pdf</a> </p> <p> <a href="#">作者：孤尽老师</a> </p> <p id="price"> ￥99 </p> 列表
html文件
<meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> <div id="nav"> <h2 class="title">全部商品分类</h2> <ul> <li> <a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li> <li> <a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a> </li> <li> <a href="#">电脑</a> <a href="#">办公</a> </li> <li> <a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a> </li> <li> <a href="#">服饰鞋帽</a> <a href="#">个性化妆</a> </li> <li> <a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a> </li> <li> <a href="#">食品饮料</a> <a href="#">保健食品</a> </li> <li> <a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a> </li> </ul> </div> css文件
#nav{ width: 255px; background:#828a91; } .title{ font-size: 18px; font-weight: bold; text-indent: 2em; line-height: 35px; /* 颜色 图片 图片位置 平铺方式*/ background: red url("../images/2.png") 230px 10px no-repeat; } /* 列表前面默认实心圆点 list-style ： none 去掉圆点 circle 空心圆 decimal 数字 square 实心正方形 */ ul li{ line-height: 30px; list-style: none; text-indent: 1em; background-image: url("../images/2.png"); background-repeat: no-repeat; background-position: 188px 5px; } a{ text-decoration: none; color: #000; font-size: 14px; } a:hover{ color: orange; } 背景
<meta charset="UTF-8"> <title>Title</title> <style> /*border 设置边框 参数为 边框的宽度 边框的样式（solid 实线） 边框的颜色*/ div{ width: 1080px; height: 720px; border-radius: 20px; border: 20px solid red; background-image: url("images/2.png"); /*默认是全部平铺的*/ } .div1{ /*水平平铺*/ background-repeat: repeat-x; } .div2{ /*垂直平铺*/ background-repeat: repeat-y; } .div3{ /*不平铺*/ background-repeat: no-repeat; } </style> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> 盒子模型
1. 边框
<meta charset="UTF-8"> <title>Title</title> <style> body{ /*body 总有一个默认的外边距 margin:*px 一般会初始化为0*/ margin: 0px; } h2{ font-size: 16px; background-color: #aee3bf; line-height: 30px; color: white; } /*border : 粗细 样式 颜色*/ #box{ width: 300px; border: 1px solid red; } form{ background-color: #aee3bf; } /*选择父类元素里面第一个为div的元素里面的input标签*/ div:nth-of-type(1)>input{ border: 3px solid black; } /*选择父类元素里面第二个为div的元素里面的input标签*/ div:nth-of-type(2)>input{ border: 2px dashed aqua; } /*选择父类元素里面第三个为div的元素里面的input标签*/ div:nth-of-type(3)>input{ border: 1px dashed black; } </style> <div id="box"> <h2>会员登录</h2> <form action="#" method="get"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> 2.内外边距
<meta charset="UTF-8"> <title>Title</title> <!--外边距的妙用 居中元素 margin:0 auto; --> <style> body{ /*body 总有一个默认的外边框 margin:8px*/ margin: 0px; } /*外边距 margin: 0; 代表上下左右都为零 margin: 0 1; 代表上下为0 左右为1 margin: 0 1 2 3; 代表上为0 右为1 下为2 左为3 顺时针旋转 */ h2{ font-size: 16px; background-color: #aee3bf; line-height: 30px; color: white; margin: 1px 2px 3px 4px; } /*border : 粗细 样式 颜色*/ #box{ width: 300px; border: 1px solid red; margin: 0 auto; } form{ background-color: #aee3bf; } /*选择父类元素里面第一个为div的元素里面的input标签 padding 内边距 与外边距用法一致 */ div:nth-of-type(1)>input{ border: 3px solid black; padding: 10px; } /*选择父类元素里面第二个为div的元素里面的input标签*/ div:nth-of-type(2)>input{ border: 2px dashed aqua; } /*选择父类元素里面第三个为div的元素里面的input标签*/ div:nth-of-type(3)>input{ border: 1px dashed black; } </style> <div id="box"> <h2>会员登录</h2> <form action="#" method="get"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> 圆角边框
1.边框圆角
<meta charset="UTF-8"> <title>Title</title> <style> /* border-radius 圆角边距 border-radius: 50px; 上下左右都为50px border-radius: 50px 20px; 左上右下为50px 右上左下为20px border-radius: 50px 20px 10px 5px; 从左上开始顺时针旋转分配 */ div{ width: 100px; height: 100px; border: 10px solid red; border-radius: 50px 20px 10px 5px; } </style> <div> </div> 2.半圆
<meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 50px; background-color: red; border-radius: 50px 50px 0 0 ; } </style> <div></div> 盒子阴影
<meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 10px solid red; /*box-shadow 盒子阴影 x偏移量 y偏移量 阴影半径 阴影颜色*/ box-shadow: 10px 10px 100px yellow; } </style> <div></div> display(块元素与行内元素的转换)
<meta charset="UTF-8"> <title>Title</title> <style> /* div本为块元素 使用 display: inline;后为行内元素 span本为行内元素 使用 display: block;后为块元素 inline-block 既为行内元素也为块元素 none 使该元素消失 */ div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: none; } </style> <div>div块元素</div> <span>span行内元素</span> float(浮动)
<meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer1{ border: 1px dashed blue; display: inline-block; float: left; } .layer2{ border: 1px dashed #e17113; display: inline-block; float: left; } .layer3{ border: 1px dashed #40c40d; display: inline-block; float: left; } .layer4{ border: 1px dashed #86fc07; font-size: 16px; line-height: 20px; display: inline-block; } </style> <div id="father"> <div class="layer1"><img src="images/1.png" alt="css学习" alt=""></div> <div class="layer2"><img src="images/2.png" alt="css学习" alt=""></div> <div class="layer3"><img src="images/3.png" alt="css学习" alt=""></div> <div class="layer4"> 浮动的盒子可以向左浮，也可以向右浮 </div> </div> 解决父级元素塌陷问题
父级元素塌陷问题即子元素浮动起来后超出父级元素阔起来的范围
方案一：
增加父级元素高度
方案二：
在最底下增加一个空的div，然后给该div增加属性
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; } 方案三：
在父级元素增加 overflow: hidden;属性
#father{ border: 1px solid red; overflow: hidden; } 方案四：
父类添加一个伪类
#father:after{ content: ''; display: block; clear: both; } 具体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; /*overflow: hidden;*/ } #father:after{ content: ''; display: block; clear: both; } .layer1{ border: 1px dashed blue; display: inline-block; float: left; } .layer2{ border: 1px dashed #e17113; display: inline-block; float: left; } .layer3{ border: 1px dashed #40c40d; display: inline-block; float: right; } /* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 */ .layer4{ border: 1px dashed #86fc07; font-size: 16px; line-height: 20px; display: inline-block; float: right; } /*.clear{*/ /* clear: both;*/ /* margin: 0;*/ /* padding: 0;*/ /*}*/ </style> </head> <body> <div id="father"> <div class="layer1"><img src="images/1.png" alt="css学习" alt=""></div> <div class="layer2"><img src="images/2.png" alt="css学习" alt=""></div> <div class="layer3"><img src="images/3.png" alt="css学习" alt=""></div> <div class="layer4"> 浮动的盒子可以向左浮，也可以向右浮 </div> <!--<div class="clear"></div>--> </div> </body> </html> 相对位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相对定位：相对于原来的自己的位置进行偏移 --> <style> body{ padding: 10px; } div{ margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{ border: 1px solid red; } #first{ background-color: blue; border: 1px dashed blue; position: relative; /*相对定位*/ top: 20px; /*相对于自己的顶上加二十*/ left: 20px; /*相对于自己的左边加二十*/ } #second{ background-color: #e8a323; border: 1px dashed #e8a323; } #third{ background-color: #17de32; border: 1px dashed #17de32; position: relative; bottom: 20px; /*相对于自己的底部加二十*/ right: 20px; /*相对于自己的右部加二十*/ } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 方块摆放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father{ width: 300px; height: 300px; padding: 10px; border: 1px solid red; } a{ width: 100px; height: 100px; background-color: #d7cc43; line-height: 100px; text-decoration: none; text-align: center; display: block; } a:hover{ background-color: blue; } #i2{ position: relative; bottom: 100px; left: 200px; } #i3{ position: relative; bottom: 100px; left: 100px; } #i4{ position: relative; bottom: 100px; } #i5{ position: relative; bottom: 200px; left: 200px; } </style> </head> <body> <div id="father"> <a id="i1" href="#">链接1</a> <a id="i2" href="#">链接2</a> <a id="i3" href="#">链接3</a> <a id="i4" href="#">链接4</a> <a id="i5" href="#">链接5</a> </div> </body> </html> 绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{ border: 1px solid red; } #first{ background-color: blue; border: 1px dashed blue; } /*绝对定位： 1.没有父级元素定位的前提下，相对于浏览器定位 2.假设父级元素存在定位，经常会相对于父级元素进行偏移 3.在父级元素范围内移动 相对于父级元素或者浏览器，进行指定位置的移动，不会继续存在于原来的位置 */ #second{ background-color: #e8a323; border: 1px dashed #e8a323; position: absolute; right: 30px;/*相对于浏览器的右边30个像素*/ } #third{ background-color: #17de32; border: 1px dashed #17de32; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 固定位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){/*绝对定位：相对于浏览器*/ width: 100px; height: 100px; background: red; position: absolute; right: 100px; bottom: 0; } div:nth-of-type(2){/*fixed：固定定位，在浏览器中 定死，不再改变位置*/ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } div:nth-of-type(3){/*fixed：固定定位，在浏览器中 定死，不再改变位置*/ width: 50px; height: 50px; position: fixed; right: 0; bottom: 60px; } div a{ display: block; height: 50px; width: 50px; background-color: #00e5e1; text-decoration: none; line-height: 50px; text-align: center; } </style> </head> <body> <a name="top"></a> <div>div1</div> <div>div2</div> <!--使用锚链接可以实现返回顶部的功能--> <div> <a href="#top">顶部</a> </div> </body> </html> z-index
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/1.png" alt="css学习" alt=""></li> <li class="tipText">学习使人长寿</li> <li class="tipBg"></li> <li>时间：2088-02-23</li> <li>地点：冥王星</li> </ul> </div> </body> </html> CSS文件
#content{ width: 199px; padding: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 25px; border:1px solid red; } ul,li{ margin: 0; padding: 0; list-style: none; } /*父级元素相对定位*/ ul{ position: relative; } .tipText,.tipBg{ width: 199px; height: 25px; position: absolute; top: 154px; } .tipBg{ background: #000; opacity: 0.5; /*设置背景透明度*/ } .tipText{ color: #f9fcf9; /*z-index: 1;设置层级，使得字体可以在背景的上层显示 最低为0 不设上限*/ } 
