|
【郑州校区】CSS的样式
1.1.1 边框和尺寸：border、width、heightl border ：设置边框的样式 n 格式：宽度 样式 颜色 n 例如：style=”border:1px solid #f00” ，1像素实边红色。 l 样式取值：solid 实线，none 无边，double 双线 等 l width、height：用于设置标签的宽度、高度。 [AppleScript] 纯文本查看 复制代码 <style type="text/css">
div{
border:1px solid #000; /*1像素，实边，黑色*/
width:200px;
height:200px;
}
</style> 1.1.2 转换：displayHTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。 l 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。 n 常见的块元素：<h1>、<div>、<ul>等 l 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。 n 常见的行内元素：<span>、<a> 等 在开发中，希望行内元素具有块元素的特性，需要使用display进行转换 [AppleScript] 纯文本查看 复制代码 选择器{display:属性值}
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
例如：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border :1px solid #000;
width:100px;
height:40px;
}
</style>
</head>
<body>
<!--默认显示一行，边框环绕，高宽没有作用-->
<span>显示1-1</span>
<span>显示1-2</span>
<!--每一行显示，高宽有作用-->
<span style="display: block;">显示2-1</span>
<span style="display: block;">显示2-2</span>
</body>
</html> 1.1.3 字体：color、font-size[AppleScript] 纯文本查看 复制代码 color：颜色，字体颜色 例如： [AppleScript] 纯文本查看 复制代码 <div style="height: 50px;width:200px;border:1px solid #000;">
<a href="">点击</a>
<a href="" style="text-decoration: none;">点击</a>
</div>
<div style="height: 50px;width:200px;border:1px solid #000;">
<a href="" style="line-height: 50px;">点击</a>
<a href="" style="color: red;">点击</a>
</div> 1.1.4 背景色：background-color[AppleScript] 纯文本查看 复制代码 <ul style="background-color: #999;color: #FFF;">
<li>点击</li>
<li>点击</li>
<li style="background-color: #000;">点击</li>
<li>点击</li>
</ul> 1.1.5 布局：float、clear通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动 [AppleScript] 纯文本查看 复制代码 选择器{float:属性值;}
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值） 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。 [AppleScript] 纯文本查看 复制代码 选择器{clear:属性值;}
常用属性值：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
例如：
<!--默认上下布局-->
<div>
<div>区域1-1</div>
<div>区域1-2</div>
</div>
<hr />
<!--浮动左右布局-->
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
</div>
<!--取消浮动，另起一行布局-->
<div style="clear:both"></div>
<hr />
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
<div style="float: left;">区域2-3</div>
</div>
传智播客·黑马程序员郑州校区地址 河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层
| 
收藏
淘帖
踩
