############### CSS简介 ################
# CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets)
############### CSS的内容列表 ################
css的内容列表 1，css的引入，三种方式 2，css的选择器， 基本选择器，有四种，p # . * 组合选择器， 属性选择器 分组和嵌套 伪类选择器 伪元素选择器 选择器的优先级 3，css的各种属性， 宽和高，width，height， 字体属性，font-size，font-weight，color， 文字属性，text-align，text-decoration，text-indent， 背景属性，background-color，background-repeat，background-image，background-position， display 盒子模型，margin外边距，border边框，padding内填充，content内容 float，三种取值，left，right，none， clear，清除浮动， overflow，溢出属性， 定位position， 4，综合应用案例
############### CSS的引入 ################
# CSS如何引入： # 1，直接在标签中写style="样式1;样式2" # 2，在head中通过style标签定义 # 3，把css文件单独写入一个文件，在head中通过link导入外部的css文件，
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: blue; } </style> <link rel="stylesheet" href="test.css"> </head> <body> <a href="" style="color: red">百度</a> <p>海盐</p> <h1>小明</h1> </body> </html>
css文件，test.css
h1{ color: green; }
############### CSS的语法和注释 ################
/* css语法： 选择器{属性:值;属性:值} CSS注释： 有了注释整个的代码就很清晰了 */ /*解释性的说明，这个文件是做什么用的*/ /*全局性的样式*/ /*导航条的样式*/ /*商品列表的样式*/ p{ color: green;font-size: 48px; }
############### CSS的常用选择器 ################
/* css选择器： 第一种：标签选择器 但是这种有局限，会导致所有的标签都是同样的样式，但是实际中往往是同样的标签可能会有不同的样式 */ p{ color: green; } /* 第二种：id选择器 这个选择器的优先级要高于标签选择器，到这里基本一个页面的所有的样式都可以定义了， 但是一个网页有几百个标签都要表上id才可以， 有没有简单的办法呢？ */ #p2{ color: red; } /* 第三种：类选择器， 因为id不能重复，但是类可以重复，所以只需要写一份类选择器就可以应用到多个标签，这个实际工作中是用的最多的， */ .c1{ color: black; } /*第四种：通用选择器 对整个页面进行样式设置 */ *{ font-size: 18px; } /* 总结： 上面是最基本的选择器 # 标签选择器：适用于批量统一默认的样式， # ID选择器：适用于给特定的标签设置样式 # 类选择器：适用于给某一些标签设置样式， */
对应的html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <p id="p1">andy</p> <p id="p2">xiaomei</p> <p class="c1">xiaomei</p> <p class="c1">xiaomei</p> <p class="c1">xiaomei</p> <p class="c1">xiaomei</p> </body> </html>
############### CSS的组合选择器 ################
/* 还有一些不常用的，但是也会用到的选择器 组合选择器 */ /* 第一种组合选择器：后代选择器 */ /*这是标示id是d1的标签，下面的p标签，包含所有的后代，儿子，孙子标签*/ /*#d1 p{*/ /*color: red;*/ /*}*/ /* 第二种组合选择器：儿子选择器，只有儿子标签起作用，孙子标签是不起作用的 */ #d1>p{ color: red; } /*第三种组合选择器，毗邻选择器，必须是同级靠近的，而且只会往下找一个标签，再远的就不行了， */ div+p{ color: yellow; } /*第四种组合选择器，弟弟选择器，这是这个标签下面所有的标签都会受到影响 */ div~p{ color: blue; }
对应的html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="d1"> <!--这是儿子标签--> <p>div里面的p标签</p> <span>div里面的span标签</span> <div> <!--这是孙子标签--> <p>div中的div里面里面的p标签</p> <span>div中的div里面里面的span标签</span> </div> </div> <!--毗邻选择器--> <p>000</p> <hr> <div>111</div> <p>222</p> <p>333</p> </body> </html>
############### CSS属性选择器 ################
/*属性标签*/ /*这是把属性是s9的标签，颜色变成红色*/ [s9]{ color: red; } /*第二种方式*/ [s9="1"]{ color: green; }
对应的html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <p s9="1">这是一个p标签</p> <p s9="2">这是一个p标签</p> <p>这是一个p标签</p> </body> </html>
############### CSS的分组和嵌套选择器 ################
/*分组选择器*/ /*第一种写法*/ /*建议分组的时候，如果有多个标签，采用分行，但是记住一定要加逗号，否则就变成了后代选择器，*/ div, p{ color: red; } /*第二种写法*/ #d1, p{ color: green; } /*嵌套选择器*/ /*意思就是说不是一定要是一个标签，也可以是一个id表示的*/ #d1+p{ color: yellow; }
对应的html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="d1">这是一个div</div> <p>这是一个p标签</p> </body> </html>
############### CSS伪类选择器 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--伪类选择器--> <!--所有的标签都可以使用这个伪类选择器--> <!--格式：选择器：命令{样式}，选择器可以是元素选择器，也可以是id选择器，--> <style> /*<!-- 没有访问过的标签使用这个颜色，必须是浏览器没有访问过的，访问过了就不是这个颜色，-->*/ a:link { color: red; } /*访问过的标签使用这个颜色*/ a:visited { color: green; } /*鼠标移动上去，展示的颜色*/ /*这种网站上面用的非常的频繁，*/ a:hover{ color: aqua; } /*被选定*/ a:active{ color: chocolate; } /*input获取焦点时候的样式*/ input:focus{ outline: none; background-color: yellow; } </style> </head> <body> <a href="http://www.baidu.com">baidu</a> <a href="http://www.sohu.com">sohu</a> <input type="text"> </body> </html>
############### CSS伪元素选择器 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--伪元素选择器--> <!--这种下面有很多小的操作，用到的时候可以再查--> <style> /*<!--选择第一个字-->*/ p:first-letter { color: red; font-size: 48px; } /*这是在c1这个标签的前面加东西*/ .c1:before { color: red; content: "*"; } /*这是在c2这个标签的后面加东西*/ /*点击可以调整，这个可以使用js来绑定事件*/ .c1:after { color: red; content: "[?]"; } </style> </head> <body> <p> 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， 在苍茫的大海上， </p> <p class="c1">在苍茫的大海上</p> <p class="c1">在苍茫的大海上</p> </body> </html>
############### CSS选择器的优先级 ################
# 选择器的优先级
# 1，内联标签，直接在标签内部写style，这种优先级最高
# 2，选择器都一样，谁靠近标签谁生效，因为浏览器加载文件是从上到下加载的，
# 3，内联样式权重是1000，id选择器权重是100，类选择器权重是10，元素选择器权重是1，元素选择器就是标签选择器，
权重计算永不进位，10个元素选择器也大不过一个类选择器，
############### CSS字体属性 ################
/*常用的css属性*/ /*全局通用的样式*/ * { /*文字字体：如果浏览器不支持第一个字体，就就尝试下一个，如果都没有，就使用系统默认的，*/ font-family: "微软雅黑", "Arial", "sans-serif"; /*文字大小*/ font-size: 18px; } .c1 { /*字体的粗细（权重）*/ font-weight: 100; /*字体颜色*/ /*第一种颜色方式：直接英文*/ /*color: red;*/ /*第二种颜色方式：rgb*/ /*color: rgb(255,0,122);*/ /*第三种颜色方式：16进制*/ /*这种可以使用浏览器的取色器来取色*/ /*color: #e21f6d;*/ /*第四种方式：rgba*/ /*最后一位是透明度*/ color: rgba(255, 0, 0, 0.1); } .c2 { font-weight: 900; } .c3 { /*这是文本对齐方式的属性，有居中，左对齐，右对齐，两端对齐*/ /*text-align: center;*/ /*文本样式，可以下划线，上划线，删除线，等等，用的不多*/ text-decoration: underline; /*这是首行缩进，28像素，因为一个中文字体是14像素*/ text-indent: 28px; } a { /*有的公司会专门把超链接下面的默认的下滑线去掉，就是用这个，这个用的比较多*/ text-decoration: none; }
对应的html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <p>这是一个p标签</p> <p class="c1">c1</p> <p class="c2">c2</p> <div class="c3">围城</div> <a href="http://baidu.com">百度</a> </body> </html>
############### CSS背景属性 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--css的背景属性--> <style> .c1 { /*背景颜色*/ background-color: red; } .c2 { width: 800px; height: 800px; /*这是填充背景图片*/ /*默认是重复展示，一直铺满*/ background-image: url("http://img3.imgtn.bdimg.com/it/u=3595140452,1077552905&fm=26&gp=0.jpg"); /*这是是否重复*/ /*这是不重复，默认是摆在左上角*/ background-repeat: no-repeat; /*这是沿着x轴重复*/ /*background-repeat: repeat-x;*/ /*这是沿着y轴重复*/ /*background-repeat: repeat-y;*/ background-position: center; /*把这个图片固定住*/ background-attachment: fixed; /*边框的宽度*/ /*border- 10px;*/ /*边框的颜色*/ /*border-color: green;*/ /*边框的风格*/ /*border-style: solid;*/ /*这三个可以写到一起,简写*/ border: 10px solid green; /*还可以专门设置左边的线，右边的线，*/ } .c3 { background-color: red; /*设置不展示这个标签，页面不展示，都是代码是有的*/ /*display: none;*/ /*设置成行内*/ display: inline; } .c4 { /*这是设置成为块*/ /*本身span标签是行内标签，不能设置高度和宽度，但是如果设置成了块级标签，就可以设置了，*/ display: block; width: 100px; height: 100px; border: 10px solid green; } ul{ /*这是去掉小圆点*/ list-style-type: none; } li{ /*变成行内标签*/ display: inline; /*这是设置在右侧有一个边框，黑色*/ border-right: solid 1px #666666; } li.last{ /*这是设置最后一个右侧没有边框，*/ border-right: none; } </style> </head> <body> <div class="c3">div</div> <div class="c1">围城</div> <div class="c2"></div> <span class="c4">span</span> <ul> <li>电脑</li> <li>手机</li> <li class="last">宝宝</li> </ul> </body> </html>
############### CSS的盒子模型，这个非常的重要 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--盒子模型有四层 1，content，内容,width height 就是设置的内容的宽度， 2，padding，内填充，padding设置， 3，border，边框，border，border-width，border-color，border-style，都是设置的边框， 4，margin，外边距-->，margin设置， <style> .c1 { width: 200px; height: 300px; border: 5px solid green; /*调整两个标签之间的距离，就使用margin调整*/ /*这是margin上下左右都是10像素*/ /*margin: 10px;*/ /*margin-top: 50px;*/ /*margin-left: 100px;*/ /*右侧虽然设置了15，但是div是一个块级标签，在右侧空的地方还是会默认使用外边距进行填充*/ /*margin-right: 15px;*/ /*margin-bottom: 100px;*/ /*可以合到一起写，而且推荐也是合到一起写，按照上右下左的方式*/ /*margin: 5px 10px 15px 20px;*/ /*可以写两个，就是上下，左右*/ margin: 10px 20px; /*调整内容和边框的距离，使用padding，padding也可以简写*/ padding: 10px; } ul { /*这是去掉小圆点*/ list-style-type: none; } li { /*变成行内标签*/ display: inline; /*这是设置在右侧有一个边框，黑色*/ /*border-right: solid 1px #666666;*/ /*这样写padding是上下左右都是增加10像素*/ /*padding: 10px;*/ } li.last { /*这是设置最后一个右侧没有边框，*/ border-right: none; } li > a { border-right: 1px solid red; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div class="c1">12</div> <ul> <li><a href="">电脑</a></li> <li><a href="">手机</a></li> <li class="last"><a href="">宝宝</a></li> </ul> </body> </html>
############### CSS浮动 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*<!--清除浏览器默认的样式-->*/ * { margin: 0; padding: 0; } .c1 { height: 100px; width: 20%; background-color: red; /*浮动：float*/ /*在css中任何元素都可以浮动*/ /*浮动的作用就是在摆不开的时候可以往下自动移动*/ /*任何标签设置浮动之后，都会变成一个块级标签，都可以设置宽度和高度了，*/ /*div是块级标签，默认占据一行，我想要都往左堆积就要使用到浮动*/ /*可以使用浮动来做页面的布局*/ float: left; } .c2 { height: 100px; width: 80%; background-color: blue; float: left; } </style> </head> <body> <div> <div class="c1">12</div> <div class="c2">12</div> </div> </body> </html>
############### CSS的overflow，实现一个圆形的头像 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { border: 1px solid black; width: 120px; height: 120px; /*<!--如果标签空间小，但是内容多，会有溢出-->*/ /*可以加一个滚动条*/ overflow: auto; } /*这种网站头像会用到*/ .c2 { border: 1px solid black; width: 120px; height: 120px; /*这是显示一个圆的头像*/ border-radius: 100%; /*这是溢出的隐藏起来*/ overflow: hidden; } img{ /*这是适应div大小*/ max-width: 100%; } </style> </head> <body> <div class="c1"> fjljaldsjlf jadslfjlajdslkfj ajsdlfjladsjlfads fadsf adsfadfadsfad fad sf </div> <div class="c2"> <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt=""> </div> </body> </html>
############### CSS清除浮动 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { border: 1px solid red; } .c1 { width: 50px; height: 50px; background-color: blue; border: 1px solid black; /*这个时候浮动了，但是父级标签的边框就浮到上面去了，从父标签跑出来，*/ float: left; } /*第一种解决方法：加一个空的div，然后让他左边不能有浮动的标签*/ /*.c2{*/ /*!*这是左边不能有浮动的标签*!*/ /*clear: left;*/ /*}*/ /*第二种方法：*/ /*#d1:after{*/ /*content: "";*/ /*clear: both;*/ /*display: block;*/ /*}*/ /*第三种方法，这是常用的方法*/ .clearfix:after{ content: ""; clear: both; display: block; } /*清除浮动的副作用*/ </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <!--<div class="c2"></div>--> </div> </body> </html>
############### CSS定位 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .c1, .c2, .c3, .c4{ width: 100px; height: 100px; } .c1{ background-color: red; } .c2{ background-color: blue; /*这个相对定位是相对于原来的*/ position: relative; left: 150px; top: 100px; } .c3{ background-color: green; } .c4{ background-color: yellow; /*决定定位，相对于最近的一个祖宗标签*/ position: absolute; left: 150px; top: 100px; } .fixed-text{ /*这是固定位置*/ position: fixed; left: 20px; top: 20px; background-color: gray; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="fixed-text">c4</div> </body> </html>
############### css+html-博客首页 ################
html页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"> </head> <body> <!--左侧边栏 开始--> <div class="left"> <!--头像 开始--> <div class="header-img"> <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt=""> </div> <!--头像 结束--> <div class="blog-name">andy-blog</div> <div class="blog-info">什么也没有</div> <!--连接区 开始--> <div class="blog-links"> <ul> <li><a href="">关于我</a></li> <li><a href="">关于我</a></li> <li><a href="">关于我</a></li> </ul> </div> <!--连接区 结束--> <!--文章分类 开始--> <div class="blog-links"> <ul> <li><a href="">JS</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </div> <!--文章分类 结束--> </div> <!--左侧边栏 结束--> <!--右边栏 开始--> <div class="right"> <div class="artical-list"> <div class="artical"> <div class="artical-title"> <h1 class="artical-name">海盐</h1> <span class="artical-date">2019-12-12</span> </div> <div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。 这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div> <div class="artical-tag"> #JS #CSS </div> </div> <div class="artical"> <div class="artical-title"> <h1 class="artical-name">海盐</h1> <span class="artical-date">2019-12-12</span> </div> <div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。 这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div> <div class="artical-tag"> #JS #CSS </div> </div> <div class="artical"> <div class="artical-title"> <h1 class="artical-name">海盐</h1> <span class="artical-date">2019-12-12</span> </div> <div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。 这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div> <div class="artical-tag"> #JS #CSS </div> </div> <div class="artical"> <div class="artical-title"> <h1 class="artical-name">海盐</h1> <span class="artical-date">2019-12-12</span> </div> <div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。 这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div> <div class="artical-tag"> #JS #CSS </div> </div> </div> </div> <!--右边栏 结束--> </body> </html>
对应的css样式：
/*博客页面的相关样式*/ /*公共的样式*/ * { /*font-family: "微软雅黑";*/ font-size: 14px; margin: 0px; padding: 0px; } /*去掉超链接的下滑线*/ a { text-decoration: none; } /*左边栏 样式*/ .left { width: 20%; height: 100%; position: fixed; background-color: rgb(76, 77, 76); left: 0; top: 0; } .header-img { height: 128px; width: 128px; border: 5px solid white; /*这是显示一个圆的头像*/ border-radius: 100%; /*这是溢出的隐藏起来*/ overflow: hidden; margin: 0 auto; margin-top: 20px; } .header-img > img { max-width: 100%; } /*blog名称*/ .blog-name { color: white; font-size: 24px; font-weight: bold; text-align: center; margin-top: 15px; } /*blog介绍*/ .blog-info { color: white; text-align: center; border: 2px solid white; margin: 5px 15px; } /*连接组和标签组*/ .blog-links, .blog-tags { text-align: center; margin-top: 20px; } .blog-links a, .blog-tags a { color: white; } /*在标签前面都加上井号*/ .blog-tags a:before { content: "#"; } /*右边栏 样式*/ .right { width: 80%; height: 1000px; background-color: rgb(238, 237, 237); float: right; } .artical-list { margin-left: 30px; margin-top: 30px; margin-right: 10%; } .artical { background-color: white; margin-top: 15px; } .artical-title { padding: 15px; border-left: red solid 3px; } .artical-name { display: inline-block; } /*文章发布时间*/ .artical-date { float: right; } .artical-info { padding: 15px; } .artical-tag { padding: 15px 0; margin: 15px; border-top: 1px solid #eeeeee; }
############### css浮动做导航条 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .nav { background-color: black; padding: 15px 0; } .nav-left li { float: left; padding: 20px; } .nav-right { float: right; padding: 20px; } /*清除浮动*/ .clearfix:after, .clearfix:before { clear: both; content: ""; display: block; } .ss { width: 80%; /*上下0，左右自动*/ margin: 0 auto; } </style> </head> <body> <!--class里面可以放多个属性的，--> <div class="nav"> <div class="ss clearfix"> <div class="nav-left"> <ul> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> <li><a href="">玉米商城</a></li> </ul> </div> <div class="nav-right"> <a href="">登陆</a> <a href="">注册</a> <a href="">购物车</a> </div> </div> </div> </body> </html>
############### CSS ################
############### 结束线 ################