Python开发【前端】：CSS
Kylin Zhang
css样式选择器
标签上设置style属性：
<body><div style="height: 48px;">第一层</div><div style="height: 48px;">第二层</div><div style="height: 48px;">第三层</div>
</body>直接在div里写相对应的样式
id选择器
<head><meta charset="UTF-8"><title>Title</title><style>#i1{background-color: #2459a2;height: 48px;}</style>
</head>
<body><div id="i1">第一层</div>
</body>
把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名
class选择器（最常用）
<head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: #2459a2;height: 48px;}</style>
</head>
<body><div class="c1">第一层</div><div class="c1">第二层</div><div class="c1">第三层</div>
</body>把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用
标签选择器
<head><meta charset="UTF-8"><title>Title</title><style>div{background-color: #2459a2;height: 48px;}</style>
</head>
<body><div >第一层</div><div >第二层</div><div >第三层</div>
</body>标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容
关联选择器（层级选择器）
<head><meta charset="UTF-8"><title>Title</title><style>span div{background-color: #2459a2;height: 48px;}</style>
</head>
<body><div >第一层</div><span><div >span里的div</div></span><div >第三层</div>
</body>只让span里面的div标签应用样式，可多层嵌套
组合选择器
<head><meta charset="UTF-8"><title>Title</title><style>#i1,#i2,#i3{background-color: #2459a2;height: 48px;}</style>
</head>
<body><div id="i1">第一层</div><div id="i2">第一层</div><div id="i3">第一层</div>
</body>组合选择器，加,号，相同样式多命名
属性选择器
<head><meta charset="UTF-8"><title>Title</title><style>input[name="James"]{width: 20px;height: 20px;}</style>
</head>
<body><input type="text" name="James"><input type="text"><input type="password">
</body>根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
css样式引用
css样式优先级
<head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: red;color: white;}.c2{background-color:black;}</style>
</head>
<body><div class="c2 c1" style="color:palegreen" >第一层</div>
</body>如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先
文件方式引用样式
定义样式并保存到commons.css文件
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}引用commons.css文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="commons.css">
</head>
<body><div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>
css样式边框
基本边框
<body><div style="border: 1px dotted red;">第一层边框</div>
<!--border：边框宽度 solid：边框样式实线（dotted虚线）颜色：red-->
</body>
边框其他样式
<body><div style="height: 48px;width: 80%;border: 1px solid brown;font-size: 16px;text-align: center;line-height: 48px;">第二层边框</div><!--height: 48px 边框高度--><!--width: 80% 宽度页面的80%--><!--border: 1px solid brown 边框宽度、样式、颜色--><!--font-size: 16px; 字体大小--><!--text-align: center; 水平居中--><!--line-height: 48px; 垂直居中-->
</body>
-》》点击显示效果
CSS样式浮动
初识float
<body><div style="width: 20%;float: left;">左边</div><div style="width: 80%;float: right;">右边</div>
</body>
-》》点击显示效果
float测试页
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height: 38px;background-color: #dddddd;line-height: 38px;}</style>
</head>
<body style="margin: 0 auto;"><div class="pg-header"><div style="float: left;">*收藏本站</div><div style="float: right;"><a>登录</a><a>注册</a></div></div><div style="width: 300px;border: 1px solid red;"><div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div><div style="clear: both"></div></div>
</body>-》》点击显示效果
注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
CSS样式display
块级标签和行内标签相互转换
<body><div style="display: inline">块级</div><span style="display: block">行内</span>
</body>-》》点击显示效果
注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
<body><span style="display: inline-block;height: 50px;width: 70px">行内</span><div style="display: inline">块级</div>
</body>-》》点击显示效果
注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
CSS样式边距
外边距margin
<body><div style="border: 2px solid red;height: 70px;"><div style="background-color: green;height: 50px;margin-top: 25px;"></div></div>
</body>
-》》点击显示效果
注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
内边距padding
<body><div style="border: 2px solid red;height: 70px;"><div style="background-color: green;height: 50px;padding-top: 25px;"></div></div>
</body>-》》点击显示效果
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
内容来源：http://www.cnblogs.com/lianzhilei/p/6046131.html
