CSS
一、基本选择器
/*标签选择器 网页中所有的div标签都会具有样式
div{
color: pink; 声明 ：需要设置的样式
最后一条声明的;可以省略 建议写上
}*/
/*类选择器 在一个页面中可以有N个 .class对应的属性值可以重复
.word{
color: pink;
}*/
/*ID选择器 在一个页面中只能有1个 #id对应的属性值不能重复 */
#s{
color: pink;
}
二、复合选择器
/* 并集选择器
多个选择器之间使用,（英文半角状态）隔开
.word,#s,span{
color: green;
}*/
/*交集选择器 格式：01.标签选择器+类选择器 02.标签选择器+ID选择器
必须是标签选择器在前
div.word｛｝ 去div标签中查找class属性值为 word的标签
div#s{} 去div标签中查找id属性值为 s的标签
div.word{
color: green;
} */
/* 后代选择器 必须有层级关系 选择器之前使空格隔开*/
#dv span {
color: green;
}
三、代码示例
多个选择器之间使用,（英文半角状态）隔开
.word,#s,span{
color: green;
}*/
/*交集选择器 格式：01.标签选择器+类选择器 02.标签选择器+ID选择器
必须是标签选择器在前
div.word｛｝ 去div标签中查找class属性值为 word的标签
div#s{} 去div标签中查找id属性值为 s的标签
div.word{
color: green;
} */
/* 后代选择器 必须有层级关系 选择器之前使空格隔开*/
#dv span {
color: green;
}
三、代码示例
1、*{
margin: 0px; /*设置网页中所有的元素 外边距为0*/
}
margin: 0px; /*设置网页中所有的元素 外边距为0*/
}
#nav{
width: 230px; /*最大的div宽度*/
}
width: 230px; /*最大的div宽度*/
}
.title{
height: 30px; /*div的高度*/
line-height: 30px;/*内容的行高*/
color: white; /*字体颜色*/
background:red url(“../image/arrow-down.gif”) 210px no-repeat; /*背景*/
cursor: move; /*控制鼠标的形状为 可移动状态*/
}
height: 30px; /*div的高度*/
line-height: 30px;/*内容的行高*/
color: white; /*字体颜色*/
background:red url(“../image/arrow-down.gif”) 210px no-repeat; /*背景*/
cursor: move; /*控制鼠标的形状为 可移动状态*/
}
ul{
background-color: #D7D7D7; /*背景颜色*/
}
a{
text-decoration: none; /*去掉超链接默认的下划线*/
}
li{
background-image: url(“../image/arrow-right.gif”) ; /*背景图片*/
background-repeat: no-repeat; /*背景图片的填充方式*/
background-position: 173px; /*背景图片的位置*/
line-height: 30px; /*内容的行高*/
/*list-style-image: url(“../image/arrow-down.gif”); 设置列表的标志图片*/
/* list-style-type: decimal-leading-zero; 设置列表的标志类型*/
/* list-style: decimal url(“../image/arrow-down.gif”) ; 类型和图片同时存在 取图片*/
list-style: none; /*去除标记*/
}
background-color: #D7D7D7; /*背景颜色*/
}
a{
text-decoration: none; /*去掉超链接默认的下划线*/
}
li{
background-image: url(“../image/arrow-right.gif”) ; /*背景图片*/
background-repeat: no-repeat; /*背景图片的填充方式*/
background-position: 173px; /*背景图片的位置*/
line-height: 30px; /*内容的行高*/
/*list-style-image: url(“../image/arrow-down.gif”); 设置列表的标志图片*/
/* list-style-type: decimal-leading-zero; 设置列表的标志类型*/
/* list-style: decimal url(“../image/arrow-down.gif”) ; 类型和图片同时存在 取图片*/
list-style: none; /*去除标记*/
}
/* 超链接的伪类*/
/*a:link{ 未访问的链接
color:red;
}*/
/*a:visited{ 已经访问的链接
color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
color:red;
text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
color:yellow;
}*/
/*a:link{ 未访问的链接
color:red;
}*/
/*a:visited{ 已经访问的链接
color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
color:red;
text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
color:yellow;
}*/
2、浮动模型 代码示例
a,#b,#c{
height: 80px;
width:120px;
border: solid 1px pink;
float: left; /*左浮动*/
/* float: right; /!*右浮动*!/*/
}
#main{
width: 350px;
height: 150px;
border: solid 1px red;
overflow: scroll;
/*内容溢出的默认属性值
visible:默认值 溢出部分显示
scroll：溢出部分滚动条显示
hidden:溢出部分隐藏
auto:自动调整
*/
height: 80px;
width:120px;
border: solid 1px pink;
float: left; /*左浮动*/
/* float: right; /!*右浮动*!/*/
}
#main{
width: 350px;
height: 150px;
border: solid 1px red;
overflow: scroll;
/*内容溢出的默认属性值
visible:默认值 溢出部分显示
scroll：溢出部分滚动条显示
hidden:溢出部分隐藏
auto:自动调整
*/
div{
border: dashed 2px red; /*边框的样式*/
width: 500px; /*宽度*/
/* margin-left: 100px; /!*左外边距*!/
margin-top: 100px; /!*上外边距*!/*/
margin:30px; /*上 右 下 左 顺时针顺序*/
margin:30px 50px; /*上下 30PX 左右 50PX*/
border: dashed 2px red; /*边框的样式*/
width: 500px; /*宽度*/
/* margin-left: 100px; /!*左外边距*!/
margin-top: 100px; /!*上外边距*!/*/
margin:30px; /*上 右 下 左 顺时针顺序*/
margin:30px 50px; /*上下 30PX 左右 50PX*/
padding: 30px; /*上 右 下 左 顺时针顺序 内边距*/
}
}
*{ /*整个网页中的所有元素 去掉内边距和外边距*/
padding: 0px;
margin: 0px;
}
div{
width: 300px;
border: solid 1px #3a6587; /*盒子的边框样式*/
margin: auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左外边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding: 30px 20px; /*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
3、盒子模型 代码示例
padding: 0px;
margin: 0px;
}
div{
width: 300px;
border: solid 1px #3a6587; /*盒子的边框样式*/
margin: auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左外边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding: 30px 20px; /*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
3、盒子模型 代码示例
div{
border: dashed 2px red; /*边框的样式*/
width: 500px; /*宽度*/
/* margin-left: 100px; /!*左外边距*!/
margin-top: 100px; /!*上外边距*!/*/
margin:30px; /*上 右 下 左 顺时针顺序*/
margin:30px 50px; /*上下 30PX 左右 50PX*/
border: dashed 2px red; /*边框的样式*/
width: 500px; /*宽度*/
/* margin-left: 100px; /!*左外边距*!/
margin-top: 100px; /!*上外边距*!/*/
margin:30px; /*上 右 下 左 顺时针顺序*/
margin:30px 50px; /*上下 30PX 左右 50PX*/
padding: 30px; /*上 右 下 左 顺时针顺序 内边距*/
}
*{ /*整个网页中的所有元素 去掉内边距和外边距*/
padding: 0px;
margin: 0px;
}
div{
width: 300px;
border: solid 1px #3a6587; /*盒子的边框样式*/
margin: auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左外边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding: 30px 20px; /*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
4、定位属性
}
*{ /*整个网页中的所有元素 去掉内边距和外边距*/
padding: 0px;
margin: 0px;
}
div{
width: 300px;
border: solid 1px #3a6587; /*盒子的边框样式*/
margin: auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左外边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding: 30px 20px; /*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
4、定位属性
<head lang=”en”>
<meta charset=”UTF-8″>
<title>定位属性</title>
<style type=”text/css”>
/*
position
01.relative:相对定位，相对于自身原来的位置
02.absolute：绝对定位，相当于父级
03.fixed : 固定定位 相对于浏览器
04.static ：默认值
*/
img{
position: fixed; /*固定定位*/
left: 50px;
top: 20px;
}
#a{
position: absolute; /*绝对定位*/
top: 20px;
height: 50px;
width: 50px;
background-color: blue;
}
#b{
height: 50px;
width: 50px;
background-color: deeppink;
}
#c{
position: relative; /*相对定位*/
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<meta charset=”UTF-8″>
<title>定位属性</title>
<style type=”text/css”>
/*
position
01.relative:相对定位，相对于自身原来的位置
02.absolute：绝对定位，相当于父级
03.fixed : 固定定位 相对于浏览器
04.static ：默认值
*/
img{
position: fixed; /*固定定位*/
left: 50px;
top: 20px;
}
#a{
position: absolute; /*绝对定位*/
top: 20px;
height: 50px;
width: 50px;
background-color: blue;
}
#b{
height: 50px;
width: 50px;
background-color: deeppink;
}
#c{
position: relative; /*相对定位*/
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id=”a”></div>
<div id=”b”></div>
<div id=”c”></div>
<img src=”image/cat.jpg” width=”50px” height=”50px”>
</body>
<div id=”b”></div>
<div id=”c”></div>
<img src=”image/cat.jpg” width=”50px” height=”50px”>
</body>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12184.html