CSS学习需要 参考 CSS参考手册
一、CSS与HTML
（一）使用html标签的一个属性 style
<div style="background-color:red;color:green;">这是CSS与HTML结合方式</div>
（二）使用html的一个标签 <style>，写在head里面
<head> <style type="text/css"> div { background-color:blue; color: red; } </style> </head> <body> <div>这是CSS与HTML结合方式<div> </body>
（三）在style标签里面 使用语句@import url(css文件的路径); 引入CSS样式（在某些浏览器下不起作用）
2. 在页面中的style标签中引用进CSSdiv { background-color:blue; color: red; }
<head> <style type="text/css"> @import url(css文件的路径); </style> </head> <body> <div >这是CSS与HTML结合</div> </body>
（四）使用头标签 link，引入外部css文件
2. 页面中引入外部CSS （link标签写在head标签里面）div { background-color:blue; color: red; }
<head> <link rel="stylesheet" type="text/css" href="css文件的路径" /> <!-引入CSS样式-> </body>
四种结合方式的优先级（一般情况）
1.由上到下，由外到内。优先级由低到高。
2.后加载的优先级高
二、CSS基本选择器
(一)标签选择器
div{
background-color:orange;
color: red;
}
<div >这是CSS 基本选择器</div>(二)class选择器
div(可以省略).csdn{ background-color: orange; color:red; } <div class ="csdn">这是CSS基本选择器</div>
(三) id选择器
div（可以省略）#csdn { background-color: orange; color : red; } <div id ="csdn">这是CSS基本选择器</div>
三、CSS扩展选择器
(一)关联选择器
设置嵌套标签里面的样式
div p {
background-color: green;
}
<div><p>这是CSS扩展选择器</p></div>（二）组合选择器
把不同的标签设置成相同的样式
<div>1111</div>
<p>22222</p>
div,p {
background-color: orange;
}（三）伪元素选择器（兼容性差）
css里面提供了一些定义好的样式，可以拿过来使用，可在CSS 参考手册中的 文档伪类和伪对象中查找
其中的一个应用： 超链接的四个状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
a:visited{
background-color:grey;
}
<a href=" ">XXX</a>四、盒子模型（封装）
指将数据封装起来，如DIV +CSS 、Table+CSS 等 ，（以下边框以DIV边框为例）
1. 边框 （查文档-----边框）
border: border-width（边框宽度） || border-style（边框样式） || border-color（边框颜色）
分上下左右边框
上 border-top 下 border-bottom 左 border-left 右 border-right
2. 内边距 （查文档------补白）
基本 用法 ： padding : length;
分上下左右边距离DIV边框的距离
padding-top: padding-bottom padding-left padding-right
3. 外边距 （查文档-----边界）
margin: auto | length;
分DIV边框上下左右边距离网页边的距离
margin-top: margin-bottom margin-left margin-right
无
<style type=""text/css>
div{
width:200px;
height:100px;
border: 2px solid blue; //全部边框宽度2px，实线，蓝色
padding :20px //全部内边距为20px
}
#D2{
border-right: 2px dashed green; //D2的边框宽度2px，虚线，绿色
margin-bottom:20px //D2的外边距是20px
}
</style>
<div id="D1">CCCCCCCCC</div>
<div id="D2">SSSSSSSSS</div>五、CSS的漂浮（DIV 的移动）
float（查文档-----布局----float)：
属性值
-left : 文本流向对象的右边 （被修饰的DIV先居左，后面的div跑到它的右边，然后后面补齐）
-right : 文本流向对象的左边
六、css的布局的定位
position（查文档-----定位----position)：
** 属性值
- absolute ：(绝对定位)
将对象从文档流中拖出，后面的补齐，它会在空中飘着，效果是覆盖在了后面的div上
可以是top、bottom等属性进行定位
- relative ：（相对定位）
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
直接定位使它定位，但是后面的div不会漂移（补齐）
七、案例：（注意：如果复制案例代码，需将代码中的注释去掉，HTML不承认“//”这种注释）
图文混排布局 ( 类似WORD中 图片和文字的环绕效果 )
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#imgtex11 {
width: 400px;
height: 300px;
border:2px dashed orange;
}
#img11 {
float:right; //使得文字漂浮到图片左边
}
#tex11 {
color: green;
}
</style>
</head>
<body>
<div id="imgtex11">
<div id="img11"><img src="aa.jpg" width="250" height="200"/></div>
<div id="tex11">庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。
予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。
至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。
？ </div>
</div>
</body>
</html>
图象签名（文字在图片上面）
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#tex21 {
position: absolute; // 文字模块采用相对定位，是图片模块上浮，文字模块悬浮于图片上方
top: 50px;
left: 30px;
color: red;
}
</style>
</head>
<body>
<div id="img21"><img src="aa.jpg" width="450" height="350"/></div>
<div id="tex21">这是一个岳阳楼，我去昆明上学的时候路过南昌看到过</div>
</body>
</html>
1942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
