CSS基础学习day01
一、CSS简介
css是一种网页渲染技术，把文档结构和表现形式分离，使得网页更加的清爽。
css的必要条件：渲染特定的html标签。
div、span等容器：
div可以称为层或者块状元素，和p标签、h等标签具有一样的特点：单独占一行。
span称行内元素，和a标签、font标签、img等标签具有一样的特点：可以在一行中显示。
但是呢：css学习完后，没有绝对的“行内元素”和“块状元素”，可以通过display属性来进行转换【inline（行内）与block（块状）】
二、css写在哪呢？
1:.css可以写在标签内部的style属性中，这种称为内联样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="font-size: 80px; color: red; font-weight: bold;">
一个字
</span>
</body>
</html>
2.css可以写在hear下的style标签中，这种称为内部样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 80px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<span>
一个字
</span>
</body>
</html>
3.css可以写在单独的css文件中，需要<link>标签来引入css文件，这种称为外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<span>
一个字
</span>
</body>
</html>
二、选择器
1.标签选择器：使用HTML标签名来作为选择器，作用在相同的标签上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 80px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<span>
一个字
</span>
</body>
</html>
2.类选择器：以 . + 名称来命名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sp{
color: red;
}
</style>
</head>
<body>
<span class="sp">
一个字
</span>
</body>
</html>
3.ID选择器：以#+名称来命名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sp{
color: red;
}
</style>
</head>
<body>
<span id="sp">
一个字
</span>
</body>
</html>
4.通配符选择器，直接以*号命名，一般建议写在css开头，会渲染所有的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#sp{
color: red;
}
</style>
</head>
<body>
<span id="sp">
一个字
</span>
</body>
</html>
5.符合选择器或者群组选择器，将多个选择器写在一起，使用相同的css样式来渲染元素。
6.父子选择器。缩小目标范围,只作用在 “子 级”元素上，由父选择器>子选择器构成，注意：最终是渲染 符合子选择器的元素。父选择器和子选择器可以由，标签、id、class 等选择器构成。
7.伪类选择器hover，当鼠标放到对象上面时会出现hover的效果。
:before >>> 在匹配的元素中，添加内容---添加在原有内容的前面。
:after >>> 在匹配的元素中，添加内容---添加在原有内容的后面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*:hover
* 鼠标悬停时的效果
*/
a{
background-color: #008000;
width: 300px;
height: 42px;
}
a:hover{
color: red;
background-color: #DCDCDC;
}
/*:before
* 在匹配的元素中，添加内容---添加在原有内容的前面
* */
li:before{
content: "这是第";
}
/**
* :after
* 在匹配的元素中，添加内容---添加在原有内容的后面
* */
li:after{
content: "个";
}
#div3{
border: 1px solid red;
border-radius: 5px;
/* box-shadow: ;*/
text-align: center;
width: 80px;
}
#ul1{
margin: 0;
padding: 0;
list-style: none;
/*不显示*/
display: none;
}
#div3:hover #ul1{
display: block;
}
</style>
</head>
<body>
<a>演示hover</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>*************************************************************</div>
<div id="div3">
<span>内容</span>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
三、css常用属性
1.尺寸：
宽度 width：100px或者100%；
高度 height：100px或者100%；
2.边框
border-top: 2px solid red;
border-right: 5px dashed black;
border-bottom: 10px double violet;
border-left: 3px dotted green;
设置上下左右边框的样式不同，solid: 定义实线边框，dashed: 定义一个虚线边框，double: 定义两个边框。 两个边框的宽度和 border-width 的值相同，dotted: 定义一个点线边框
/*字体*/
/*颜色*/
color: orange;
/*字体大小*/
font-size: 20px;
/*字体加粗*/
font-weight: bold;
/*字体样式*/
font-family: "微软雅黑";
/*倾斜字体*/
font-style: italic;
/*文本居中*/
text-align: center;
/*行高：使文本垂直居中*/
line-height: 700px;
/*文字装饰线*/
text-decoration:overline;
/*背景*/
/*背景颜色*/
background-color: yellow;
/*背景图片*/
background-image:url(img/img1.jpg) ;
/*背景图片是否重复*/
background-repeat:repeat-y;
/*表格边框合并*/
border-spacing: 0px;
border-collapse: collapse;
/*转换成块状元素*/
display: block;
/*背景图片定位*/
background-position: center top;
background-position:-30px 200px；
/*背景图片放缩*/
background-size: 100% 100%;
/*去掉列表项目符号*/
ist-style: none;
/*设置列表的项目符号图片*/
list-style-image: url(img/resizeApi.png);
设置行内块状元素：兼具行内元素和块状元素的特点
display: inline-block;
四、盒子模型
注意：行内元素设置宽高无效，由内容大小确定。如span标签等。
1.外边距 margin
margin：50px； 上下左右各外边距都为50px；
单独设置：
margin-left: 15px;
margin-right:30px ;
margin-top: 50px;
margin-bottom: 20px;
2.内边距 padding
padding: 30px; 设置上下左右内边距都为30px；
单独设置：
padding-bottom: 30px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
3.盒子模型实际高度=(margin-top)+(border-top)+(padding-top)+height +(margin-bottom)+(border-bottom)+(padding-bottom)；
盒子模型实际宽度=(margin-left)+(border-left)+(padding-left)+width+(margin-right)+(border-right)+(padding-right)；
注意如果设置了box-sizing: border-box;，盒子宽度和高度就包含了border和padding，不再使用上面的公式计算高度和宽度。
盒子模型外边距合并情况1：
1.两个div嵌套
2.两个div都没有设置边框
这样会使margin值合并，以margin值大的为准
实例：
首先设置存在边框效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符选择器：设置默认样式*/
*{
margin: 0;
padding: 0;
}
/*id 选择器*/
#div1{
margin-top:50px;
width: 400px;
height: 400px;
background-color: orange;
border: 1px solid red;
}
#div2{
margin-top:20px;
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
效果图：
取消边框就会出现margin值合并，margin以大的为准：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符选择器：设置默认样式*/
*{
margin: 0;
padding: 0;
}
/*id 选择器*/
#div1{
margin-top:50px;
width: 400px;
height: 400px;
background-color: orange;
/* border: 1px solid red; */
}
#div2{
margin-top:20px;
width: 200px;
height: 200px;
background-color: pink;
/* border: 1px solid blue; */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
效果图：
当里面的div的margin-top大于外面的div时，没有边框，margin会以大的值为准。
解决这种问题的方法：
1.选择避免这种情况。
2.在父级div上添加padding-top=“xx px”；
盒子模型外边距合并情况2：
1.当两个div 垂直排列时，如果div1有 margin-bottom ，div2有margin-top，这时也会发生边距合并，并且以 较大的值为准。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符选择器：设置默认样式*/
*{
margin: 0;
padding: 0;
}
/*id 选择器*/
#div1{
width: 300px;
height: 300px;
background-color: green;
border: 1px solid red;
margin-bottom: 50px;
}
#div2{
/* margin-top:120px; */
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid blue;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
上面的div设置了margin-bottom为50px，下面的div设置了margin-top为30px，按理它们之间的间距应该为80px，但是发生了间距合并，以margin值大的为准，所以它们的间距为50px。
该问题无法解决，只能去避免，找准参照物就可以更好的实现效果。
浙公网安备 33010602011771号