CSS学习汇总by SixInNight_css留by-CSDN博客

本文链接：https://blog.csdn.net/hongwangdb/article/details/94772507

CSS学习汇总

~~ 上一篇文章点击跳转 ~~ ： HTML学习第二天
~~ 下一篇文章点击跳转 ~~ ： Python玩具（一）

CSS的引入方式

内联：在标签内的style属性里添加，特点-只能在本标签内使用
内部：在head标签里添加style标签，在style标签里通过选择器添加样式，特点-只能在当前页面使用
外部：写单独的CSS文件，通过link标签引入页面，特点-可以多页面使用
HTML代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>起个名字呀</title>

	<!-- 引入css文件 -->
	<link rel="stylesheet" href="03.css">

	<style type="text/css">
		/* 选择器 */
		p{
			color: blue;
		}
	</style>
	</head>
	<body>

	<h4 style="color: red">内联test</h4>
	<p>内部test</p>
	<h5>外部test</h5>

	</body>
	</html>

CSS代码样例：

	@CHARSET "UTF-8";
	h5{
		color: green;
	}

效果预览：

在这里插入图片描述

CSS性质

父元素的CSS声明可以被子元素继承，在下图中，“文本1”可以继承“块1”的声明：

	<div>块1
		<p>文本1</p>
		<img src=" ">
	</div>

CSS规则叠加（继承时），如若发生冲突，以从高到低的优先级为准：内联——内部或外部（就近原则）——浏览器缺省设置

选择器

元素选择器：通过元素名来选择css作用的目标，如span、h3、p、div等
类选择器：独立于文档元素，指定附带class属性的元素，如

	/* CSS代码 */
	.c1 {color:red;}

	<!-- HTML代码 -->
	<h4 class="c1">四级标题<h4>
	<p>文本2</p>

id选择器：独立于文档元素，作用与id属性的元素，如

	/* CSS代码 */
	#d1 {color:red;}

	<!-- HTML代码 -->
	<div id="d1">块2
		<p>文本3</p>
	</div>

伪类选择器：设置同一个元素在不同状态下的样式，如 :link 、:visited 、:hover 、:active 、:focus 等

注：选择器可以灵活使用，互相组合，实现细分控制、多个控制、派生（后代选择器和子选择器控制）

小编曾写过的一个内部CSS

<style type="text/css">

		body{

				font: 12px "simhei", Arial, Helvetica, sans-serif;

    			color: #666;

    			margin: 0px;

    			background-color: #f5f5f5;

		}

		header{

				width: 1000px;

				margin: 0 auto;

				margin-top: 20px;

				margin-bottom: 30px;

				overflow: hidden;/* 解决高度为0的问题 */

		}

		header>img{

				float: left;

				margin-left: 40px;

		}

		header>h1{

				float: left;

				font-weight: normal;

				font-size: 24px;

				margin-left: 10px;

				margin-top:  8px;

				color: #4f4d4e;

		}

		#form_div{

				height: 560px;

				background-image:url("../imgs/02.JPG");

		}

		#form_div>div{

				width: 280px;

				height: 296px;

				margin: 122px 122px 0 0;

				background-color: rgba(0,0,0,0.3);

				float: right;

		}

		#form_div>div>div{

				float: left;

    			overflow: hidden;

    			width: 253px;

    			height: 277px;

    			position: relative;

		}

		div>h2{

				font-size: 18px;

				color: white;

				margin-left: 10px;

				margin-right: 10px;

   		 		border-bottom: 1px solid #f0f0f0;

		}

		h2 a,#auto_div a{

				text-decoration: none;

				list-style: none;

				float: right;

				color: white;

				font-size: 10px;

				margin-top: 5px;

    			border-bottom: none;

		}

		.duanggg{

				position: relative;

				margin-left: 10px;

				margin-right: 8px;

		}

		.duanggg>input{

				border: 1px solid #ddd;

    			padding: 10px 20px;

    			width: 215px;

    			margin-top: 16px;

				margin-bottom: 26px;

		}

		.duanggg>img{

				position: absolute;

				top: 20px;

				right: 20px;

		}

		.kuanggg{

				margin-bottom: 10px;

				margin-left: 15px;

				margin-right: 15px;

				margin-top: 4px;

    			color: white;

		}

		.kuanggg>input{

				position: relative;

    			top: 2px;

		}

		.kuanggg>span{

				float: right;

				color: white;

		}

		.button_login{

				background: #27b0f6;

				width: 260px;

    			color: white;
 
   				margin-left: 10px;

				text-align: center;

				line-height: 32px;

    			font-weight: bold;

    			border: none;

		}

		footer{

				width: 1250px;

				overflow: hidden;

				margin-top: 43px;

		}

		.huanggg{

				float: left;

				margin-left: 178px;

				margin-bottom: 70px;

				text-align: center;

				font-weight: inherit;

		}

	</style>