JavaWeb自学之css学习笔记
2015-12-18 22:29
721 查看
1、css简介 [code] *css 层叠样式表 **层叠:一层一层的 **样式表: 很多的属性和属性值 *使页面显示效果更加好 *css将网页内容和显示样式进行分离,提高了显示功能 2、css和html的结合方式(四种结合方式) (1)在每个html标签上面都有一个属性style,把css和html结合在一起 <div style="background-color:red;color:green">今天天气很不错</div> 属性和属性之间用分号隔开,属性和值之间用冒号 (2)使用html的一个标签实现 <style>标签:写在head里面 *<style type="text/css"> css代码; </style> *<style type="text/css"> div{ background-color:pink; color:red; } </style> (3)在style标签里面 使用语句(了解) @import url(css文件的路径); -第一步,创建一个css文件 div{ background-color:yellow; color:black; } -第二步,在style标签里面引用css文件 <style type="text/css"> @import url(div.css); </style> ***第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式 (4)使用头标签 link,引入外部css文件(在head里面没有style标签) -第一步:创建一个css文件 -<link rel="stylesheet" type="text/css" href="css文件的路径"/> 这种方式无需更改html页面,只需修改div文件即可,实现网页内容与显示样式的分离 例子:汶川地震各大网页内容显示为灰色,就是通过div实现 ***优先级(一般情况) 从上到下,从外到内,优先级由低到高 ***后加载的优先级高 3、css的选择器 选择器:要对哪个标签里面的数据进行操作 ***选择器格式 选择器名称{属性名:属性值;属性名:属性值;...} (1)标签选择器 *使用标签名作为选择器的名称 如 div{ background-color:gray; color:red; } (2)class选择器 *每个html标签都有一个属性class -<div class="haha">aaaaa</div> - div.haha{ background-color:pink; } .haha{ color:red; } (3)id选择器 *每个html标签上面有一个属性id -<div id="hehe">bbbbb</div> - div#hehe{ background-color:pink; } 使用 #hehe{ color:tomato; } 可以将id都为hehe的标签全部修改 ***优先级 style>id选择器>class选择器>标签选择器 4、css的扩展选择器 (1)关联选择器 *<div><p>wwwwwww</p></div> *设置div标签里面p标签的样式,嵌套标签里面的样式 * div p{ background-color:red; } (2)组合选择器 *<div>111111</div> <p>2222222</p> *把div和p标签设置成相同的样式,把不同的标签设置成相同的样式 *div,p{ background-color:red; } (3)伪元素选择器 *css里面提供了一些定义好的样式,可以拿过来使用 *比如超链接 **超链接的状态 原始状态 :link 鼠标放上去的状态 :hover 点击 :active 点击之后 :visited 5、css的盒子模型(div+css) 在进行布局前需要把数据封装到一块一块的区域(div)内,这个区域的专业术语叫盒子 (1)边框 border: width style color 可统一设置,也可以分别设置 上 border-top 下 border-bottom 左 border-left 右 border-right 代码: <head> <style type="text/css"> div{ //统一设置边框 width:200px; height:100px; border:2px solid red; } #div12{ //分别设置边框 border:2px dashed tomato; } </style> </head> <body> <div id="div11">这是第一个div</div> <div id="div12">这是第二个div</div> <div id="div13">这是第三个div</div> </body> (2)内边距 padding:20px;可统一设置,也可分别设置 上 padding-top 下 padding-bottom 左 padding-left 右 padding-right (3)外边距 margin:20px;可统一设置,也可分别设置 上 margin-top 下 margin-bottom 左 margin-left 右 margin-right **对数据进行操作,需要把数据放到一个区域里面(div) 6、css的布局漂浮(了解,某些浏览器不好使) float: **属性值 left:文本流向对象的右边(后面的div到右边) right:文本流向对象的左边(后面的div到左边) 7、css的布局定位 position: **属性值 -absolute: ***将对象从文档流中拖出,漂浮在下一个div的上面 ***可以使用top、bottom等属性进行定位 -relative: ***不会把对象从文档流中拖出 ***可以使用top、bottom等属性进行定位 8、案例:图文混排案例 **图片和文字在一起显示(首先使用div把图片和文字包起来) 代码: <html> <head> <title>案例—图文混排</title> <style type="text/css"> #imgtext11{ width:200px; height:200px; border:2px dashed green; } #img11{ float:left; } #text11{ color:tomato; } </style> </head> <body> <div id="imgtext11"> <div id="img11"><img src="a.png"/></div> <div id="text11">世俱杯恒大0-3巴萨 邹正重伤离场 恒大发布战广岛海报:为邹正而战 恒大足校小球员:长大找巴萨复仇 西媒评恒大:技术差得很 防守最棒</div> </div> </body> </html> 9、案例 图像签名 **在图片上面显示文字 <html> <head> <title>案例二图像签名</title> <style type="text/css"> #text21{ position:absolute; top:140px; left:50px; color:white; } </style> </head> <body> <div id="img21"><img src="b.png"></div> <div id="text21">网球双生花半裸写真</div> </body> </html>
相关文章推荐
- CSS3响应式布局之弹性盒子
- JavaWeb自学之css学习笔记
- 元素定位
- 在CSS中定义超链接样式a:link、a:v…
- Css样式表中:margin、paddi…
- 第十一章 设计用户界面 之 基于浏览器优化程序行为和样式
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- CSS
- CSS中overflow隐藏、滚动条、换行等用法
- css如何将div画成三角形
- CSS3滚动条-webkit-scrollbar简介
- css3 弹性盒子
- CSS background 之设置图片为背景技巧
- css3媒体查询
- (一)常用的CSS命名规则
- CSS字体大小: em与px、pt、百分比之间的对比
- DIV+CSS布局和TABLE布局的优缺点讲解
- css样式可以使用百分比的属性--总结
- CSS 三角形
- 新增clob字段到数据库表中,按一定的样式插入储存。