前端学习：学习笔记（CSS部分）
CSS的引入方式和书写规范
CSS的插入方式_内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!-- 插入CSS代码的第1种方式: 内嵌形式 -->
<div style="height: 300px;width: 300px;background-color: red;">
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
color: yellow;
}
</style>
</head> <body>
<!-- 插入CSS代码的第2种方式: 内部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Demo1.css" />
</head> <body>
<!-- 插入CSS代码的第3种方式: 外部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div>
</body> </html>
Demo01.css
div{
height: 500px;
width: 500px;
background-color: #FFFF00;
color: black;
}
CSS选择器
CSS标签选择器
<head>
<meta charset="utf-8" />
<title></title>
<!--
选择器的作用: 根据我们的项目需要,找到我们需要找到的某一些标签 选择器{
属性:属性值; ==>键值对
属性:属性值;
属性:属性值;
属性:属性值;
}
-->
<style>
div{
height: 300px;
width: 300px;
background-color: red;
} </style>
</head> <body>
<div><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSSid选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 400px;
width: 400px;
background-color: blue;
color: red;
}
</style>
</head>
<body>
<div id="d1"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSS类选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clazz{
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head> <body>
<div class='clazz'><h1>DIV1</h1></div>
<div class='clazz'><h1>DIV2</h1></div>
<div class='clazz'><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用多个选择器的情况
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: black;
} .clazz{
background-color: yellow;
} #d1{
background-color: red;
} </style>
</head> <body>
<div id="d1" class="clazz"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用三种方式插入CSS代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
background-color: blue;
}
</style>
<link rel="stylesheet" href="css/Demo05.css" />
</head> <body>
<div style="height: 100px;width: 100px;background-color: red;"><h1>DIV1</h1></div>
</body>
同时使用三种方式插入CSS代码.css
div{
height: 300px;
width: 300px;
background-color: yellowgreen;
}
属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
margin-bottom: 10px;
color: red;
} div[align="left"]{
background-color: yellow;
}
div[align="right"]{
background-color: blue;
} </style>
</head> <body>
<div align="left">DIV1</div>
<div align="left">DIV2</div>
<div align="right">DIV3</div>
<div align="right">DIV4</div>
<div align="right">DIV5</div> </body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
a:link{
color: yellowgreen;
}
a:hover{
color: black;
text-decoration: underline;
}
a:active{
color: darkgray;
}
a:visited{
color: darkblue;
}
</style>
</head> <body>
<h1>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="http://www.baidu.com">百度一下</a><br>
</h1>
</body>
层级选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 a{
color: red;
} </style>
</head>
<body>
<div id='d1'>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
</div>
<a>百度一下</a> </body>
CSS属性
CSS中的文本属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: yellowgreen;
font-family: "微软雅黑";
font-size: 50px;
color: red;
text-decoration: none;
text-align: right;
font-weight: bold;
line-height: 120px;
}
span{
color: black;
} </style>
</head>
<body>
HTML是世界上最好的编程语言.<br>
<span>
HTML是世界上最好的编程语言.<br>
HTML是世界上最好的编程语言.<br>
<span>
</body>
CSS中的背景属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: red;
background-image: url(img/tphot.jpg);
background-repeat: repeat-y; }
</style>
</head>
<body>
</body>
CSS中的列表属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li{
list-style-type:none;
list-style-image:url(img/tphot11.jpg);
}
</style>
</head> <body>
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul>
</body>
CSS中的显示属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
display: inline;
} ul li{
list-style-type: none;
display: inline;
} span{
height: 300px;
width: 300px;
background-color: salmon;
/*display: block;*/
} </style>
</head>
<body>
<input type="text" />
<div>
DIV
</div>
HTML
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul> <span>
我是一个块级标签
</span>
xxxxxx </body>
CSS中的浮动属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size: 30px;
font-weight: 900;
color: rosybrown;
}
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
} #d2{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
} #d3{
height: 300px;
width: 300px;
background-color: black;
float: right;
} .clear{
clear: both;
}
</style>
</head> <body>
<div id="d1">DIV1</div>
<div id="d2">DIV2</div>
<div id="d3">DIV3</div>
<div class="clear"></div>
</body>
练习：注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#header{
height: 100px;
width: 100%;
} #content{
height: 700px;
width: 60%;
/*设置页面居中*/
margin: auto;
border: 2px solid black;
} .c1{
height: 30px;
width: 100%;
background-color: #F7F7F7;
} .c2{
height: 200px;
width: 100%;
background-color: white;
} #c2-left{
height: 100%;
width: 30%;
float: left;
text-align: right;
} #c2-left div{
height: 20%;
} #c2-right{
margin-left: 20px;
height: 100%;
width: 60%;
float: left;
}
#c2-right div{
height: 20%;
} .clear{
clear: both;
} .c6{
height: 120px;
width: 100%;
background-color: white;
}
#c6-zhuce {
height: 40px;
width: 250px;
background-color: red;
text-align:center;
margin: auto; }
#c6-zhucezi{
padding: 8px;
}
span{
color: red;
} </style>
</head> <body>
<div id="header"></div>
<div id="content">
<div class="c1"><strong><font> 账户信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>用户名:</div>
<div><span>*</span>请输入密码:</div>
<div><span>*</span>请确认密码:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div><input type="password"/></div>
<div><input type="password"/></div>
</div>
<div class="clear"></div>
</div> <div class="c1"><strong><font> 联系人信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>联系人姓名:</div>
<div><span>*</span>所在部门:</div>
<div><span>*</span>固定电话:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
<select>
<option selected="selected">请选择</option>
<option value="yjb">研究部</option>
<option value="xzb">行政部</option>
<option>人事部</option>
<option>市场部</option>
</select>
</div>
<div><input type="text"/></div>
</div>
<div class="clear"></div>
</div>
<div class="c1"><strong><font> 公司信息</font></strong></div>
<div class="c6">
<div id="c2-left">
<div></div>
<div><span>*</span>公司名称:</div>
<div><span>*</span>购买类型/用途:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" checked="checked"/>
</div>
</div>
<div class="clear"></div>
</div> <div id="c6-zhuce">
<div id="c6-zhucezi">
<font color="white">立即注册 </font>
</div>
</div> </div> </body> </html>
CSS盒子模型
盒子模型
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 300px;
width: 300px;
background-color: darkgreen;
/*上下左右*/
padding: 50px;
/*上 左右 下*/
/*padding: 50px 100px 150px;*/
/*padding: 50px 100px 150px 200px;*/
border: 5px solid red; } #moon{
height: 300px;
width: 300px;
background-color: yellow;
} #d1{
height: 300px;
width: 300px;
border: 5px dashed black;
} #d2{
height: 300px;
width: 300px;
border: 5px dotted black;
} div{
margin-left: 50px;
margin-bottom: 100px;
} </style>
</head> <body> <div id="box">
<div id="moon"></div>
</div> <div id="d1"></div> <div id="d2"></div> </body>
圆角边框
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 300px;
height: 300px;
border: 5px solid red;
margin: auto;
margin-top: 100px;
/*border-radius: 50px;*/
/*border-radius: 50px 100px 150px;*/ }
#d2{
width: 300px;
height: 300px;
border: 5px solid blue;
border-radius: 150px;
}
#d3{
width: 300px;
height: 150px;
border: 5px solid blue;
border-radius: 300px 300px 0px 0px;
} #d4{
width: 300px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 0px 300px 300px;
} #d5{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 300px 0px 0px 300px;
} #d6{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 0px 300px 300px 0px;
} #d7{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 150px 0px 0px 0px;
} #d8{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 150px 0px 0px;
} </style>
</head>
<body> <div id="d1"></div> <div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
</body>
盒子阴影
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 500px;
width: 500px;
background-color: salmon;
box-shadow: 0px 0px 30px yellowgreen;
}
</style>
</head>
<body> <div></div> </body>
CSS 的定位
相对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: greenyellow;
margin-top: 20px;
/*设置相对定位*/
position: relative;
left: 150px;
/*right: 100px;*/
float: left;
/*top: 50px;*/
bottom: 100px;
}
#d2{
height: 300px;
width: 300px;
background-color: cornflowerblue;
margin-top: 20px;
float: left;
} </style>
</head> <body>
<div id="d1">
</div> <div id="d2">
</div>
</body>
绝对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
margin-top: 20px;
float: left;
} #d1{
background-color: greenyellow;
} #d2{
background-color: yellow;
/*设置成绝对定位*/
position: absolute;
left: 100px;
top: 500px; } #d3{
background-color: red;
}
</style>
</head> <body> <div id="d1">
</div> <div id="d2">
</div> <div id="d3">
</div>
</body>
固定定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 5000px; }
div{
height: 100px;
width: 80%;
background-color: greenyellow;
/*设置成固定定位*/
position: fixed;
top:300px;
}
</style>
</head> <body>
<div id="d1">我是一个广告~~~~~~~~~~~~~</div>
</body>
z-index属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
position: relative;
z-index: 10;
} #d2{
height: 300px;
width: 300px;
background-color: blue;
float: left;
margin-left: -200px;
margin-top: 50px;
z-index: 5;
position: relative;
} #d3{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
margin-left: -200px;
margin-top: 100px;
z-index: 1;
position: relative;
}
</style>
</head> <body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
设置元素透明度
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: blue;
opacity: 0.1;
}
</style>
</head>
<body>
<div>
DIV
</div>
</body>