JAVAWEB复习笔记-day02
1.CSS样式优先级
优先级：由上到下，由外到内。优先级越来越高
2.css选择器
html标签选择器
class选择器（.)
id选择器（#）
3.优先级
style属性>id选择器>class选择器>标签名
4.css扩展选择器
关联选择器：标签嵌套的
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div p {
background-color: green;
}
</style>
</head>
<body>
<div><p>CSS的扩展选择器</p></div>
<p>WWWWWWWWWWWWWWWWWWWWWW</p>
</body>
</html>组合选择器：多个不同选择器进行相同样式设置
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div,p {
background-color: orange;
}
</style>
</head>
<body>
<div>QQQQQQQQQQQQQQQQQ</div>
<p>AAAAAAAAAAAAAAAAAAAAAAA</p>
</body>
</html>
伪元素选择器：预先定义好一些选择器，或者当前元素处于的状态
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后的状态*/
a:visited {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>
</body>
</html>5.css盒子模型：在进行布局前把数据封装到一块一块的区域内。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div22 {
padding: 20px;
}
#div23 {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="div21">AAAAAAAAAAAAAAA</div>
<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div23">CCCCCCCCCCCCCCC</div>
</body>
</html>6.css布局漂浮属性
float:none
默认值，对象不漂浮
left/right:文本流对象的左边/右边
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div41 {
float : left;
}
#div42 {
float:left;
}
</style>
</head>
<body>
<div id="div41">AAAAAAAAAAAAAAA</div>
<div id="div42">BBBBBBBBBBBBBBB</div>
<div id="div43">CCCCCCCCCCCCCCC</div>
</body>
</html>7.css布局定位属性
position：
static:默认值，无特殊定位；
absolute：绝对定位，将对象从文档流中拖出其他对象覆盖原来的位置，使用left,right,top,bottom定位；
relative：对象不可层叠；
所谓的层叠是每个div盒子可以覆盖之前的位置，如果relative不可层叠说的就是不能覆盖之前的位置，但是之前的位置可以通过css代码改变的；
8.图文混排
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#imgtex11 {
width: 400px;
height: 300px;
border:2px dashed orange;
}
#img11 {
/*float:left;*/
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>9.图像签名
<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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-05-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录