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>