css学习使用速查

最新推荐文章于 2024-09-15 21:53:51 发布

freetoshare

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量147

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_28635317/article/details/106162228

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

知识点:
	一  div  span  ul ol li标记
	二  css 概述
	三 css 的调用方式
	四 css的选择器
	五 css当中的具体的样式
	
一  div  span  ul ol li标记
	常用的 web2.0思想当中的标记。
		1. div 
			注意：div 独占一行的。
		2.span 
		3.ul ol li 一组
			ul  无序列表
			<ul type="square正方形 circle圆圈 disc 实心点">
				<li>今天天气不错</li>
				<li>明天也不错</li>
				<li>后天仍然不错</li>
				<li>aaaaa</li>
			</ul>
			<ol> 有序列表
					<ol type="1   a    i">
						<li>今天天气不错</li>
						<li>明天也不错</li>
						<li>后天仍然不错</li>
						<li>aaaaa</li>
					</ol>
				
二  css 概述  
	1>什么是css
		css 层叠样式表 ,替代属性，不用写在标记中
			  实现 表现与结构分离  ,便于管理。是页面代码整洁。	
	2> web2.0
		 table 架构页面
		 web2.0  div+css 架构页面 **** 
		 html5 css3  web2.0思想的基础上 添加了一些内容 		
			
三 css 的调用方式 
	 1》 css的格式:
	 	{样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;................................}
	  2》html 页面中如何调用css       表现和结构分离
	  		A 标记上直接使用style属性来调用样式
				<标记 style="样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;......">
			B html页面中内嵌样式
					</head>
					<style type="text/css">
						样式列表
					</style>
					<body>
			C 外部调用样式:  *********
				index.html--->index.css 样式文件
			  <link href="index.css" rel="stylesheet" type="text/css" />
			  </head>
			
四 css的选择器	:在页面中找到元素的。
	1 使用选择器的格式:
		选择器{样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;........}
	2 css中的6中选择器
		1》 通配选择器  选择页面上的所有元素
			  *{     }
		2》 标记选择器
			 标记名称{   }
		3> class 选择器  选中具有相同class 属性的元素
				.className{   }
		4> id选择器
				#id{  }
		5> 群组选择器:
			#id,.className,标记名称.....{   }
		6>派生选择器:
			 父选择器 子选择器
				
五 css当中的具体的样式
	1> border  width  height 
		border: 粗细  solid实线   颜色。  元素边框的。
		width  : 像素值
		height : 像素值
	2>布局属性   元素的边距属性
		 padding:  上 右  下 左  ; 内边距:  注意：padding 会改变元素的 宽度和高度。
		 padding-top:	 像素
		 padding-right:像素
		 padding-bottom:像素
		 padding-left:像素
		 注意：
		 	padding:val; 一个值 表示 上 右 下 左 都是50 以上左为准
			
		 margin: 上 右  下 左  外边距  注意：margin 不会改变 外边元素的大小的。
		 margin-top:	 像素
		 margin-right:像素
		 margin-bottom:像素
		 margin-left:像素
		 margin:50px;  一个值 表示 上 右 下 左 都是50   以上左为准
		 margin:auto;  水平居中*****
		 
		 float: left  right  浮动元素。独占一行的特性消除掉。
		 clear: both;   消除前后元素浮动所带来的影响的。
		 display: none | block; 控制 显示 隐藏元素的。
		 
	3>背景属性:
		 background-color:背景色		 
		background-image:url(../imgs/2.jpg); 背景图: 
		  如果背景图的宽 高 < 元素的宽 高  背景图 横向和纵向平铺。
		background-repeat:  no-repeat  repeat-x repeat-y 是否平铺，平铺方式
		background-position: x(正右  负左)   y（正下 负上） ；调整背景图位置
		background:  color  image repeat  附着方式 position; 总的样式
		
	4》字体属性
		font-size:  像素值 ；设置字体大小的
		color: 颜色
		font-style: normal | italic 斜体  文本样式
		font-weight: 100---900  bold  加粗
		font-family:"隶书"; 文本书法体
		text-align: left  center right  水平位置
		line-height:  行高
		
		font: style  weight size line-height family：总的样式
		
	5》 边框属性:
		 border:1px solid #ff0000;
		 border-top: 粗细 线体  颜色
		 border-right: 粗细 线体  颜色
		 border-bottom: 粗细 线体  颜色
		 border-left: 粗细 线体  颜色
	6》 列表
			list-style:none;去除列表前面的标示
			list-style-image:url(../imgs/flag1.jpg); 列表中的 标示  可以是图片。
	7》其他常用样式:
			text-decoration: 文本的修饰线   line-through   underline;
			 鼠标的四种状态:  超链接样式一般使用的是伪类    就是   :样式名称
				刷新状态  				:link {} --> 不支持    a #id .className { 样式}
				鼠标移动上去			:hover{}
				鼠标单击					:active{}
				点击过后的状态 		:visited{}

一  补充样式
	鼠标样式   cursor: 	 pointer  wait  text ;  鼠标移动上去的形状
	以下两个样式都是控制元素透明度的。
	filter:alpha(opacity=value); 元素的透明度  value  0---100  针对浏览器ie6,7,8
	opacity:value value(0--1);  针对浏览器ff google ie9+
	position: relative相对 absolute绝对;    给元素定位的
		left:
	        top:
	1> position  : relative 相对 与默认位置移动了。（left top）
	2》position：absolute 
			默认情况下 position:absolute;  元素是相对于 body 定位的。
			如果  父元素  有 position: relative/absolute  ,子元素的定位 都是相对于 父元素来的。
	注意：position 是用来定义哪些 跨界 的元素。