8.13 Python Web前端 Css学习

最新推荐文章于 2022-11-10 12:23:12 发布

邓皓哲

最新推荐文章于 2022-11-10 12:23:12 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/weixin_42462718/article/details/99476357

版权

一、Css简介

1.什么是Css

Css是重叠（层叠）样式表，主要负责标签的美化，美化页面。

Css是单独的一种文件类型，后缀名为.css，也可以写在html文件里面。

一个网页分为三大部分：

结构层：主要由HTML负责页面的结构

表现层：主要由Css负责页面的展示样式，美化页面

行为层：主要由js负责页面和用户的交互效果

2.Css的三种引入方式

行间样式：给标签添加style属性，值就是你要设置的css样式。

嵌入样式：将css代码写在head标签内的style标签内。

外链样式：在head标签内通过link标签的href属性引入外部的css文件。

<head>
	<meta charset="UTF-8">
	<title>Css使用</title>
	<style>
		div
		{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="./css/democss.css">
</head>
<body>
	<div style="width: 100px;height: 100px;background-color:gold"></div>
	 <div></div><!-- 这个div配合head里的style里的div使用 -->
	<div></div><!--这个div配合link中的css文件使用-->
</body>

3.Css选择器

标签选择器：通过标签名来查找元素

选择符：标签名

影响范围最大，一般很少单独使用

id选择器：通过标签的id属性的值来获取元素

选择符：#

id值不能重复，一个id值在一个html文件中只能出现一次，否则js相关代码会报错

影响范围最小

class选择器·：通过元的class属性的值来获取元素

选择符：.

一个标签的class属性可以有多个值，可以被多个标签使用，影响范围在id选择器和标签选择器之间

<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	
	 <style type="text/css"> 
/*		标签选择器
			通过标签名来选择标签，影响最大，很少单独使用
*/		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		/*id选择器
			通过标签id选择标签，选择符#
			id值不能重复，一个id在一个html文件中只能出现一次*/
		#d3{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		/*class选择器*/
		.d{
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		.d1{
			
		}
		.d2{
			border: 3px solid red;
		}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div id="d3">3</div>
	<div class="d">d</div>
	<div class="d d1">d1</div>
	<div class="d d2">d2</div>
	<div class="d d3">d3</div>
</body>

4.引入方式的优先级

优先级
行间样式>外链式>嵌入式
谁离标签近优先选择

5.三种基本选择器的优先级

标签选择器<类选择器<id选择器

谁的影响范围大谁的优先级就小

6.关系选择器

后代选择器：

选择符：空格

选择指定标签内的所有符合要求的标签，忽略层级关系

子元素选择器：

选择符：>

只获取指定元素的直接子元素

并集选择器（组选择器/并列选择器）：

选择符： ,

一次性给多个元素设置相同的值

伪类选择器：：hover

当鼠标移入指定元素时，修改当前元素的样式

伪元素选择器：

After 在指定元素内部的后面插入指定的内容

Before 在指定元素的内部前面插入指定的内容

以上两个选择器要配合content使用

<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
		/*后代选择器
		设置.wrap里的所有p元素*/
		.wrap p{
			color: red;
		}
		/*子选择器
			设置.wrap里的inner里的p*/
		.wrap>p{
			color: blue;
		}
		/*并集选择器
			设置wrap里的span和外层的span*/
		.wrap>span,span{
			color: pink;
		}
		/*伪类选择器 hover
			当鼠标移入指定元素时，修改当前元素的样式*/
		/*伪元素选择器 before after
			以上需要配合content使用*/
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.box:hover{
			width: 200px;
			height: 200px;
			background-color: pink;
			color: green;
		}
		.box:before{
			content: '你';
		}
		.box:after{
			content: '！';
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="inner">
			<p>inner里的p</p>
		</div>
		<p>wrap里的p</p>
		<span>wrap里的span</span>
	</div>
	<p>最外面的p</p>
	<span>外层的span</span>
	<div class="box">过来啊</div>
</body>

二、Css常用属性

1.颜色

直接使用单词表示

六位十六进制表示，两个一组

十进制表示，rgb()

带透明度的颜色表示,rgba()

<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			/*background-color: red;*/
			/*background-color: #ff0000;*/
			/*background-color: #0f0;*/
			/*background-color: #00f;*/
			/*background-color: rgb(255,0,0);*/
			background-color: rgba(255,0,0,0.8);
			/*带透明度*/
		}
	</style>

2.背景属性

background-color 背景颜色

background-image 背景图片

background-position 图片位置

background-repeat 是否重复

<style>
		.box{
			width: 400px;
			height: 400px;
			border:1px solid red;
			background-image: url(../img/0.jpg);
			background-repeat: no-repeat;
			background-position: 90px 90px;
		}
	 	.item{
	 		width: 50px;
	 		height: 50px;
	 		border: 1px solid red;
	 		background:url(../img/1.jpg) no-repeat -4px -104px;
	 	}
	 	.item:hover{
			background-position: -345px -270px; 
	 	}
	</style>

3.字体属性

font-size 字体大小

font-weight 字体粗细 bold/800

font-family 字体类型

font-style

normal不倾斜

italic倾斜

color字体颜色

<head>
	<meta charset="UTF-8">
	<title>字体</title>
	<style type="text/css">
		.box{
			font-size: 50px;
			font-weight: bold;/*加粗或800*/
			font-family: 楷体，宋体;
			/*如果第一个字体没有，那么使用第二个字体*/
			/*字体必须用户拥有，如果没有则会显示默认字体样式*/
			font-style:italic;
		}
		em{
			font-style: normal;
		}
		.item1{
			width:200px;
			height:200px;
			border: 1px solid red;
			border-top: 1px solid red;
			border-bottom: 3px solid pink;
			border-right: 3px solid #0f0
			border-left:3px solid blue;
		}
	</style>
</head>
<body>
	<div class="box">大海,全是水</div>
	<em>斜体</em>
	<div class="item1"></div>
</body>

4.边框属性、内间距、外间距

边框属性：

border-top 边框顶部

border-bottom 边框底部

border-left 边框左部

border-right 边框右部

边框样式 solid实线 dotted点状线 dashed虚线

内间距：设置元素边界距离内部内容的距离，会改变元素的实际大小

padding-top

padding-bottom

padding-left

padding-right

外间距：设置元素距离四周元素之间的距离

margin和padding使用方式一样

<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: red; 
			/*padding-top: 20px;
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;*/
			/*padding: 10px 20px 30px 40px;/*上右下左*/
			/*padding: 10px 20px 30px;/*第一个值是上，第二个是左右，第三个是下*/
			/*padding: 10px 20px;/*第一个值是上下，第二个值是左右*/
		}
		.item1,.item2,.item3{
			width: 100px;
			height:100px;
		}
		.item1{
			border:1px solid red;
			margin-top: 20px;
			margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.item2{
			border: 1px solid yellow;
		}
		.item3{
			border: 1px solid blue;
			margin:0 auto;
		}
		.item4,.item5{
			width: 100px;
			height: 100px;
			border: 5px solid green;
		}
		.item5{
			margin-top: -5px;
			/*margin为负值主要用于边框合并*/
		}
	</style>

7.盒子模型

使用现实中的盒子来描述页面中的元素的属性

盒子的实际宽度=width+左border+右border+左padding+右padding

盒子的实际高度=height+上border+下border+上padding+下padding

Box-sizing:border-box 让盒子大小=css样式的实际大小

<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">
		*{margin=0;padding:0;}
		.box1{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		.box2{
			width: 100px;
			height: 100px;
			background: yellow;
			border: 20px solid #000;
			/*让盒子的实际大小=css设置的实际大小*/
			box-sizing: border-box;
		}
		.box3{
			width: 100px;
			height: 100px;
			background: yellow;
			border:20px solid #000;
			padding: 20px;
			box-sizing: border-box;
		}
		.box4{
			width: 20px;
			height: 20px;
			background: yellow;
			border:20px solid #000;
			padding: 20px
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
	<div class="box4">4</div>
</body>

邓皓哲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
8.13 Python Web前端 Css学习

一、Css简介1.什么是CssCss是重叠（层叠）样式表，主要负责标签的美化，美化页面。Css是单独的一种文件类型，后缀名为.css，也可以写在html文件里面。一个网页分为三大部分：结构层：主要由HTML负责页面的结构表现层：主要由Css负责页面的展示样式，美化页面行为层：主要由js负责页面和用户的交互效果2.Css的三种引入方式行间样式：给标签添加style...
复制链接

扫一扫