您的位置：首页 > 职场人生

黑马程序员—HTML+CSS系列 (二)

2013-07-28 09:35 148 查看

---------------------- ASP.Net+Android+IO开发S、.Net培训、期待与您交流！ ----------------------

CSS

CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等

三种样式表
推荐把尽可能多的样式写到单独的css文件中，这样可以复用，美工人员和开发人员很好的分工。

只有页面特有的样式才写到<style>中

只有元素特有的样式才写到元素的style属性中。

如果不同级别的样式有冲突，详细级别、子元素的会覆盖更高级别、父元素的
内联样式(行内样式)

<!-- 内联样式(行内样式) -->
<input type="text" value="" style="color:Red"/>

嵌入样式

<!-- 内嵌样式 -->
<style type="text/css">
P
{
COLOR:Red;
font-weight:bold;
}
input
{
color:Black;
width:100px;
background-color:Gray;
}
</style>

外部样式

<!-- 外部样式 -->
<link href="css/main1.css" rel="stylesheet" type="text/css" />

就近原则
以离元素最近的样式表为准
常见样式
复合样式background border
css单位 % px em
background-color
color
border-style
border-width
border-color
display:none、block块、inline内嵌
cursor
list-style-type:none
float
clear 清除浮动
margin 间距
padding 填充
position 相对绝对固定

div
{
color:Blue;
background-color:Olive;
/*
border-style:groove;
border-color:Red;
border-width:5px;
*/
border-left:solid 5px red;
/*
border-left-style:solid;
border-left-width:5px;
border-left-color:Red;
*/
border-top-style:dotted;
border-top-width:5px;
border-top-color:Black;
width:1000px;
height:200px;
/* inline 内嵌 */
display:inline;
}

*
{
/* 所有的元素 */
margin:0;
padding:0;
color:Red;
}
body
{
background:red url(/images/back_image.GIF);
}
span
{
/* block 块
display:block;*/
cursor:pointer;
color:Blue;
text-decoration:underline;
}
input
{
color:Green;
}
li
{
/* 去掉ul前面的黑点 */
list-style-type:none;
}

样式选择器
标签选择器 input

input
{
color:Green;
}

类选择器 .class

.warning
{
background:Yellow;
}
<td class="warning">bb</td>

id选择器 #wrap

#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaaaaaaaaaa" />

标签+类选择器

input.accountno
{
text-align:right;
color:Red;
}
label.accountno
{
font-style:italic;
}
<input class="accountno" type="text" value="111111111111111" />
<label class="accountno">333333333333333333</label>

* 包含选择器 p strong

P strong
{
background-color:Yellow
}
<!--表示P标签内的strong标签内的内容使用的样式-->
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>

* 组合选择器 h1,h2,input{}

H1,H2,input
{
background-color:Green
}
<h1>nihao</h1>
<input type="text" value="test" />

伪选择器为标签的不同状态设定样式

<head>
<title></title>
<style type="text/css">
a
{
text-decoration:none;
}
a:visited
{
color:Gray;
}
a:link
{
color:Red;

}
a:hover
{
color:Black;
font-style:italic;
}
a:active
{
color:Yellow;
}
</style>
</head>
<body>
<a href="http://www.itcast.cn">传智播客</a>
<a href="http://www.csdn.com">csdn</a>
<a href="http://www.cnbeta.com">cnbeta</a>
<a href="http://www.123.com">123</a>
</body>
</html>

表格的细边框

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
th,td
{
border-top:solid 1px red;
border-left:solid 1px red;
}
td
{
/* 文本水平对齐 */
text-align:center;
/* 文本纵向对齐 */
vertical-align:bottom;
}
table
{
border-bottom:solid 1px red;
border-right:solid 1px red;
}
</style>
</head>
<body>
<table cellspacing="0px" width="500px" height="400px">
<!-- table row 行 -->
<tr>
<!-- column span 跨列 -->
<th colspan="4">学生信息表</th>
</tr>
<tr>
<!-- table head表头 -->
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th >年龄</th>
</tr>
<tr >
<!-- table data 单元格 -->
<td>刘备</td>
<td>001</td>

<td>男</td>
<td>18</td>
</tr>
<tr>
<td>关羽</td>
<td>002</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张飞</td>
<td>003</td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>

ul 做菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
*
{
margin:0px;padding:0px;
}
#h li
{
float:left;
list-sty
4000
le-type:none;
width:70px;
}
.line
{
margin-right:20px;
width:1px;
height:30px;
border-left:solid 1px red;
}
#v li
{
clear:left;
list-style-type:none;
width:200px;
border-bottom:solid 1px red;
padding-top:10px;
padding-bottom:0px;
}
#jb51_yxj
{
/* absolute绝对位置 relative相对位置 fixed固定位置*/
position:fixed;
background-color: #fff;
width: 250px;
overflow: hidden;

right: 0px;
bottom: 0px;
}
#d
{
position:fixed;
top:100px;
left:100px;
background-color:Red;
}
</style>
</head>
<body>
<div id="d">adsasdf</div>
<ul id="h">
<li>Home</li>
<li class="line"></li>
<li>Blog</li>
<li class="line"></li>
<li>Photos</li>
<li class="line"></li>
<li>About</li>
</ul>

<ul id="v">
<li>Home</li>
<li>Articles</li>
<li>Gallery</li>
<li>Affiliates</li>
<li>Archives</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<div id="jb51_yxj">
<img src="images/51xp.gif" />
</div>
</body>
</html>

布局
表格布局

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
td
{
border:solid 1px red;
}
</style>
</head>
<body>
<table width="980px" height="500px">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td style="font-weight: 700">2</td>
</tr>
</table>
</body>
</html>

框架布局

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<frameset rows="30%,*">
<frame name="top" src="top.htm" noresize="noresize"/>
<frameset cols="20%,*">
<frame name="left" src="left.htm" noresize="noresize"/>
<frame name="main" src="main.htm" noresize="noresize"/>
</frameset>
</frameset>
</html>

div+css布局

style.css

*
{
margin:0px;
padding:0px;
}
body
{
background-color:Gray;

}
#wrap
{
width:98%;
height:500px;
margin:0px auto;
}

#head
{
height:150px;
background-color:Red;
}
#head #menu
{
margin:80px auto 0px auto;
padding-left:200px;
}
#head #menu ul
{
width:400px;
}
#head #menu li
{
float:left;
width:100px;
list-style-type:none;
}
#body
{
height:800px;
background-color:White;
}
#body #nav
{
/* 强制英文换行 word-break:break-all; */
/* 溢出后显示滚动条 */
overflow:auto;
background-color:Blue;
width:200px;
float:left;
}
#body #nav ul
{
padding-top:100px;
}
#body #nav li
{
list-style-type:none;
height:30px;
padding-left:30px;

}
#body #content
{
background-color:Green;
}

页面

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="head">
<div id="logo">
<img src="images/back_image.GIF" width="100px" height="50px" /></div>
<div id="menu">
<ul>
<li>首页</li>
<li>播客</li>
<li>相册</li>
<li>关于</li>
</ul>
</div>
</div>
<div id="body">
<div id="nav">
<ul>
<li>好好学习</li>
<li>天天向上</li>
<li>不要睡觉</li>
</ul>
aaaaaaaaaa aaaaaaaaaaa aaaa aaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaa
aaaaaaaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaaa

</div>
<div id="content">内容</div>
</div>
<div id="footer">版权</div>
</div>
</body>
</html>

---------------------- ASP.Net+Android+IO开发S、.Net培训、期待与您交流！ ----------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS HTML

相关文章推荐

新的分享

章节导航