首页 > 代码库 > 初识CSS
初识CSS
css解释
<div style="color: red"> ares </div>
显示效果如下:
<head> <meta charset="UTF-8"> <title>Title</title> <!--在头部指定好CSS样式然后,在标签里使用class="样式名应用"--> <style> .re{ color: green; } #name{ background-color: red; } /*所有span标签都会引用*/ span{ font-size: 100px; } </style> </head> <body> <div style="color: red"> ares </div> <span class="re"> <!--这里应用指定好的CSS样式名即可--> ares ares </span> <div style="color: red" id="name"> aresaresares </div> </body>
显示效果如下:
CSS的外部引用
写一个独立的文件存储css样式代码如下:
html代码如下:
<head> <meta charset="UTF-8"> <title>ares</title> <link rel="stylesheet" href="common.css"> <!--这里通过link导入样式,有点类似与python导入模块中的import *--> </head> <body> <!--这里直接应用指定好的CSS样式名即可--> <div class="re"> ares </div> </body>
显示效果如下:
CSS样式应用中通过class应用CSS样式即可,还有两种方式代码如下:
<head> <meta charset="UTF-8"> <title>ares</title> <!--在头部指定好CSS样式然后,在标签里使用class="样式名应用"--> <style> #name{ background-color: blue; } </style> </head> <body> <!--这里不需要指定,只要id=name的就会自动应用头部指定的CSS样式--> <div style="color: red" id="name"> aresaresares </div> </body>
显示效果如下:
标签应用,为指定标签统一设置格式:在头部<style>p{....}</style> 这里的p是标签的名称,也可以是div这样就会给所有的div设置格式,与name类似
CSS常用属性
background 【背景】
background-color 背景颜色 代码如下:
<div style="background-color: aqua;font-size: 50px"> ares </div>
显示效果如下:
background-image 背景图片 代码如下:
<div style="background-image: url(favicon.ico);height: 80px;" >
</div>
显示效果如下:
首先确认,div是块级别的标签,我们的图片仅仅是一个小的图片,但是现在是平铺,所以看下面的代码:
<div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
</div>
显示效果如下图:
border 【边框】
设置边框,效果图如下图:
代码如下:
<!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色--> <!--第一种:线的粗细为1像素,实线、红色--> <div style="border:1px solid red;height:50px" ></div> <!--第二种:线的粗细为1像素,点、蓝色--> <div style="border:1px dotted blue;height:50px" ></div> <!--第三种:线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:50px" ></div>
边框可以单独的设置一边的边框、上、下、左、右
代码如下:
<!--边框--> <div style="border-left: 30px green solid;">aresssss</div> <div style="border-right: 30px green solid;">aresssss</div>
显示效果如下:
cursor 鼠标停放所显示的效果
代码如下(鼠标停放在字体位置会变成相应形状):
<div style="cursor:pointer">停放在这里显示小手(pointer)</div>
<div style="cursor:help">停放在这里显示问号(help)</div>
<div style="cursor:wait">停放在这里显示问号(wait)</div>
<div style="cursor:move">停放在这里显示移动(move)</div>
<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>
浮动 float (用的非常多,用来布局使用)
效果图如下:
代码如下:
<head> <meta charset="UTF-8"> <title>ares</title> <link rel="stylesheet" href="common.css"> <style> .w-left{ width: 30%; background-color: blue; height: 100px; float: left; } .w-right{ width: 70%; background-color: green; height: 100px; float: left; } </style> </head> <body> <div class="re"> ares </div> <div> <div class="w-left"></div> <div class="w-right"></div> </div>
注:有一种情况,如果不给父div设置高度,并且设置了float之后,子的float可能会覆盖父div的颜色,解决办法是在父的div内加一条:
<div style="clear:both;"></div>
CSS选择器
标签选择器
为类型标签设置样式例如:<div>、<a>、等标签设置一个样式,代码如下:
<head> <meta charset="UTF-8"> <title>ares</title> <style> /*标签选择器*/ div{ font-size: 20px; } </style> </head> <body> <div>ares</div> </body>
显示效果如下:
ID选择器
为指定的ID设置样式,代码如下(id选择器中ID不可以重复):
<style>
/*ID选择器*/
#i1{
background-color:red;
}
</style>
<body>
/*为所有id为i1的ID应用样式,注意咱们是为了测试,在实际的生产中ID不能相同*/
<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a> </body>
效果图如下:
类选择器
class选择器,id是可以相同的,代码如下:
<style>
/*类选择器标签*/
.cls{
background-color:blue;
font-size: 15px;
}
</style>
</head>
<body>
<!--任何类型的标签都可以调用类选择器-->
<div class="cls">
class test div
</div>
<a class="cls">
class test a
</a>
<span class="cls">
class test span
</span>
</body>
注:上面的3个选择器一般不要用标签&id选择器
关联选择器
<body> <style> .container li{ /*为一个标签应用了,类选择器,下的li标签设置样式*/ background-color: red; } </style> <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式--> <div class="container"> <ul> <li>ares</li> <li>ares</li> <li>ares</li> </ul> </div> </body>
显示效果如下:
关联选择器:应用场景为某标签下面的标签设置指定的样式:当然可以再在每个li标签内定义class
问:如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢?在li后面再加个a即可!
<style> .container li{ /*为一个标签应用了,类选择器,下的li标签设置样式*/ background-color: red; } .container li a{ background-color: green; } </style> <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式--> <div class="container"> <ul> <li>ares</li> <li>ares</li> <li>ares</li> <li> <a>ares</a> </li> </ul> </div>
显示效果如下:
组合选择器
有这么一个场景,看下面的关联组合器,cc1和cc2都要使用相同的样式怎么办?重写一遍?
.container .a .cc1 {
background-color: pink;
}
.container .a .cc2 {
background-color: pink;
}
解决方法代码如下:组合选择器1
.container .a .cc1,.container .a .cc2 {
background-color: pink;
}
上面cc1后面的“逗号”就是或的关系,如果路径都是相同的话可以进行改良代码如下:
.container .a .cc1,.cc2 {
background-color: pink;
}
这里组合的时候他是按照第一个出现的逗号来进行处理的,看下面的代码:
/*组合选择器*/
.container b ,.a .cc1,.cc2 {
background-color: pink;
}
/*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
.container b
.container b .a .cc1
.container b .cc2
......这里需要注意,“逗号”是或的关系,一般这个不常用,常用的是上面的方法
属性选择器
写表单验证的时候最常用,举个例子来说看下面的代码:
我要在这么input下找到type为text的标签并且给他设置样式,在上面咱们知道了组合标签,但是组合选择器最小单元是标签,他不能定位到type属性
<div>
<input type="text" />
<input type="password" />
<input type="file" />
<input type="checkbox"/>
<input type="button"/>
<input type="reset"/>
</div>
怎么做呢?在组合选择器后面加个[type=“text”]即可
<style>
/*input和[之间不能有空格]*/
.con input[type="text"] {
border:3px solid red;
}
</style>
效果如下:
需求又来了,我想找到input标签为type为text并且name为“ares”的那个input标签
<div class="con">
<input type="text" />
<input type="text" name="ares"/>
<input type="password" />
<input type="file" />
<input type="checkbox"/>
<input type="button"/>
<input type="reset"/>
</div>
解决方法:在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果),代码如下:
<style> /*input和[之间不能有空格]*/ .con input[type="text"][name="ares"] { border:3px solid red; } </style>
效果图如下:
属性标签经常用,要记住
也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> /*input和[之间不能有空格]*/ .con input[type="text"][ares="cainiao"] { border:3px solid red; } </style> </head> <body> <div class="con"> <input type="text" /> <input type="text" ares="cainiao" /> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div> </body> </html>
初识CSS