1、什么是css
css(cascading style sheet)级联样式表,层叠样式表
css主要的目的是用来装扮网页的
2、主流的版本
css2、css3
3、如何使用css
存在三种使用css的方式
|-- 标签样式
|-- 内联样式
|-- 外联样式
w3c在2007年,提出了三层分离原则
结构层:HTML
表示层:css
行为层:JavaScript
4、css的选择器
|-- 基本选择器:
-
|-- id选择器 #id
-
|-- class选择器 .className
-
|-- 标签选择器 tagName
-
|-- 通配符选择器
-
|-- 逗号选择器
标签的优先级比css优先级高
id选择器
#id
id不要重复
<!DOCTYPE html>
<html>
<head>
<title>id选择器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/idOption.css">
</head>
<body>
<div id="box"></div>
</body>
</html>
css
#box{
width: 200px;
height: 200px;
background-color: green;
}
执行结果
class选择器
.className
class名称可以重复 可以有多个名称 重复属性后面的说了算(后加载) 但都低于标签优先级
dashed 虚线(属性)
border-radius 圆角 ( 高度和宽度必须保持一致,不然变为椭圆)
三原色 rgb
FF0000 两个255 红色
00FF00绿色
0000FF蓝色
FF00FF紫色
FFFFFF白色
FFFF00黄色
两位一模一样可以简写 例如FFF
000黑色 其他用工具
HEML
<!DOCTYPE html>
<html>
<head>
<title>class选择器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/classOption.css">
</head>
<body>
<div class="box box1"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
CSS
.box{
border:1px dashed darkturquoise;
/*darkturquoise 颜色*/
width: 200px;
height:200px;
border-radius: 50%;
}
.box1{
background-color: #FFFF00;
}
执行结果
标签选择器
color:rgb(255,255,0)
rgba(255,255,0,0.5)最后一个表示通透度(0.1-1)
标签{}
HTML
<!DOCTYPE html>
<html>
<head>
<title>标签选择器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/biaoqianOption.css">
</head>
<body>
<p>这是一段文字</p>
<p>这是一段文字</p>
</body>
</html>
css
p{
color: rgb(255,255,0);
background-color: rgba(255,0,255,0.8);
}
执行结果
通配符选择器
dotted 点线
html和body之间有间距
reset。css
HTML
<!DOCTYPE html>
<html>
<head>
<title>通配符标签</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/tongpeifuOption.css">
</head>
<body>
<button>按钮</button>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
执行结果
复合选择器
.box,#box,div
<!DOCTYPE html>
<html>
<head>
<title>逗号选择器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/douhao.css">
</head>
<body>
<div id="box"></div>
<div class="box"></div>
</body>
</html>
css
.box,#box{
border: 1px solid red;
background-color: green;
width: 200px;
height:200px;
}