CSS简介
CSS(Cascading Style Sheets),称为层叠样式表，用于对页面进行美化，CSS可以使页面变的更加美观。基本上所有的html页面都会使用一些CSS。
使用方法：元素内联、页面嵌入及外部引入（三种方法定义了相同的样式，优先级：标签>页面嵌入>外部引用）
语法：style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
引入外部css文件
CSS应用案例
元素内联：
<p style="background-color: aqua"> 前端之CSS学习 </p>
效果：
页面嵌入：
在头部定义好css样式，需要时直接应用：
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
<style>
.css_test{
background-color: darkorchid;
}
</style>
</head>
<body>
<div>
<p class="css_test">
<!--这里应用指定好的CSS样式名即可-->
前端之CSS学习
</p>
</div>
</body>
效果：
外部引入
写一个独立的文件存储css样式代码如下：建议（在样式文件里加上标注防止出现遗忘）
# css定义，文件名称color.css .page_color{ /*设置背景颜色及宽带*/ background-color: darkorchid; width: 300px; } # html页面 <head> <meta charset="UTF-8"> <title>前端CSS</title> <!--这里通过link导入样式，有点类似与python导入模块中的import *--> <link rel="stylesheet" href="color.css"> </head> <body> <div> <p class=page_color> <!--这里直接应用指定好的CSS样式名即可--> 前端之CSS学习 </p> </div> </body>
效果：
CSS常用属性
background[背景]
background-color 背景颜色background-image 背景图片
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
代码：
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
</head>
<body>
<div style="background-color: red">
<!--设置背景颜色-->
Hello,html
</div>
<div style="background-image: url(ico.gif);height: 80px;">
<!--设置背景图片-->
</div>
</body>
效果：
div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：
<div style="background-image: url(ico.gif);height: 80px;background-repeat: no-repeat" > </div>
效果：
border[边框]
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色--> <!--第一种：线的粗细为1像素，实线、红色--> <div style="border:1px solid red;height:10px" ></div> <!--第二种：线的粗细为1像素，点、蓝色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三种：线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:10px" ></div> # 边框可以单独的设置一边的边框、上、下、左、右 <!--在左边设置边框，3px、实线、红色--> <div style="border-left: 3px solid red">前端CSS</div>
效果：
display
<!--display 为none将隐藏标签--> <div style="display: none;">前端CSS</div> <!--display 为inline会将块级别标签调为内联标签--> <div style="background-color:red;display:inline">前端JavaScript</div> <!--display 为block会将内联标签调为块级别标签--> <a style="background-color:red;display:block">前端HTML</a>
效果：
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 浮动[用的比较多，用于布局]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端CSS</title> <style> .float-left{ width:20%; background-color:red; height: 500px; float: left; /*这里长和宽，可以用百分比或者直接指定像素来指定*/ } .float-right{ width: 80%; background-color:blue; height: 500px; float:left; /*这里长和宽，可以用百分比或者直接指定像素来指定*/ } </style> </head> <body> <div class="float-left"></div> <div class="float-right"></div> </body> </html>
效果：
注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：
<div style="clear:both;"></div>
CSS选择器
CSS选择器种类
- 标签选择器
- id选择器（不常用）
- class选择器
- 层级选择器
- 组合选择器
案例：
<style> /*标签选择器，找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ } /*class选择器，找到class=c1的所有标签，应用一下样式*/ .c1{ background-color: red; } /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/ /*.c2 div p a{*/ /**/ /*}*/ .c2 div p .c3{ background-color: red; } /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; } </style>
CSS选择器案例
1、id应用
"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> # name意思就是所有id为name的都会使用这个css样式
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
#name{
background-color: red;
}
</style>
</head>
<body>
<div>
<p id="name">
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
前端CSS
</p>
<p id="name">
前端HTML
</p>
</div>
</body>
效果：
ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
/*ID选择器*/
#i1{
background-color:red;
}
</style>
</head>
<body>
/* 为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同 */
<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a>
</body>
</html>
效果：
2、标签应用
为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
p{
background-color: lightskyblue;
width: 100px;
height:20px;
}
</style>
</head>
<body>
<div>
<p>
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
前端CSS
</p>
<p>
前端HTML
</p>
</div>
</body>
效果：
标签选择器
为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端CSS</title> <style> /*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/ div{ font-size: 19px; } </style> </head> <body> <div> font size test 19 </div> </body> </html>
效果：
3、类选择器
class选择器，id是可以相同的，代码如下：
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
<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>
效果：
注：以上三种选择器，建议使用第三种
4、关联选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*为一个标签应用了,类选择器,下的li标签设置样式*/ .container li{ background-color: pink; } </style> </head> <body> <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式--> <div class="container"> <div style="height: 20px;background-color: red;"> test </div> <ul> <li> li1 </li> <li> li2 </li> <li> li3 </li> </ul> </div> </body> </html>
效果图：
关联选择器应用场景：为某标签下面的标签设置指定的样式：
# 下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式
.container li{
background-color: pink;
}
# 问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！
.container li a {
background-color: pink;
}
案例：
<!DOCTYPE html> <html lang="en"> <head> <style> /*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/ .container .l .p { background-color: pink; } </style> </head> <body> <div class="container"> <div class="l"> test <div> <ul> <!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着--> <li class="p"> hello shuaige </li> </ul> </div> </div> </div> </body> </html>
效果图：
5、组合选择器
有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？
.container .a .cc1 {
background-color: pink;
}
.container .a .cc2 {
background-color: pink;
}
解决方法代码如下：
.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
......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法
6、属性选择器
写表单验证的时候最常用,举个例子来说看下面的代码：
我要在这么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>
<!DOCTYPE html> <html lang="en"> <head> <style> /*input和[之间不能有空格]*/ .con input[type="text"] { border:3px solid red; } </style> </head> <body> <div> <input type="text" /> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div> </body> </html>
效果图：
需求又来了，我想找到input标签为type为text并且name为“lianxi”的那个input标签
<div class="con"> <input type="text" /> <input type="text" name="lianxi"/> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div>
解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：
<style> /*input和[之间不能有空格]*/ .con input[type="text"][name="shuaige"] { border:3px solid red; } </style>
效果：
属性标签经常用，要记住
也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> /*input和[之间不能有空格]*/ .con input[type="text"][alex="shuaige"] { border:3px solid red; } </style> </head> <body> <div class="con"> <input type="text" /> <input type="text" alex="shuaige" /> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div> </body> </html>