JAVAEE------css层叠样式表知识点总结
CSS
1、css概述
* Cascading Style Sheets:层叠样式表
** 层叠:一层一层(优先级,最终以哪个样式为准)
** 样式表:很多的属性和属性值
*** 增强页面的显示效果
*** CSS将网页内容和显示样式进行分离,提高了显示功能
* 要想使用css,必须要和html在一起使用
2、css和html的结合方式
(1)每个html标签都有一个属性 style,在style里面设置样式
* <div style="background-color:red;color:green;">天之道,损有余而补不足,是故虚胜实,不足胜有余。</div>
* 格式 style="属性名1:属性值1;属性名2:属性值2"
(2)使用html的一个标签 <style type="text/css"> css代码 </style>
* 一般style标签写在头标签里面
* div {
background-color:black;
color:white;
}
* 应用场景:只是在一个页面设置这个样式,其他页面设置其他的样式
(3)在style标签里面使用语句
* 首先创建一个css文件
* <style type="text/css"> @import url(css文件路径); </style>
* <style type="text/css">
@import url(div.css);
</style>
* 注意:在某些浏览器下不支持
(4)引入外部的css文件
* 使用头标签 link
* <link rel="stylesheet" type="text/css" href="css_3.css" />
* 应用场景:比如现在有一万个页面,一万个页面需要相同的样式
** css优先级
* html代码加载顺序:从上到下加载
* 一般情况下,后加载的优先级高
** 格式:属性名:属性值 ; 属性名:属性值;
3、css的基本选择器
* 在哪个标签上设置样式
(1)标签选择器
* 使用标签名作为选择器
* p {
background-color:green;
}
(2)class选择器
* 每个html标签都有一个属性class
* .haha {
background-color:red;
color:green;
}
(3)id选择器
* 每个html标签都有一个属性id
* #hehe {
background-color:#990099;
color:#ccff99;
}
* id建议不要相同,后面js获取值
** 优先级
style > id > class > 标签选择器
4、css的扩展选择器
(1)关联选择器(设置嵌套标签里面的样式)
* <div><p>aaaaa</p></div>
* <p>bbbbb</p>
** 设置div里面的p标签里面的内容
* div p {
background-color:blue;
}
(2)组合选择器(设置不同的标签具有相同的样式)
* <div>qqqqqq</div>
* <p>wwwwww</p>
** 设置div和p具有相同的样式
* div,p {
background-color:orange;
}
(3)伪类元素选择器(了解)
* 实现一些简单的动态效果
* 不是一个真正的选择器,css里面提供的一些选择器,可以直接使用
** 超链接的状态
* 原始状态 鼠标放上去(悬停) 点击(瞬间) 点击之后
:link :hover :active :visited
* 如何记忆:
lv ha
5、CSS的盒子模型
* 要进行布局,首先要把数据封装到一块区域里面去(div)
* 边框 border : border-width || border-style || border-color
** 上下左右 border-top border-bottom border-left border-right
* 内边距:padding:length
** 有上下左右四个内边距
* 外边距 :margin:length
** 有上下左右四个外边距
6、css的布局(漂浮)
* float属性:left right
7、案例:实现图文混排效果
8、css布局(定位)
* position:absolute relative
** absolute:将对象从文档流中拖出,使用 left , right , top , bottom 进行定位
** relative: 不会把对象从文档流中拖出,使用 left , right , top , bottom 进行定位
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。