1 css概念
cascade style sheets:级联样式表
原理:把属性从标签中分离形成一门单独的语言 实现样式的复用
语法:属性名:属性值,
优点:1 实现样式的复用
2 提供更丰富,更精准的样式
3 浏览器对css的兼容性更好
4 可以轻松实现页面元素的布局和定位
2 css与html结合的方式
<html>
<head>
<title>css_01</title>
<meta charset="gbk"/>
<style type="text/css">
.cla_p{
border:3px yellow double;
color:green;
background-color:#cccccc;
text-align:right;
}
</style>
<link type="text/css" rel="stylesheet" href="2.css"/>
<style>
@import url("1.css");
</style>
</head>
<body>
<p style="color:red;text-align:center;border:3px blue solid;">p1</p>
<p class="cla_p">p22222</p>
<p class="cla_p">p34444</p>
<p class="cla_p">p33333</p>
<p >p35555</p>
</body>
</html>
p{
font-size:28px;
font-weight:bold;
}
p{
width:800px;
margin:10px auto;
}
3 css的选择器
3.1 基本选择器
<html>
<head>
<title>css_02选择器</title>
<meta charset="gbk"/>
<style type="text/css">
*{
color:red;
}
.cla1{
font-weight:bold;
}
span{
font-size:30px;
}
#div3{
border:2px solid blue;
}
#div5,.cla2{
background:#cccccc;
}
#div0 font{
font-weight:bold;
color:blue;
font-size:30px;
}
</style>
</head>
<body>
<span class="cla1">span11</span><br/>
<span class="cla1">span12</span><br/>
<span class="cla2">span13</span><br/>
<div class="cla1">div1</div>
<div class="cla1">div2222</div>
<div id="div3">div3333</div>
<div class="cla2">div4</div>
<div id="div5">div5555</div>
<div id="div0">
div标签
<font>div中的font标签11</font>
<font>div中的font标签21</font>
</div>
<div >
div标签
<font>div中的font标签12</font>
<font>div中的font标签22</font>
</div>
<font>font标签1</font>
<font>font标签1</font>
正常文字
</body>
</html>
3.2 伪类选择器
<html>
<head>
<title>css_03伪类选择器</title>
<meta charset="gbk"/>
<style type="text/css">
a:link{
text-decoration:none;
font-size:16px;
background:#cccccc;
color:red;
}
a:visited{
text-decoration:line-through;
font-size:36px;
background:#999966;
color:blue;
}
a:hover{
text-decoration:underline ;
font-size:26px;
background:#99aaaa;
color:#ff33aa;
}
a:active{
text-decoration:overline ;
font-size:32px;
background:#999999;
color:#aaffaa;
}
input:focus{
border:1px solid blue;
background:#999999;
}
div:hover{
color:red;
font-weight:bold;
background:#999999;
}
#div1:first-letter{
color:red;
font-weight:bold;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">点我试试11</a></li>
<li><a href="#">点我试试12</a></li>
<li><a href="javascript:void(0);">点我试试13</a></li>
<li><a href="javascript:void(0);">点我试试14</a></li>
</ul>
<input type="text"/><br/>
<input type="text"/><br/>
<div style="border:1px solid blue;width:200px;height:100px;">div</div>
<div id="div1" style="border:1px solid blue;width:200px;height:100px;">你好吗?朋友!</div>
</body>
</html>
3.3 选择器的优先级
<html>
<head>
<title>css_03伪类选择器</title>
<meta charset="gbk"/>
<style type="text/css">
#p1{
color:blue;
border:1px solid blue;
}
.cla1{
color:yellow;
border:3px double red;
background:#aaaaaa;
}
p{
color:green;
border:3px double yellow;
background:#ffaa33;
font-size:28px;
}
*{
color:green;
border:3px double yellow;
background:#ffaa33;
font-size:40px;
text-align:center;
}
</style>
</head>
<body>
<p class="cla1" id="p1" style="color:red;">p11111</p>
</body>
</html>
4 盒子模型
<html>
<head>
<title>css_04盒子模型</title>
<meta charset="gbk"/>
<link type=""/>
<style type="text/css">
div{
width:200px;
height:300px;
border:3px solid blue;
border-color:red;
border-width:2px;
border-style:double;
border-top:3px solid yellow;
border-bottom-color:blue;
background:#aaaaaa url("bg.png") no-repeat;
background-color:#cccccc;
background-image:url("bg.png");
font-size:30px;
font-weight:bold;
font-style:italic;
font-family:宋体;
color:red;
text-decoration:line-through;
text-transform:uppercase;
letter-spacing:10px;
text-indent:40px;
text-align:center;
word-break:break-all;
margin:10px;
padding:40px;
padding:10px 20px 40px 80px;
}
#div2{
font-family:楷体;
margin:10px 40px 70px 100px;
margin:10px 100px;
}
</style>
</head>
<body style="border:3px solid blue;padding:0px;">
<div id="div1">div1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa中文你好吗?DDDD</div>
<div id="div2">div2bbbbbbbbbbbbbbbbbbb中文你好吗?DDDD</div>
<div id="div3">div33中文你好吗?DDDD</div>
</body>
</html>
5 浮动
float和clear的使用
<html>
<head>
<title>css_05浮动</title>
<meta charset="gbk"/>
<style type="text/css">
div{
border:1px solid blue;
width:300px;
height:100px;
padding:10px;
margin:10px;
word-break:break-all;
}
#div1{
background-color:#aa33cc;
float:left;
}
#div2{
background-color:#ccaa33;
float:right;
}
#div3{
background-color:#33ccaa;
clear:both;
float:left;
}
#div4{
background-color:#cccccc;
float:right;
margin-right:400px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div22222</div>
<div id="div3">div333333333</div>
<div id="div4">div44444444444444444444444</div>
</body>
</html>
效果
浮动练习
<html>
<head>
<title>浮动练习</title>
<meta charset="gbk"/>
<style type="text/css">
div{
width:600px;
height:400px;
margin:50px auto;
border:1px solid blue;
font-size:21px;
color:blue;
}
img{
width:400px;
height:200px;
float:right;
}
</style>
</head>
<body>
<div>
<img src="file://C:\Users\Administrator\Desktop\img\99.jpeg"/>
1:格式不同:普通方法必须有返回值类型标识 如果没有返回值用void标识
构造方法没有返回值 不用void标识
2:命名不同:构造方法名字必须是类名
普通方法名字可以是类名(但如果是类名 不规范)
3:调用不同:构造方法被关键字new调用 调用一次就创建一个新的对象
普通方法被对象调用 一个对象可以调用多次普通方法
4:意义不同:构造方法功能用于创建对象
普通方法表示当前类创建的对象具有的功能
</div>
</body>
</html>
效果
6 定位
position/left/top
<html>
<head>
<title>css_06定位</title>
<meta charset="gbk"/>
<style type="text/css">
div{
border:1px solid blue;
width:300px;
height:100px;
padding:10px;
margin:10px;
word-break:break-all;
}
#div1{
background-color:#aa33cc;
}
#div2{
background-color:#ccaa33;
position:relative;
top:100px;
left:200px;
}
#div3{
background-color:#33ccaa;
}
#div4{
background-color:#cccccc;
}
#div0{
width:1200px;
height:550px;
border:1px solid red;
background-color:#eeeecc;
position:absolute;
margin-top:300px;
margin-left:300px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">div1</div>
<div id="div2">div22222</div>
<div id="div3">div333333333</div>
<div id="div4">div44444444444444444444444</div>
</div>
</body>
</html>
效果
练习
<html>
<head>
<title>定位练习</title>
<meta charset="gbk"/>
<style type="text/css">
div{
margin:100px auto;
width:900px;
}
img{
width:800px;
height:500px;
}
font{
font-size:100px;
font-weight:bold;
color:blue;
letter-spacing:80px;
position:relative;
top:-350px;
left:100px;
}
</style>
</head>
<body>
<div>
<img src="file://C:\Users\Administrator\Desktop\img/99.jpeg"/>
<font>沉鱼落雁</font>
</div>
</body>
</html>
效果