一.CSS(级联样式)
1.级联 关联,将两个分离的内容关联起来
2.样式表 css修饰网页样式的语法集
3.优点:(1)内容和表现形式分离 ;(2)网页表现统一,易修改;(3)样式丰富,使页面布局更灵活;
(4)减少代码量 ;(5)独立页面,利于搜索引擎搜录.
4.css能做什么?
html写页面内容,css定义页面布局
二.基本语法
三种样式表
1.行内样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 行内样式表
<p style="属性名1:属性值1;属性名2:属性值2"></p>-->
<p style="color: red;font-size:20px;">世间安得双全法,不负如来不负卿</p>
</body>
</html>
2.内嵌样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在head标签中加入css代码 -->
<style type="text/css">
/* 使用选择器 p(选择标签p){color: red;font-family:"行楷";font-size: 20px;} */
p{
color: red;font-family:"行楷";font-size: 20px;}
</style>
</head>
<body>
<p>世间安得双全法,不负如来不负卿</p>
</body>
</html>
p{
color: red;font-size: 20px;}
二.选择器(一)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 p{color: #FF0000;font-size: 20px;} */
/* 类选择器 <p class="p1"> .p1{}*/
.p1{
color: #FF0000;}
.p2{
color: aqua;}
/* 选择器组合 提取共有属性 */
.p1,.p2{
font-size: 30px;}
/* id选择器 <p id="t1"> #ti{} */
#t1{
color: cornflowerblue;font-size: 35px;}
/* 通配选择器 *{} */
*{
color: cadetblue;font-size: 25px;}
</style>
</head>
<body>
<p id="t1">仓央嘉措</p>
<p class="p1">世间安得双全法,</p>
<p class="p2">不负如来不负卿.</p>
<p>pretty girl</p>
</body>
</html>
选择器(二)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* .p1>b 子标签选择器:选中指定父标签的指定子标签
语法:父标签>子标签{} */
/* .p1+p 选中指定标签的
语法:选择相邻选择器:器+相邻{}*/
/* .p1~p 兄弟选择器:选中指定标签的兄弟标签
语法:选择器~兄弟{}*/
{
color:#FF0000;
}
</style>
</head>
<body>
<p class="p1">
<b class="b1">p的大儿子</b>
<b>p的大儿子</b>
<i>
<b class="b2">p的孙子</b>
<b>p的孙子</b>
</i>
</p>
<p>
<b>p的2儿子</b>
<b>p的2儿子</b>
</p>
<p id="p3">
<b>p的3儿子</b>
<b>p的3儿子</b>
</p>
</body>
</html>
背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width:800px;
height:600px;
background-color: #00FFFF;
background-image:url(img/21d8a6347215dc75.jpg);
background-repeat: no-repeat;
background-size: 600px 400px;
background-position:center;
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color:#6495ED;
font-size: 20px;
font-family: 新宋体;
font-style: italic;
font-weight: bold;
/* text-decoration: line-through;删除线 */
text-indent: 2em;
letter-spacing: 5px;
}
a{
text-decoration: none;
font-family:楷体;
}
b{
word-spacing:initial;
font-family: Ink Free;
}
</style>
</head>
<body>
<p>IP协议是用于将多个包交换网络连接起来的，它在源
地址和目的地址之间传送一种称之为数据包的东西 ,它还
提供对数据大小的重新组装功能，以适应不同网络对包大
小的要求。IP的责任就是把数据从源传送到目的地。它不
负责保证传送可靠性，流控制，包顺序和其它对于主机到
主机协议来说很普通的服务。IP实现两个基本功能:寻址和
分段。IP可以根据数据包包头中包括的目的地址将数据报传
送到目的地址，在此过程中IP负责选择传送的道路，这种
选择道路称为路由功能。如果有些网络内只能传送小数据报，
IP可以将数据报重新组装并在报头域内注明。IP模块中包
括这些基本功能，这些模块存在于网络中的每台主机网关上，
而且这些模块(特别在网关上)有路由选择和其它服务功能。
</p>
<a href="">百度</a><br />
<b>hello world hello world hello world</b>
</body>
</html>
伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
text-decoration: none;
color: #6495ED;
}
a:visited{
color:#FF0000;
}
a:hover{
color: aquamarine;
text-decoration: underline;
}
a:active{
color: chartreuse;
text-decoration: underline;
}
.bb:hover{
color: #FF0000;
text-decoration: underline;
background-color:cyan;
}
.bb:active{
color: #6495ED;
font-family:楷体;
font-size: 20px;
}
.tq:focus{
color:hotpink;
background-color: #7FFF00;
font-size: 20px;
}
p:hover{
color: #5F9EA0;
}
</style>
</head>
<body>
<a href="http//www.baidu.com">百度</a>
<a href="http//www.qq.com">腾讯</a><br/>
<input type="button" value="进入" class="bb"/><br/>
<input type="text" class="tq"/>
<p>我依然爱你</p>
</body>
</html>
透明
透明:opacity 从0.0到1.0
块级;行级;行级块标签
块级:无论内容多少,都独立占一行
默认宽:与父级标签一致
默认高:0或者内容的高度
通过width和height设置宽高
<p><h1><ul><ol><hr><li>表格表单
行级:只占自身大小,不会占一行,不能设置宽高
<a><b><i>
行级块:可以设置宽高,不占一行
<img/><input/>
注意p标签不可以包含任何的块标签
display:inline;变成行级标签
display:block;变成块级标签
display:inline-block;变成行级块标签
div标签:纯净的块级标签(没有任何附加的标签)
span标签:纯净的行级标签(没有任何附加的标签)