CSS概述及简单使用
2018-07-31 本文已影响0人
二十三岁的梦
css选择器
| 符号名称 | 含义 | 示例 |
|---|---|---|
| *(星号) | 用于匹配任何标记 | * {color:red} |
| >(大于号) | 用于指定父子节点关系 | AAA>CCC>DDD {color:red}匹父节点分别为 CCC和AAA的节点DDD节点 |
| (空格) | 用于匹配在某一层有某个父节点的节点 | AAA CCC DDD {color:red}匹配包含该父节点CCC 的父节点AAA的节点DDD |
| +(加号) | 用于表示在同一个级别节点之间的关系 | AAA+BBB {color:red}表示，有一个兄弟节点AAA的 节点BBB |
| 名称[表达式] | 选择包含特殊属性值的节点 | BBB[type='xyz'] {color:blue} 表示包含text属性值为 xyz的BBB标签 |
下方示例演示相邻(即兄弟节点)选择器使用方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*添加兄弟节点选择器*/
li + li {
font-weight:bold;
font-family: "黑体";
font-size:14px;
color:#0033CC;
}
</style>
</head>
<body>
<div>
<ul>
<li>第一章 学习HTML5</li>
<li>第一章 HTML5标记</li>
<li>第一章 HTML5插入图片</li>
</ul>
<ol>
<li>HTML的发展</li>
<li>HTML5的新增功能</li>
<li>如何学习HTML5</li>
</ol>
</div>
</body>
</html>
可以尝试去掉li +看看具体变化，帮助你理解+选择器
位置模型
| 值名称 | 含义 |
|---|---|
| relative | 元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留 |
| absolute | 元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者 是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样 |
| fixed | 元素框的表现类似于absolute值，不过其包含块是视窗本身 |
| z-index | 用来指定相互重叠的元素的叠放顺序，数值较大的元素会叠放在数值较小的元素前面 |
下面示例使用css来对文本内容进行定位
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
h2.pos_abs{
position: absolute;
left: 150px;
top: 100px;
}
</style>
</head>
<body>
<h2 class="pos_abs">该内容是通过定义后的位置</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧150px，距离页面顶部100px。</p>
</body>
</html>
光标样式
style="cursor:pointer"光标呈现为指示链接的指针(一只手)
CSS与DIV标记边缘
通过DIV+CSS方式呈现一个表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Table 布局</title>
<style type="text/css">
/*定义表格的宽度和字体样式*/
.table{
width: 400px;
font-size: 14px;
font-family: "迷你简黑体";
}
/*定义行宽和对其方式*/
.tr{
width: 33.3%;
float:left;
}
/*定义单元的边框样式*/
.td{border:#039 solid 1px;}
/*定义单元的边框样式和文本对齐方式*/
.td2{
border:#039 solid 1px;
text-align: right;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">消费项目</div>
<div class="td">衣服</div>
<div class="td">化妆品</div>
<div class="td">食物</div>
<div class="td">总计</div>
</div>
<div class="tr">
<div class="td2">一月</div>
<div class="td2">241元</div>
<div class="td2">30元</div>
<div class="td2">730元</div>
<div class="td2">1001元</div>
</div>
<div class="tr">
<div class="td2">二月</div>
<div class="td2">150元</div>
<div class="td2">14元</div>
<div class="td2">650元</div>
<div class="td2">814元</div>
</div>
</div>
</body>
</html>
