python前端之css

CSS介绍

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css页面引入方法：

1.内联式通过标签的style属性，在标签上直接写样式。最开始的写法，不规范

<div style="color: red;font-size: 20px;font-family: '微软雅黑';line-height: 10">
		为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
	</div>

2、内嵌式：通过style标签，在网页上创建嵌入的样式表。一般用于首页，显示更好

<style type="text/css">
		div{
			color: red;
			font-size: 20px;
			font-family: '微软雅黑';
			line-height: default
		}
	</style>
</head>
<body>
	<div >
		为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
	</div>

3.外联式：通过link标签，链接到外部样式表到页面中。一般用于其他页面

单独的css文件
div{
	color: red;
	font-size: 30px;
	font-family: '微软雅黑';
	line-height: default
}

作为链接插入html文件中
<title>样式引入外链式</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" >
</head>

css文本设置和颜色设置

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';
line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

<head>
	<meta charset="UTF-8">
	<title>样式嵌入式</title>
	<style type="text/css">
		div{
			/*font-size文字大小 font-family文字字体 font-style字体倾斜*/
			/*font-weight文字加粗 text-indent文字首行缩进*/
			color: black;
			font-size: 20px;
			font-family: '微软雅黑';
			line-height: default;
			text-indent:40px;
		}
		em{
			font-style: normal;
		}
		span{
			font-weight: bolder;
		}
		h2{
			/*font-family: '微软雅黑';
			font-weight: normal;*/
			font:normal 30px/40px 'Microsoft Yahei';
			/*文本居中*/
			text-align: center;
			/*color: gold;*/
			/*color:rgb(255,0,0);*/
			/*color: #ff0000;*/
			color: #f00;
		}
		a{
			/*一般都让链接的下划线去掉*/
			text-decoration: none;
		}
	</style>
</head>
<body>

	<a href="http://www.baidu.com">百度网</a>

	<h2>样式应用之文本样式</h2>

	<div >
		为了让网页元素的样式更加丰富，也为了让网页的<em>内容和样式</em>能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
	</div>
	<div>
		为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 <span>Cascading Style Sheets</span> 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
	</div>
	
</body>

css选择器

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中，一般不用。

*{margin:0;padding:0}

2.id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

3.类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

<head>
	<meta charset="UTF-8">
	<title>css 选择器</title>
	<style type="text/css">
		<!-- div{}标签选择器 #div2{} id选择器  -->
		div{
			color: red;
		}
		#div2{
			color: green;

		}
		<!-- 类选择器.red{} 用的话class="" -->
		.red{
			color:red;
		}
		.bold{
			font-weight:bold;
		}
		.yehei{
			font-family:'Microsoft Yahei';
		}
	</style>
</head>
<body>
	<!-- 类选择器 -->
	<div class="red bold yehei">这是一个div</div>
	<!-- id选择器 -->
	<div id="div2">这是第二个div</div>
	<div class="red yehei">这是第三个div</div>
</body>

前端未完待续个人简历制作，下一个学习视频为html高级→009元素类型

css文本设置和颜色设置

css选择器

猜你喜欢