css基础
1、三种css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外链css样式--> <link rel="stylesheet" href="路径"> <style> /*内嵌css样式*/ div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <!--行间样式--> <div style="background: white"></div> <!--css Cascading Style Sheet 层叠样式表——修饰、美化网页,化妆师 CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。 行间样式 > 内嵌css样式 > 外链css样式(在style之前引入) 外链css样式位于style之后时优先级大于内嵌css样式 --> </body> </html>
2、基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } /*元素选择器 选择相同的元素对相同的元素设置一种css样式 选中页面中所有的此元素*/ div{ width: 100px; height: 50px; background: aqua; } p{ width: 100px; height: 50px; background: aqua; } /* id选择器 给标签设置一个id属性,在写样式时,在id名字前面加个 # */ #box{ background: antiquewhite; } /* class选择器 给标签设置一个class属性,在写样式时,在class名字前面加个. 一般给具有相同属性的元素设置同一个class */ .wrap{ background: black; } </style> </head> <body> <!--基本选择器的优先级--> <!--id > class > 元素(标签)(TagName)> * --> <div>1</div> <div class="wrap">2</div> <div id="box" class="wrap">3</div> <div>4</div> <p>1</p> <p class="wrap">2</p> <p>3</p> </body> </html>
3、复杂选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } /* , 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/ div,p{ width: 100px; height: 50px; background: white; } /* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/ div ~ p{ width: 150px; height: 50px; background: aquamarine; } /* > 子代选择器 选择某个元素下面的子元素*/ div > p{ width: 150px; height: 50px; background: aquamarine; } /* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/ p + p{ width: 150px; height: 50px; background: aquamarine; } </style> </head> <body> <!--div{$}*3 +tab(快速生成div标签并按顺序插入数字)--> <p>3</p> <div>kk</div> <p>4</p> <div>1 <span>1</span> </div> <div>2 <p>div1</p> <p>div2</p> </div> <div>3</div> <p>1</p> <p>2</p> </body> </html>
4、后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } li{ width: 50px; height: 50px; background: aqua; } /* 后代选择器*/ div ul li{ width: 50px; height: 50px; background: aqua; } /*ol.box li == ol[class=box] li */ ol[class=box] li{ width: 50px; height: 50px; background: aqua ; } #box{ background:blue; } div ol li.wrap{ background: black; } </style> </head> <body> <!-- 复杂后代选择器 1.先比id(最高位) class(中间位) tagName(个数位) 2.id选择器个数不相等,id越多,优先级越高 3.id选择器个数相同,则看class,class多的优先级高 4.class个数相等,就看tagName个数 --> <div> <ul class="box"> <li id="box" style="background: red">ul1</li> <li>ul2</li> <li>ul3</li> <li>ul4</li> </ul> <ol class="box"> <li>ol1</li> <li>ol2</li> <li class="wrap">ol3</li> </ol> </div> <ul> <li>ul1</li> <li>ul2</li> <li>ul3</li> <li>ul4</li> </ul> <ol> <li>ol1</li> <li>ol2</li> <li>ol3</li> </ol> </body> </html>
5、伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*LoVeHAte爱恨原则*/ a:link{/*link 未被点击的链接*/ color: blueviolet; } a:visited{/*已被点击的链接*/ color: blue; } a:hover {/*鼠标悬停其上的元素 */ color: red; background: aqua; font-size: 20px; /*cursor: default 默认(a标签默认手指,其他标签默认箭头)*/ /*cursor: pointer; 手指*/ /*cursor: wait; 等待*/ /*cursor: help;帮助*/ } a:active{/*鼠标已经再其上按下但是还没有释放的元素*/ color: yellowgreen; } div{ width: 50px; height: 50px; background: aqua; } /*改变的是div本身*/ /*!*div:hover{*! */ /*width: 100px;*/ /*height: 100px;*/ /*background: bisque;*/ /*}*/ p{ width: 20px; height: 20px; background: red; display: none; } /*改变的是div的后代 p元素*/ div:hover p{ width: 30px; height: 30px; background: blue; display: block; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <div> <p></p> </div> </body> </html>
6、css文字属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*font-family 字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候, 如果前面的字体没有就使用后面的字体*/ .box1{ font-family: Algerian,"宋体"; } /* font-size 字体大小 单位 px rem em % px 谷歌浏览器默认字体大小16px,最小是12px rem 相对于html(根标签)的字体大小 em 等于父级的字体尺寸——相对于父级字体大小而言的 % 相对于父容器中字体的%调整 这个要知道 */ .box2{ font-size: 20px; } .box3{ font-size: 12px; } .box4{ font-size: 2rem; } #box{ font-size: 30px; } #box div{ /*font-size: 2em;*/ font-size: 50%; } /* font-weight 字体粗细 关键字 normal 默认字体 lighter 较细 bold 加粗 bolder 很粗 给值 只能100-900的整百数 400相当于正常的 700相当于bold */ .box5{ font-weight: bold; } .box6{ font-weight: 700; font-style: italic; } /* font-style 字体类型 normal 默认 文字正常 italic 文字斜体(属性) oblique 文字斜体 */ /* color 文字颜色 关键字 英文单词 red green 16进制(0-9 a-f) #5544aa #54a #abd456 #dddddd #ddd rgb(0-255,0-255,0-255) r red g green b blue rgba(0-255,0-255,0-255,0-1) r red g green b blue a alpha(透明度) 0 完全透明 1 完全不透明 */ .box7{ /*color: aqua;*/ color: rgb(224, 62, 69); } .box8{ /*color: #222add;*/ color: rgba(224, 62, 69,0.2); } </style> </head> <body> <div class="box1">hello 001 abc</div> <div class="box2">hello 001 abc</div> <div class="box3">hello 001 abc</div> <div class="box4">hello 001 abc</div> <div class="box5">hello 001 abc</div> <div class="box6">hello 001 abc</div> <div class="box7">hello 001 abc</div> <div class="box8">hello 001 abc</div> <div id="box"> <div>hello 001 abc</div> </div> </body> </html>
7、css文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
white-space: 换行方式
normal 正常换行
nowrap 不换行
*/
/*
text-indent 首行缩进(em)
line-height 行高(和盒子高度一样时垂直居中)
letter-spacing 字距
word-spacing 词距
*/
/*
text-align 文本水平对齐方式
left 默认值 向左对其
right
center
*/
/*
text-transform 文本大小写
none 默认值 无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将英文单词的首字母大写
*/
p {
width: 400px;
background: aqua;
/*white-space: nowrap;*/
text-indent: 2em;
line-height: 30px;
/*letter-spacing: 5px;*/
/*word-spacing: 20px;*/
/*text-transform: uppercase;*/
/*text-transform: lowercase;*/
text-transform: capitalize;
}
div {
width: 50px;
height: 50px;
background: antiquewhite;
line-height: 50px;
text-align: center;
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
}
/*
text-decoration 下划线 删除线 上划线
none 默认值,可以用这个属性去掉已经有下划线或者删除线或者上划线的样式
underline 下划线,一般用于文章的重点表明
overline 上划线
line-through 删除线
*/
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>Python [1] (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,
由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
<div>1</div>
<a href="#">55555</a>
</body>
</html>
8、css背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* background-color 背景色 background-image 背景图片 background-repeat 背景平铺 repeat 平铺 默认 repeat-x 平铺x repeat-y 平铺y np-repeat 不平铺 注意:只有背景图片的宽高小于被设置的元素的宽高,才会有平铺效果 background-position 背景位置 x轴 y轴 x轴 left center right y轴 top center bottom 如果只给一个值,默认在x轴,y轴默认center(50%) % px background-size 背景大小 % px 给一个值的时候,默认x轴,y轴默认auto auto会等比缩放 cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片 contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片 */ div{ width: 520px; height: 700px; border: 1px solid red; background-color: aqua; background-image: url("img/0.jpg"); background-repeat: no-repeat; /*background-position: 10px 50%;*/ /*background-size: 180px 176px;*/ /*background-size: cover;*/ /*background-size: contain;*/ /*background: aqua url("img/0.jpg") no-repeat 10px center/300px 298px;*/ /*background: color image repeat position/size*/ } </style> </head> <body> <div></div> </body> </html>
9、盒子模型
盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
①边框(border)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* 盒子模型 盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的 */ /* border:边框 类型 颜色; border-width border-style solid实线 dashed虚线 dotted点线 double双边框 border-color 一个值的时候: 代表四个方向值一样 上右下左(顺时针) 二个值的时候: 上下 右左 三个值的时候: 上 右左 下 四个值的时候: 上 右 下 左 border-width 边框大小 border-top-width 上边框大小 border-right-width 右边框大小 border-bottom-width 下边框大小 border-left-width 左边框大小 border-top-width:0 border-style 边框样式 border-top-style 顶部边框类型 border-right-style 右边边框类型 border-bottom-style 底部边框类型 border-left-style 左边边框类型 border-color 边框颜色 border-top-color 顶部边框颜色 border-right-color 右边边框颜色 border-bottom-color 底部边框颜色 border-left-color 左边边框颜色 */ div { width: 150px; height: 250px; /*border: 10px solid red;*/ border-width: 5px 10px 15px 20px; border-style: solid dotted dashed double; border-color: red blue aqua fuchsia; } </style> </head> <body> <div></div> </body> </html>
②内边距(padding)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* padding 内边距,边框与内容之间的距离 一个值的时候: 代表四个方向值一样 上右下左(顺时针) 二个值的时候: 上下 右左 三个值的时候: 上 右左 下 四个值的时候: 上 右 下 左 */ div{ width: 300px; height: 200px; border: 1px solid red; /*padding: 20px;*/ /*padding-left: 50px;*/ /*padding-top: 50px;*/ padding: 50px 0 50px; } </style> </head> <body> <div> padding 内边距,边框与内容之间的距离 一个值的时候: 代表四个方向值一样 上右下左(顺时针) 二个值的时候: 上下 右左 三个值的时候: 上 右左 下 四个值的时候: 上 右 下 左 </div> </body> </html>
③外边距(margin)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* margin 外边距 元素与其他元素的距离(边框以外的距离) 一个值的时候: 代表四个方向值一样 上右下左(顺时针) 二个值的时候: 上下 右左 三个值的时候: 上 右左 下 四个值的时候: 上 右 下 左 margin: auto; 快速左右居中 垂直方向: margin-bottom,margin-top 取两者之间的较大值 水平方向: margin-left,margin-right 取两者的和 overflow:hidden; 超出隐藏,解决内边距重叠问题 */ div{ width: 300px; height: 200px; background: antiquewhite; /*border: 1px solid red;*/ /*margin: 50px;*/ /*margin: auto;*/ /*display: inline-block;*/ overflow: hidden; } .box{ /*margin-top: 100px;*/ } p{ width: 50px; height: 50px; background: aqua; /*margin: 100px;*/ margin: 100px; } </style> </head> <body> <div> <p></p> </div> <div class="box"></div> </body> </html>
④盒子大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 150px; height: 150px; background: aqua; border: 10px solid red ; padding: 20px; margin: 50px; } /* 盒子大小=样式宽 + 内边距 + 边框 盒子宽度=左border+右border+width+左padding+右padding 盒子高度=上border+下border+height+上padding+下padding */ </style> </head> <body> <div></div> </body> </html>
⑩浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* 浮动的定义:使元素脱离文档流,按照指定(左右)方向发生移动,遇到父级边界或者相邻的浮动元素停下来。 文档流:是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置) 脱离文档流 :在页面中不占位置 清除浮动 1.给父级增加高度(不推荐使用) 2.给父级加overflow:hidden; 3.给父级加一个类 .clearfix:after{ content: ""; display: block; clear: both; } 浮动的特点 如果只给前面的元素浮动,后面的要占据他的位置 */ li{ width: 50px; height: 50px; border: 1px solid red; margin-bottom: 50px; list-style: none; float: left; /*border-radius:50%; 快速圆角 一个值四个角一样,两个值对角一样 三个值分别是左上角、右上角和左下角、右下角 */ border-radius: 5px 10px 20px; line-height: 50px; text-align: center; } div{ width: 150px; height: 150px; background: aqua; } ul{ border: 2px solid red; width: 300px; /*height: 100px;*/ /*overflow: hidden;*/ } .clearfix:after{ content: ""; display: block; clear: both; } ul li{ width: 50px; height: 50px; background: aqua; } ul li.left{ float: left; } ul li.right{ float: right; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div></div> <div></div> <div></div> <div></div> <ul class="clearfix"> <li class="left"></li> <li class="right"></li> </ul> </body> </html>
⑪定位
1、相对定位和静态定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* position 定位 static 静态定位(没有定位),默认 relative 相对定位,相对于正常位置(原来没定位之前的位置)进行定位,还要占据位置 */ div{ width: 100px; height: 100px; background: aqua; /*margin: 50px auto;*/ } .box1{ position: relative; top: 20px; background: aquamarine; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
2、绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--absolute 绝对定位,没有占据位置,使元素完全脱离文档流 没有定位父级,则相对于整个文档发生偏移 参考最近非static定位的父级进行定位 (一般与相对定位结合使用)--> <!--方向词 left right top bottom--> <style> * { margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background: aqua; position: absolute; top: 100px; left: 50px; } .box2{ width: 200px; height: 200px; background: antiquewhite; margin: auto; position: relative; } #box{ width: 500px; height: 500px; background: black; margin: 50px auto; position: relative; } </style> </head> <body> <div id="box"> <div class="box2"> <div class="box1"></div> </div> </div> </body> </html>
3、固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--fixed 固定定位,相对于浏览器窗口进行定位--> <!--方向词 left right top bottom--> <style> * { margin: 0; padding: 0; } div{ width: 50px; height: 50px; background: aqua; position: fixed; /*position: absolute;*/ left: 200px; top: 600px; } </style> </head> <body style="height: 2000px"> <div></div> </body> </html>
4、显示层级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--z-index 规定定位的层级(默认0) 值:number 值越大层级越高--> <style> * { margin: 0; padding: 0; } ul{ width: 100px; height: 100px; border: 2px solid red; position: relative; } li{ width: 50px; height: 50px; background: aqua; position: absolute; top: 10px; } .box1{ background: red; } .box2{ background: #c4ff7b; z-index: 2; } .box3{ background: #b864ff; } .box4{ background: rgba(16, 41, 124, 0.91); z-index: -5; } </style> </head> <body> <ul> <li class="box1"></li> <li class="box2"></li> <li class="box3"></li> <li class="box4"></li> </ul> </body> </html>