css概念
上一篇介绍HTML时，已经说了，如果把HTML比作一个裸男的话，那么CSS就是为这个裸男穿上衣服，搭配一些换看的发型。
官方的术语是,css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
css选择器
存在的方式有三种：
- 元素内联（直接在标签中使用） 语法为：style=‘xxx:xxxxx‘
- 页面嵌入 语法如：< style type="text/css"> </style > #在头部指定CSS样式
- 外部引用 语法如：<link rel="stylesheet" href="common.css" />
存在方式有三种，那么肯定存在一个优先级关系：
元素内联>页面嵌入>外部引用， 这个仅限于同样的样式冲突时才有用
可能上述看着有点蒙下面看代码比较直观一点。
元素内联：
直接在标签上使用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联</title>
</head>
<body>
<p style="background-color: red">
内联类型
</p>
</body>
</html>
显示效果：
页面嵌入：
在head处写好css样式，在应用这样的好处就是可以重复利用，如下代码：
注：（class是css选择器的一种后面会详细介绍）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面嵌入</title>
<!--在头部设定好css样式（名字随意），在标签里使用class="样式名字"（class是css选择器的一种后面会详细介绍）-->
<style>
.css{
background-color: darkorange;
}
</style>
</head>
<body>
<div>
<!--调用头部的css样式-->
<p class="css">
页面嵌入测试
</p>
</div>
</body>
</html>
显示效果：
外部引用 ：
把样式写到一个css文件中，然后去调用：
css文件中的样式文件名为common.css代码如下：
div{
background-color: red;
color: white;
}
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调文件</title>
<!--导入文件-->
<link rel="stylesheet" href="common.css">
</head>
<body>
<div>
<!--调取头部导入的文件里，定义的样式为div的，这里也是css选择器的一种-->
Hello,Tom!
</div>
<div>
Helll,Jerry!
</div>
</body>
</html>
显示效果：
1、标签选择器
为标签类型设置的样式如：<div>、<a>、<span>、<p>等标签，如以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*标签为div（也可以设置为a、p等标签）的默认使用以下样式*/
div{
color: red;
}
</style>
</head>
<body>
<!--div标签默认使用头部定义的样式-->
<div>Jerry1</div>
<div>Jerry2</div>
<!--p标签没有定义样式不调用-->
<p>Tom</p>
</body>
</html>
显示效果：
2、ID选择器
指定ID设置的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
/*ID选择器*/
#i1{
font-size: 20px;
background-color: red;
color: black;
}
</style>
</head>
<body>
<!--这里的id不能是相同的-->
<a id="i1">Tom</a>
<a id="i3">jerry</a>
<a id="i2">Tom</a>
</body>
</html>
显示效果：
3、类选择器
一般情况下用的都是类选择器，类名可以是相同的。如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.cls{
background-color: red;
font-size: 25px;
}
</style>
</head>
<body>
<!--这里的任何标签都可以调用类选择器-->
<div class="cls">TOM1</div>
<a class="cls">TOM2</a>
<p class="cls">TOM3</p>
<span class="cls">TOM4</span>
</body>
</html>
显示效果：
4、关联选择器
关联选择器：应用场景为某标签下面的标签设置指定的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关联选择器</title>
<style>
/*为一个标签使用，cls类选择器下的div下的p标签使用*/
.cls div p{
background-color: red;
}
</style>
</head>
<body>
<!--这个div应用了cls类选择器，那么他下面的div下的所有p标签将应用上面设置的样式-->
<div class="cls">
<div style="background-color: #4cae4c">Tom</div>
<div>
<p>Jerry</p>
<p>Jerry2</p>
</div>
</div>
</body>
</html>
显示效果：
也可以关联类选择器的方式：如下代码
<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>
显示效果：
5、组合选择器
如果两个或多个关联类选择器都需要相同的样式怎么整？其实不需要重写一个
看以下样式：
.cls .a .b1 {
background-color: pink;
}
.cls .a .b2 {
background-color: pink;
}
解决办法：组合选择器（“逗号”就是或的关系）一般不常用
.cls .a .b1,.cls .a .b2 {
background-color: pink;
}
#如果前面两个类都相同的话也可以再次做简化
.cls .a .b1,b2 {
background-color: pink;
}
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
.cls .b1,.cls1 .b2 {
background-color: pink;
}
</style>
</head>
<body>
<div class="cls">
<div class="b1">TOM</div>
</div>
<div class="cls1">
<div class="b2">JERRY</div>
</div>
</body>
</html>
显示效果：
6、属性选择器
表单验证的时候会经常用到，看以下例子：
需要给input下找到类型为text的标签，并且给这个标签设置上样式，上面讲的可以组合标签、关系等选择器，最小单位是标签，不能定义type属性！
<div>
<input type="text" />
<input type="password" />
<input type="file" />
<input type="checkbox"/>
<input type="button"/>
<input type="reset"/>
</div>
其实在组合选择器后面加上[type=“text”]就ok了如下：注意（input[type=“text”]中间不能有空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属相选择器</title>
<style>
.cls input[type="text"]{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="cls">
姓名<input type="text"/>
密码<input type="password"/>
爱好<input type="checkbox"/>
<input type="file"/>
</div>
</body>
</html>
显示效果：
那么问题又来了，想到到input标签属性为type=text并且name等于Tom的input标签咋整,如下？
<div class="cls">
输入<input type="text" name="Tom"/>
姓名<input type="text" />
密码<input type="password"/>
爱好<input type="checkbox"/>
<input type="file"/>
</div>
办法总是有的，再添加一个属性就解决了如下代码：
<style>
.cls input[type="text"][name="Tom"]{
border: 2px solid red;
}
</style>
显示效果：
属性标签经常用
也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：
css常用属性
background 【背景】
1、background-color
背景颜色 前面多少也有运用到，这个就不多做介绍了
2、background-image 背景图片
运用代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
</head>
<body>
<div style="background-image: url(favicon.ico);height: 60px;">
<!--url为图片的路径，height高度占多少像素-->
</div>
</body>
</html>
显示效果：
背景图片不重复：
因为div是块级标签会占一整行，要想只显示一个单独的图片如以下代码
<div style="background-image: url(favicon.ico);height: 60px;background-repeat: no-repeat">
<!--background-repeat: no-repeat 就是为了让图片不重复-->
</div>
显示效果：
border【边框】
设置边框，分为实线、虚线、点的线形式如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
</head>
<body>
<!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为hello-->
<div style="border: 2px solid red;height: 20px">hello</div>
<!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为hello2-->
<br /><div style="border: 2px dotted black;height: 20px">hello2</div>
<!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为hello3-->
<br/><div style="border: 2px dashed blue;height: 20px">hello3</div>
</body>
</html>
显示效果：
边框也可以单独的设置一个边如只显示单个的上、下、左或右
<!--设置上下左右的单边-->
<br/><div style="border-left: 2px solid red;height: 20px">左边框</div>
<br/><span style="border-right: 2px solid blue;height: 20px">右边框</span>
<br/><div style="border-top: 2px solid red;height: 20px">上边框</div>
<br/><div style="border-bottom: 2px solid red;height: 20px">下边框</div>
显示效果如下：
cursor 鼠标停放所显示的效果
把鼠标放上去显示小手或不同的形状，如以下代码，效果自己试吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标小手</title>
</head>
<body>
<p style="cursor:pointer">停放在这里显示小手(pointer)</p>
<p style="cursor:help">停放在这里显示问号(help)</p>
<p style="cursor:wait">停放在这里显示一个圈正在加载形状(wait)</p>
<p style="cursor:move">停放在这里显示移动(move)</p>
<p style="cursor:crosshair">停放在这里显示定位(crosshair)</p>
</body>
</html>
float 浮动 、漂 （用来布局使用，常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.float-l{
width:20%;
background-color: black;
height: 200px;
float: left;
/*float:left意思都是往左飘*/
/*这里的宽度和高度都可以用百分比来制定*/
}
.float-r{
width:80%;
background-color: red;
height: 100px;
float: left;
}
</style>
</head>
<body>
<!--引用头部定义的样式-->
<div class="float-l"></div>
<div class="float-r"></div>
</body>
</html>
显示效果：
时间： 2024-11-02 16:31:26