css的理解和使用

最新推荐文章于 2023-06-04 10:30:00 发布

杨-Yuki

最新推荐文章于 2023-06-04 10:30:00 发布

阅读量156

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Orange_Sheep/article/details/103018191

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是CSS
CSS 层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

二、CSS的使用
1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：

注意：所有的样式都必须在双引号之内并且中间用分号进行分隔

2.内部样式
	将样式声明定义在页面的Style属性中
	步骤：
		1.在head标签里面添加一个style标签
		2.在style中书写样式
	语法：
		<style type="text/css">
		p{
			/*字体的颜色*/
			color: green;
			/*字体的大小*/
			font-size: 80px;
			/*文字的字体样式*/
			font-family: "华文彩云";
			
		}
	</style>
	
3.外部样式表
	步骤：创建一个新的CSS文件
	      创建和HTML文件的关联
		  书写样式
<link href="css/style01.css" type="text/css" rel="stylesheet"/>

三、CSS样式表的特征
继承性
1、子级元素可以直接使用父级元素声明好的样式（这里不是所有的样式都可以被继承）

层叠性
	一个匀速可以声明多个样式
	注意：如果样式不冲突，多个样式规则中的样式可以层叠为一个。

优先级
	样式定义产生冲突时按照不同的样式使用“优先级”来应用样式
	在们三种引入方式中谁的优先级最高（行内样式表）
	低：浏览器缺省值
	中：外部样式表或者内部样式表
	高：内部样式表
	
！improtant
作用：显示调整样式的优先级
语法：属性名称： 值！improtant
      注意： IE浏览器 8 以下 不支持的
				破坏了优先级规则

四、CSS基础选择器
1.通用选择器
作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用

	2.标签选择器
		作用：定义页面的某一个标签的默认样式
		语法：	标签名{样式1；样式2}
		
	3.类选择器
		作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
		语法：	1.在标签中添加 class属性 并且给他一个名字
				2.在style中 用.类名{}方式进行样式编写
		注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用
		
	4.ID选择器
		作用：针对指定id值得元素去定义样式
		语法： 1.在元素中定义id属性
			   2.在style中用#id名进行样式编写
		注意：	id是唯一的
				一定要对应页面某个元素的id值
				class里面可以同时存在多个类名但是id不能存在多个id名
	优先级  ID  >  类  > 标签 > *
	
	5.群组选择器
		作用：选择器声明 以 ， 隔开的选择器列表
		语法：	
				选择器1，选择器2，。。。。{样式1,；样式2}
		ps：不同的选择器都可以被选中（都可以连着用）
		
	6.后代选择器
		后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
		语法：	
				#div1 span{}
		注意：中间用空格隔开，并且他们只能是父子级的关系
		
	7.子代选择器
		子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
		语法 ： #div2 > span{}
		
	8.伪类选择器
		1.hover
	9. 选择器的优先级
		选择器的类型        权值
		元素选择器          0,0,0,1
		类选择器            0,0,1,0
		伪类选择器          0,0,1,0
		id选择器            0,1,0,0
		内联样式            1,0,0,0
	注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先

五、尺寸属性
作用：用户设置元素的宽度和高度单位为 px（像素）和百分比%
宽度属性：
width：设置元素的宽度
min-width：设置最小的宽度
max-width：设置最大的宽度
高度属性：
height：设置元素的高度
min-height：设置元素最小的高度
max-height：设置元素的最大的高度
允许被改变高度和宽度的元素
1.块级元素时可以设置宽高的
2.大部分行内块元素时可以设置宽高的
input 单选多选框
3.存在width和height属性是可以设置宽高的
img table
溢出
使用尺寸属性限制元素的大小时，如果内容所需要的空间大小大于
元素本身，会导致溢出的效果
语法：overflow:
overflow-x: 处理横向溢出
overflow-y: 处理纵向溢出
/*溢出处理
visible 默认效果溢出可见
hidden 溢出隐藏
scroll 滚动，元素会出现滚动条当内容溢出的时候，滚动条可用
auto 自动（自适应）内容溢出的时候会出现滚动条没有溢出的时候是不出现的
* */

	边框阴影
		属性   box-shadow
		 h-shadow  必须填的  阴影的水平偏移距离  正数的 右边  负数 左偏移
		 v-shadow  必须天的  垂直的偏移距离 + 下  - 上
		 blur       模糊距离  必须是正数
	     color       颜色
		 spread     阴影的大小
		 inset值       将默认的外阴影变成内阴影
		
	轮廓
			 作用： 绘制元素周围的一条线，位于边框外的
			 语法：
			 outline-width：*/
			 /*outline-width: 10px;
			 outline-style: solid;
			 outline-color: yellow;
			 outline: none;*/
			outline: 1px solid red;
			
	背景属性
		1.背景颜色
			background-color: #000000 英文单词 transparent（透明色）
			注意：背景颜色会填充到元素的内容区域、内边距区域 和 边框区域
		/*背景颜色*/
			background-color: red;
			/*背景图片
			 默认的效果平铺
			 * */
			background-image: url(img/day04.jpg);
			/*修改平铺
			 	repeat:默认的平铺
			 	repeat-x ：水平平铺
			 	repeat-y：垂直平铺
			 	no-repeat：不平铺
			 	* */
			background-repeat:repeat;
			/*背景图片的尺寸
			 	cover :覆盖  撑满整个元素
			 	contain：将背景图片放大 直到背景图像的下边或者右边有一个边缘碰到我们的元素为止
			 	value1 value2 单位是px
			 	value% value% 采用当前元素的宽度和高度的百分比进行缩放
			 * * */
			background-size: 50% 50%;
			/*背景图片的固定
			 	fixed: 背景固定
			 * */
			background-attachment: scroll;

六、盒子模型
1.元素的分类
1、块级元素：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给
高度随着内容的增长而增长
2、行内元素：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高
3、行内块元素：结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素：
none 不显示

	2.外边距  内边距  边框  内容
		W3C标准的盒子模型中 元素在网页中所占的位置的实际宽度

	<style type="text/css">
		/*通用选择器*/
		/**{
			font-family: 华文行楷;
			font-size: 30px;
		}*/
		/*类选择器*/
		/*.div1{
			background-color: aquamarine;
		}*/
		/*id选择器*/
		/*#span1{
			background-color: aqua;
		}*/
		/*.big,#p1{
			font-size: 10px;
		}*/
		
		/*.big span{
			font-size: 30px;
		}*/
	/*.div2,#p1,#p2{
			font-size: 80px;
			color: pink;
		}
	.div2 #p1{
		font-size: 100px;
		color: red;
	}*/
	/*#p1>#p2{
		font-size: 50px;
		color: royalblue;
	}*/
	/*.bigbox{
		border: dotted aquamarine;
		width: 150px;
		height: 150px;
		background-color: pink;
		overflow: visible;溢出可见
		overflow: hidden;溢出隐藏
		overflow: scroll;滚动
		overflow: auto;自动
	}*/
	/*.bigbox2{
		width: 200px;
		height: 200px;
		background-color: pink;
		box-shadow: 20px 20px 10px orchid;
	}*/
	.bigbox3{
		width: 1000px;
		height: 1000px;
		background-image: url(img/timg.jpg);
		background-repeat: repeat-x;
		background-size: cover;
		background-attachment: fixed;
	}
	
	</style>
	<!--<link rel="stylesheet" type="text/css" href="css/new_file.css"/>-->
</head>
<body>
	<!--<p style="background-color: pink;">
		九锥盛世
	</p>
	<div class="div1">
		<p>哈哈哈哈</p>
	</div>
	<div id="span1">
		<span>茶蛋大发</span>
	</div>
	
	
	<div class="div2">
		银河
	  <div id="p1">
	 	地球
	    <div id="p2">
		  太阳
	    </div>
	 </div>
	</div>
	
	<div class="bigbox">
		hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈
		hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈
		hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈
	</div>
	<div class="bigbox2"></div>-->
	
	<div class="bigbox3">
		
	</div>
</body>