学习CSS基础

最新推荐文章于 2026-01-02 15:07:53 发布
最新推荐文章于 2026-01-02 15:07:53 发布 · 123 阅读
文章标签：
#CSS #浏览器 #搜索引擎 #音乐 #XHTML
CSS 专栏收录该内容
11 篇文章
订阅专栏
/*
    flaot，默认为none，如果将flaot的属性设为left或right，元素就会向其父元素的左侧或右侧靠紧，
    同时，默认情况下，盒子的宽度不再伸展，而是根据盒子里的内容的宽度确定。
*/
body{
margin:15px;
font-family:Arial;font-size:12px;
}
.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;

}
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear:left;
}
.son1{
float:left;

/*这样设置了son1后，box-2的左边框和box-1的左边框重合，
    因为box-1已经脱离标准流，标准流中的box-2会顶到原来box-1的位置
    而文字会围绕着box-1排列
*/
}
.son2{
float:left;
}
/*
当窗口边窄时，在HTML中写在后面的也就是box-3会第一个被挤到下一行去。
当挤到下一行，并向左移动，如果遇到了一个拐角就会被卡住。
*/
.son3{
float:right;}
/*
    经验之谈：
            在写html时，通过CSS来确定内容的显示位置，而在html中确定内容的逻辑位置，
            也就是重要的内容放在前面，相对次要的内容放在后面
        好处：1.访问页面的时候，重要内容先显示出来，
              2.搜索引擎是不管CSS的，它只根据网页内容的价值来确定页面的排名，而对于一个HTML
                    文档，越靠前的内容，搜索引擎会赋予越重的权重，
                    对网站的排名有影响。
*/


/*到此，float的性质学完，接下来学习clear属性
    作用：如果在排版中实现了某个盒子的浮动，但使它后面的标准流中的盒子不受它的影响。
            使用了它，就是为了消除浮动的盒子对其他盒子的影响。
    使用：clear属性有right，left ，both（这里的左右指的是文字段落的左和右）
            对clear属性的设置要放在文字所在的盒子里
    clear设为左边，那么文字段落自己移动，知道文字段落的左边不再受float的影响，就可以了。
*/
/*扩展盒子的高度
    铭记：一个div的范围是由它里面的标准内容决定的，与里面的浮动内容无关。
    现实中，往往需要用父div的范围包含浮动的子div，怎么办：
            1.在浮动的子div后面在增加一个div（这里类名为clear），然后这个div的样式，并覆盖原来对 margin padding
            border的设置。
            .father .clear{
            margin:0;
            padding:0;
            border:0;
            clear:both;
            }

*/
<!--
	position(狭义的定位)
	属性：
		static：这是默认的属性值，也就是该盒子按照标准流进行布局。
		relative：1、常以标准流的排版方式为基础。
				2、相对定位的盒子仍在标准流中，它后面的盒子仍然以标准流的方式对待它。
				3、它对父亲和兄弟盒子都没有影响。依然“认为”它在原来的位置上（其实不在）
				
		absolute:1、盒子的位置以它的包含框（最近的一个“已经定位”的“祖先元素”）为基准进行偏移，
						“已经定位”的含义是，position的属性被设置，并且被设置为不是static的任意一种方式
						
					2、如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
					3、绝对定位的盒子从标准流中脱离。
				4、其他的盒子就好像这个盒子不存在一样。
		fixed:和绝对定位类似，只是以浏览器窗口位基准进行定位。
			也就是当拖动浏览器的窗口的滚动条时，依然保持对象的位置不变。

-->
<!--
	position之绝对定位之特殊性质：
		1、用于需要使某个元素脱离标准流，而仍然希望它能保持在原来的位置的情况。
		2、如果设置了绝对定位，而没有设置偏移属性，那么它将保持原来的位置。


-->
<!--

  z-index用于调整定位时重叠块的上下位置，z-index大 的页面位于其值小的上方，
  

-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float 属性</title>
<link href="CSS_third_浮动.css" rel="stylesheet" type="text/css"
</head>

<body>
<div class="father">
	<div class="son1">box-1</div>
	<div class="son2">box-2</div>
	<div class="son3">box-3<br />box-3<br />box-3<br /></div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
</div>
</body>
</html>



/*CSS学习_CSS中复合选择器
	交集选择器
		标记.类别选择器或者标记.ID选择器
			这种选择器将选中同时满足前后两者定义的元素
			*/
p{
	color:blue;
	}
p.special{
		color:red;
		}
.special{
	color:green;
		}
/*" 并集"选择器
	并集选择器是多个选择器通过"逗号"连接而成
		用于：如果某些选择器的风格是完全相同的，或者部分相同。
		*/
/*后代选择器
	作用：对特殊位置的HTML标签进行声明，例如当<p>内嵌<span>就可以使用后代选择器进行相应的控制
		写法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔
			不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套，可以多层嵌套
				后代选择器产生的影响不仅仅限于元素的直接后代，而且会影响他的各级后代
					
				*/
p span{              /*这个p里面的span只对html中所有内嵌在p中span进行声明*/
	color;red;
}
span{
	color:blue
}
/* 子选择器，
		区别：就是只对直接后代有影响的选择器，
			写法：使用大于号连接
				仅IE6不支持子选择器
					*/
p>span{
	color:blue;
}



/*
1.两列布局-郊野
2.三列布局-像素画
3.三列布局变体-百合池塘
4.多列布局-郁金香
5.包含圆角的设计-日与夜
6.包含倾斜角的设计
7.装饰性设计
8.流体设计
9.建筑主题的设计，
10.特声效果-音乐盒，剧院效果
11.特色效果-海底世界，博物馆，杀手风格


*/

/*css 的全称为：
	"DOCTYPE"(文档类型)说明，它是告诉浏览器，使用哪种规范来解释这个文档中的代码
		规范指建议使用XTHML 1.0transitional 
			在XHTML中应该区分“内容标记”与“结构标记” <p> 是内容标记<td>是结构标记
				

/*CSS禅意花园（zen garden）	
	创建者：加拿大设计师：Dave Shea 
		*/
		
/*外部CSS文件的导入
	方式1：导入式__
	*/
	<style type="text/css">
		@import "mystyle.css";
		</style>
	/*
	方式2：链接式__
		*/
	<link href="mystyle.css"  rel="stylesheet"  type="text/css" />
	/*
	css的全名为“层叠样式表”，
		层叠可以简单的理解为“冲突”的解决方案，
		
		*/
	<style type ="text/css">
	p{color:green;}
	.red{color:red;}
			/*
				当同时使用red类别样式和标记选择器，这就产生了冲突:
					是按照标记选择器定义的绿色显示，还是按照类别选择器定义的红色显示？
					解决：  1.类别选择器的优先权高于标记选择器，
							2.ID选择器的优先级高于类别选择器
							3.行内样式的优先级高于ID样式的优先级
							4.两个类别选择器的优先级相同，此时已前者为准。class="purple red"
					规律：越特殊的样式，优先级越高！
				*/