前端笔记-css
css(穿着)
1. 第一种<head><style></style></head>中可以写css样式
css选择器 定位到哪个标签的css
id选择器
<!DOCTYPE html> ssng="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css_id选择器</title> <style> /*id选择器*/ /*#代指id*/ #div1{background-color:red} </style> </head> <body> <div id="div1">nihao</div> </body> </html>
id组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*id组合选择器选择器*/ /*id选择器扩展组合写法,注意格式逗号,和井号*/ #w1,#w2{ background-color: red; } </style> </head> <body>
<!--id中的元素在同一个html中只能出现一次,class可以出现多次--> <div id="w1">1</div> <div id="w2">2</div> </body> </html>
class选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*class选择器*/ /*.代指class*/ .c1{background-color:black} </style> </head> <body> <div class="c1">nihao</div> </body> </html>
class组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*class组合选择器选择器*/ /*class选择器扩展组合写法,注意格式逗号,和点*/ .c1,.c2{ background-color: red; } ,.c3{ background-color: yellow; } </style> </head> <body> <!--class中的元素在同一个html中可以出现多次,而id只能出现一次--> <div class="c1">1</div> <div class="c1 c2">2</div> <div class="c3">3</div> </body> </html>
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*标签选择器*/ /*直接指定标签,其结果会引用到当前html中所有的元素,不过通常还是用定位比较准确的选择器比较好*/ div{ background-color: red; } </style> </head> <body> <div>nihao</div> </body> </html>
标签层级选择器 在标签选择器中更深层的定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*标签层级选择器*/ /*直接指定标签后加上空格表示层级再加上后续标签*/ div span{ background-color: red; } div div{ background-color: yellow; } </style> </head> <body> <div> <div>1</div> <span>2</span> </div> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--样式标签--> <title>css</title> <style> /*属性选择器选择器*/ /*属性选择器写法,注意标签名和属性,只有符合标签名和属性值才能匹配*/ div[name = "cc"]{ background-color: red; } div[id = "aa"]{ background-color: yellow; } p[class = "dd"]{ background-color: pink; }
</style> </head>
属性选择器扩展
伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*通过a标签属性选择器测试伪类,注意a标签内置了伪类选择器,通过body继承修改不了a标签的样式,要单独设置a标签的伪类才能修改a标签的几种样式,冒号表示伪类后面跟属性名{css样式}*/ /*link没有访问过状态*/ a:link{color: red} /*hover鼠标悬浮状态*/ a:hover{color: pink} /*active点击(鼠标按住到松开)状态*/ a:active{color:green} /*visited点击后的状态*/ a:visited{color: black;} </style> </head> <body> <a href="http://www.baidu.com">百度</a> </body>
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*伪元素选择器*/ p::first-letter{ color: red; } /*一般一个冒号是伪类,两个冒号是伪元素,现在一个冒号也可以使用了*/ div:first-letter{ color: blue; } </style> </head> <body> <p>helloworld</p> <div>你好世界 !!</div> </body> </html>
常用伪元素::after,::before
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类after,before</title> <style> /*伪类after可以动态的加入css样式,固定格式是::after或者::before,content表示输入文字*/ /*::after表示样式加在后面*/ #after::after{content: "**after测试成功**"} /*::before表示样式加在前面*/ .before::before{content: "**before测试成功**"} </style> </head> <body> <div id="after">测试after</div> <div class="before">测试before</div> </body> </html>
主流清除浮动的用法:
conntent必须要加不为空的字符,display:block表示把此标签变成块级标签,clear:both左右两侧都不浮动,visibivity:hidden表示隐藏标签的内容,但是标签块还是存在,如果想要隐藏标签块加上,height:0就行了
2. 指定标签添加css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> </head> <body> <!--第二种添加css样式,在指定标签中加入style属性--> <div name="cc" style="background-color: red">1</div> </body> </html>
3. <head></head>中引入css样式表
/*路径为当前目录的css.css文件*/ .c1{ background-color: black; } .c2{ background-color: pink; } .c3{ background-color: red; } .c4{ background-color: yellow; }
<!DOCTYPE html> <html lang="en"> <head> <!--link一般两种用途,一个是做网站图标显示,还有一种是引用css样式--> <link rel="shortcut icon" href="H[K_981P569OK@_FHL5V3LE.png"> <meta charset="UTF-8"> <title>css</title> <!--第三种添加css样式方法,在引用css样式表,css.css文件名--> <link rel="stylesheet" href="css.css"> </head> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> <!--也可以直接在指定属性中添加样式表--> <div class="c4" rel="stylesheet" href="css.css">4</div> </body> </html>
选择器嵌套规则
css优先级测试
/*css样式表*/
.c1{ background-color: black; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <!--引用css样式表--> <link rel="stylesheet" href="css.css" > <!--通过head头中style加入样式颜色--> <style> .c1{ background-color: red; } </style> </head> <body> <!--直接引入样式颜色--> <div class="c1" style="background-color: yellow">1</div> </body> </html>
通过查看页面以此顺序是黄红黑,再把右侧头部样式表和style相互调换,发现颜色顺序是黄黑红
最终测试发现,css样式调用顺序是由内而外,由近至远
css样色代码
表达方式1:
css颜色是通过#号后面加一个16进制数展现的
表达方式2:
css颜色可以用rgb(0~255,0~255,0~255)表示rgb就是红绿蓝三原色,通过不同的值可以调出所有的颜色
表达方式3:
英文单词 color:red
http://www.w3school.com.cn/tags/html_ref_colornames.asp
css样式属性
vertical-align: middle;
|
设置垂直居中,vertical-align表示垂直对齐方式,一般用于图片 |
<a href="http://www.baidu.com" style="text-decoration: None">hhh</a>
|
text-decoration: None表示去除所有修饰,通常用于删除a标签下横线, |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--font-weight最粗字体--> <div style="height: 100px;width: 100px;background-color: yellow;font-size: 50px;font-weight: bolder">rainbol </div> </body> </html> |
![]() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> #c1{ width: 50px; height: 50px; /*外边框 1像素 红色 实线*/ border: 1px red solid; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 50px; } </style> <body> <div id="c1">rainbol</div> </body> </html> |
![]() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> .c1{ width: 50px; height: 50px; background-color: red; /*浮动,页面右侧*/ float: right; } </style> <body> <div class="c1"></div> <div class="c1" style="background-color: yellow"></div> <div class="c1" style="background-color: green"></div> |
![]() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="display: inline ">块转行内</div> <span style="display: block">行内转块</span> </body> </html> |
display属性可以使行内标签,块级标签相互转换 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--行内标签不能应用高宽,内内边距样式,行内标签自己有多大就占多大,如果 行内标签想转成块级标签,并且不想占满一整行怎么办--> <!--<span style="width: 100px;height: 100px">nihao</span>--> <!--即使块又是行内,行内块标签,inline-block--> <span style="display: inline-block;width: 100px;height: 100px">123</span> </body> </html> |
![]()
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height测试</title> <style> /*把默认设置的浏览器宽度干掉*/ *{margin: 0} #line-height{height: 100px;width: auto;background-color: pink; /*上下调节样式高度,100px,表示上下各增加高度50px*/ line-height: 100px; /*每个字之间间隙增加5px*/ letter-spacing: 5px; /*空格间间隙增加10px*/ word-spacing: 10px; /*单词首字母大写*/ text-transform: capitalize; } </style> <body> <div id='line-height' >hello, 刷刷刷 ,world!</div> </body> </html>
|
![]()
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--之后通过js对display进行操作可以点击操作对图片进行展示和隐藏--> <span style="display:none;width: 100px;height: 100px">隐藏标签</span> </body> </html> |
![]() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="height: 100px;width: 100%;border:1px red solid"> <div style="margin-top: 22px;height: 48px;width: 100%;background-color: green"></div> <div style="padding-top: 22px;height: 48px;width: 100%;background-color: green"></div> |
margin:内边距 padding外边距 border:边框 margin-top内边距:距离自己本身与上边框的距离像素 padding-top外边距:改变自身大小 |
/*盒子模型padding*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #boxes{ /*当只有一个值时表示padding的上下左右都为10px*/ /*padding: 10px;*/ /*当设置了两个值表示padding的上下为10px,左右为20px*/ /*padding: 10px 20px;*/ /*当设置了三个值表示padding的上边距为10px,左右边距为20px,下边距为30px*/ /*padding: 10px 20px 30px;*/ /*当设置了4个值表示padding的依次顺序顺时针方向,上左下右*/ padding: 10px 20px 30px 40px ; /*掌握了这些设置单个属性可以通过padding-top等api设置*/
|
![]()
|
<!--margin距离边框0 postition=fixed绝对定位--> <div style="margin: 0;position: fixed;top: 0;right: 0;left: 0;height: 20px;background-color: green"> </div> |
指定目标位置绝对,无视滚动条在页面定位,top,right等元素对其位置变化 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body style="margin: 0" > <!--相对定位postiton,根据relative外层div,然后根据absolute内部div进行构筑--> <div style="position: relative;width: 500px;height: 500px;border: 1px black solid"> <div style="position: absolute;height: 100px;width: 100px;background-color: green"> </div> <div style="right: 0;position: absolute;height: 100px;width: 100px;background-color: pink"> </div> <div style="left: 0;bottom: 0;position: absolute;height: 100px;width: 100px;background-color: red"> </div> <div style="right: 0;bottom: 0;position: absolute;height: 100px;width: 100px;background-color: black"> </div> </div> </body> </html> |
![]() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body style="margin: 0" > <div style="position: relative;width: 500px;height: 500px;border: 1px black solid"> <div style="z-index: 10;position: absolute;height: 100px;width: 100px;> <!--z-index分层--> </div> <div style="z-index: 11;position: absolute;height: 100px;width: 100px;background-color: pink"> </div> </div> </body> </html>
|
两张图片重叠在一起,z-index分层属性,数值是1-999任意一个数,区分在于哪个数值大,就选择哪个层,后面可以通过js控制图片显示 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div> <input type="button" style="cursor:pointer" value="登录" > </div> </body> </html> |
当鼠标悬浮到按钮出现小手样式 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--overflow滚动条--> <!--hidden 当图片或者内容大于外层时自动截取左上部分--> <!--auto 根据内容自动增加滚动条 如果图片小于外边框,滚动条会消失--> <!--scroll 无论大小都增加滚动条--> <div style="border: black 1px solid;width: 100px;height: 100px;overflow: scorll" > <img src="H[K_981P569OK@_FHL5V3LE.png"> </div> </body> </html> |
![]()
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--background-size:50px 50px改变背景图的大小,等比例缩放,或者放大-->
<!--background-image背景图,如果图片小于外层会发生堆叠--> <!--background-repeat: no-repeat背景图不堆叠--> <!--x-repeat横向堆叠--> <!--y-repeat纵向堆叠--> <div style="border: black 1px solid;width: 600px; height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')"> </div> |
作用:用小图无限堆叠,加快网页渲染速度 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="background-position: 1px 1px;background-repeat: no-repeat;border: black 1px solid;width: 600px; height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')"> </div> </body> </html> |
抠图:以百度为例![]() 保证外部div足够小的情况下,通过改变background-postiton像素大小来找到所需图的位置,提升页面缓存效率,和整体页面渲染速度 |
clear的用法 clear一般放在样式标签最下边 |
|
高级选择器补充 | |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ #outer1 #outer2{/*选择器后面跟上空格再接选择器或者其他标签 这种表示outer1下的outer2标签及其子孙标签被变成green*/ background-color: green; } #outer1 a div span{ /*注意一定紧挨着的,如果中间有不存在的标签就不会生效*/ background-color: red; } </style> </head> <body> <div id="outer1">111 <div id="outer2">222 <div id="outer3">333 <span id="inner"> RainBol </span> </div> </div> </div> </body> </html>
|
![]()
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*子代选择器也是挨着寻找,如果没有找到就不生效*/ #outer1>span{ background-color: yellow; } #outer1>div{ /*标签选择器可以应用到其下所有div标签*/ background-color: red; } #outer1>#outer2>#outer3{/*选择器可以应用到其下所有标签*/ background-color: #0d8ddb; } </style> </head> <body> <div id="outer1">111 <div id="outer2">222 <div id="outer3">333 <span id="inner"> RainBol </span> </div> </div> </div> </body> </html>
|
![]()
|
<!DOCTYPE html> <html lang="en"> <head>
|
![]()
|
版权声明:本文原创发表于 博客园,作者为 RainBol 本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。 |