CSS基础知识

最新推荐文章于 2022-09-01 16:18:18 发布

Super戏子

最新推荐文章于 2022-09-01 16:18:18 发布

阅读量147

点赞数

分类专栏： Java基础篇

本文链接：https://blog.csdn.net/qq_41213748/article/details/79559556

版权

Java基础篇专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS简介：CSS(Cascading Style Sheets)：层叠样式表。用来给html网页设置样式。当多个选择器对同一个元素进行样式设置时，则该元素的样式为多个选择器的叠加效果(当有冲突时，按照优先级设置);

一：CSS的引入方式

方式一：行内样式(在html元素的style属性上设置样式)
例如：
<div style=“background- color:yellow”>
这是第一个CSS页面

</div>

方式二：页面内嵌样式
在head标签内部声明样式：
<style type="text/css">
// CSS样式表

</style>

方式三：引入外部样式文件

二：CSS选择器

1.标签选择器
标签名{
CSS属性名:属性值;
...

}

2.类选择器

.class类名称{
CSS属性名:属性值;
...

}

3.ID选择器
#ID名称{
CSS属性名:属性值;
...
}

优先级：ID选择器 > 类选择器 > 标签选择器

4.复合选择器
选择器1,选择器2,...{
CSS属性名:属性值;
...
}
5. 子选择器(选择父选择器的直接子元素)
父选择器 > 子选择器{
CSS属性名:属性值;
...

}

6. 后代选择器
祖先选择器后代选择器{
CSS属性名:属性值;
...
}
7. 伪类选择器(用来设置元素在不同状态下的样式)
E:hover 鼠标悬浮于元素之上的选择器
E:link 超链接未访问时状态选择器
E:active 激活状态时选择器

E:visited 访问之后的状态选择器

三：CSS盒子模型(Box模型)

border(边框)
padding(内边距,也叫填充)：元素中的内容与边框(border)之间的距离。
margin(外边距)：与相邻元素或父元素之间的距离。

content(内容)：盒子包含的内容(皇宫)。

四：CSS浮动(float)

浮动属性： float:left|right
设置了float属性的元素即为浮动元素，浮动元素脱离了正常的文档流(标准流), 不遵循“从左到右,从上到下，遇块换行”的标准文档流的排布方式。

可以清除浮动：clear:left|right|both

规律一：
如果某个元素是浮动元素，那么有两种情况：
这个浮动元素的上一个元素是标准流中的元素，则该浮动元素与上一个标准流元素的相对垂直位置不变。

这个浮动元素的上一个元素也是浮动元素，则这两个浮动元素在同一水平位置排列(除非两个浮动元素的宽度和超过水平位置总宽度，这种情况下该浮动元素会被“挤”到下一行)。

规律二：

设置了clear属性的元素，主动负责完成清除浮动(移动自身完成目标)。

练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    #div1{
	    	width:100px;
	    	height:100px;
	    	background-color: green;
	    	border:10px solid #8B4513;
	    	padding-top:50px;
	    	padding-right:50px;
	    	margin-bottom: 20px;
	    }

	    #div2{
	    	margin-top:20px;
	    }
	</style>
</head>
<body>
	<div id="div1">
	     农村娃眼中的世界...
	</div>
	<div id="div2">
	     外面的世界很精彩
	</div>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
	    #div1{
	    	width:30%;
	    	height:80px;
	    	background-color:#DDA0DD;
	    	float:left;
	    }
	    #div2{
	    	width:40%;
	    	height:80px;
	    	background-color:#CD853F;
	    	float:left;
	    	clear:left;
	    }
	    #div3{
	    	width:30%;
	    	height:100px;
	    	background-color:#2E8B57;
	    	float:left;
            clear:left;
	    }
	    #div4{
	    	width:50%;
	    	height:120px;
	    	background-color:#FA8072;
	    	float:right;
	    	clear:left;
	    }
	</style>
</head>
<body>
	<div id="div1">这是div1里面的内容</div>
	<div id="div2">这是div2里面的内容</div>
	<div id="div3">这是div3里面的内容</div>
	<div id="div4">这是div4里面的内容</div>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
	    div:hover{
	    	background-color:yellow; 
	    }
	    div:active{
	    	background-color:green;
	    }

	    a:hover{
	    	background-color:yellow; 
	    }
	    a:link{
	    	background-color:#FAEBD7;
	    	color:red; 
	    }
	    a:active{
	    	color:green;
	    }
	    a:visited{
	    	color:#8B4513;
	    }
	</style>
</head>
<body>
	<div>这是div里的内容</div>
	<a href="http://www.baidu.com" target="_blank">百度</a>
	<a href="http://www.sogou.com" target="_blank">搜狗</a>
	<a href="http://www.360.com" target="_blank">360</a>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        h1,#div1{
            background-color:yellow; 
        }

        div > strong{
        	background-color:green; 
        }
	</style>
</head>
<body>
    <h1>复合选择器可以选择多个选择器</h1>
	<div id="div1">这是<strong>div1</strong>的文本内容</div>
    <div>
         我喜欢学习<strong>html</strong>,我喜欢学习<strong>CSS</strong>,我喜欢学习
         <em><strong>JavaScript</strong></em>.
    </div>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css">
        #div1{
        	color:#D2691E;
        }

        #div2{
        	background-color:#F0F8FF;
        }

	    .mydiv{
	    	color:blue;
	    	background-color:yellow;
	    }
	    div{
	    	width: 100px;
	    	height:100px;
	    	font-size: 20px;
	    	font-weight: bold;
	    	font-style: italic;
	    	color:red;
	    	background-color: #FAEBD7;
	    }

	</style>
</head>
<body>
	<div class="mydiv" id="div1">这是div里面的文本</div>
	<div class="mydiv" id="div2">这是另一个div文本</div>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>大宋招聘</title>
	<style type="text/css">
        body{
        	width:50%;
        	height:500px;
        	border:1px solid red;
        	margin:10px auto;
        }

	    #top{
            height:20%;
            background-color: #6A5ACD;
	    }

	    #sidebar{
	    	width:30%;
	    	height:60%;
	    	background-color: #F4A460;
	    	float:left;
	    }

	    #main{
            width:70%;
	    	height:60%;
	    	background-color:#87CEEB;
	    	float:left;
	    }

	    #footer{
	    	height:20%;
	    	background-color:#6B8E23;
	    	clear:left;
	    }
	</style>
</head>
<body>
	<div id="top"></div>
	<div id="sidebar"></div>
	<div id="main"></div>
	<div id="footer"></div>
</body>
</html>

运行结果图：