无论是你是一名网站建设人员还是一名网站优化人员,做为必然趋势的DIV+CSS设计,了解并掌握它都是非常重要的。当然学习就是为了要去做东西,让我们在实践中来详细学习下CSS的相关语法和标签的定义。
<?xml version=”1.0″ encoding=”UTF-8″?>
<!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” xml:lang=”en” lang=”en”>
<head>
<title>青岛网站建设</title>
<meta http-equiv=”keywords” content=”enter,your,keywords,here” />
<meta http-equiv=”description” content=”A short description of this page.” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<!–<link rel=”stylesheet” type=”text/css” href=”styles.css”>–>
<style type=”text/css”>
p,div
{
text-align:center;
color:red;
font-family:arial
}
.sb
{
font-size:9pt;
color:blue
}
strong.st
{
font-family:楷体
}
#pp
{
font-weight:bold;
color:#0000ff;
position:absolute;
top:70px;
left:30px;
width:300px;
height:60px;
z-index:2;
overflow:auto;/*内容超出范围怎么办,还有visible,hidden,scroll*/
visibility:visible
}
dl#pp
{
这里只对dl的id为pp有用
}
table a
{
只对table里包含的a有用
}
body > p
{
子对象选择器,所有body下的子对象p
}
h1 + p
{
相邻选择器
color:blue所有h1和p相邻的都是这个样式
}
html > body table tr[id="total"] td ul > li
{
font-size:30pt !important;
文内样式优先级,加1、0、0、0,最高
每个id选择器,加0、1、0、0
每个class选择器,加0、0、1、0
每个元素或伪元素,加0、0、0、1
其他选择器,加0、0、0、0,等于没加
有!important声明的高于一切,两个相同则比较优先级,再同比较顺序,后来局上
7个普通元素,一个属性选择器,两个其它选择器 结果 0,0,1,7
}
li#answer
{
一个id选择器,一个普通选择器,结果是0,1,0,1,比前面的大
}
p:first-letter
{
font-size:20pt
伪元素包括first-line,first-letter,:before,:after
}
p:first-child
{
text-indent:25px;
伪类,将对任何第一个子元素为p的元素进行缩进,
还包括::link:,:visited,:hover:(mouse over),:active(select),:lang
p:first-child em,这个则对p元素的第一个em子元素起作用
}
/*css属性和值*/
div
{
/*字体属性*/
font-family:courier;/*字体类型*/
font-style:italic;/*字体样式normal italic bolique*/
font-variant:small-caps;/*字体变形*/
font-weight:bold;/*字体粗细*/
font-size:14pt;/*字体大小*/
/*文本属性*/
word-spacing:10pt;/*单词间距*/
letter-spacing:5pt;/*字母间距*/
line-height:1.5;/*行距*/
text-align:center;/*文本水平对齐*/
vertical-align:bottom;/*文本垂直对齐*/
text-indent:30pt;/*文本缩进*/
/*颜色和背景属性*/
color:red;/*文本颜色*/
background-color:#e2b87f;/*背景颜色*/
background-image:url(image/1.jpg);/*背景图片*/
background-repeat:repeat-x;/*设定背景重复排列,还有repeat,repeat-y,no-repeat*/
background-position:left top;/*设定背景图片位置,还有center,bottom等或百分比,或绝对单位x,y定位*/
/*边框属性*/
border:auto;
border-top:2pt;
border-color:black;
border-style:dotted;/*none:无,dotted:虚线,dash:短线,solid:实线,double:双实线,groove:带立体感沟槽,
ridge:成脊形,inset:内嵌立体边框,outset:外嵌立体边框*/
border-width:thin;/*还有thick,medium:缺省值*/
border-bottom-color:red;
/*列表属性*/
list-style-type:circle;/*在前面加圆圈,还有disc加实心圆,square加实心方块,decimal加阿拉伯数字,lower-roman加
小些罗马数字,upper-alpha加大写英文字母*/
list-style-position:inside;/*outside表示放文本以外*/
list-style-image:url(image/face1.gif);
/*定位属性*/
position:absolute;
top:70px;
left:30px;
width:300px;
height:600px;
z-index:2;
overflow:auto;/*内容超出范围怎么办,还有visible,hidden,scroll*/
visibility:visible
/*鼠标属性*/
cursor:hand;/*crosshair简单十字状,move被移动交叉箭头,text编辑文本指针状,help,wait*/
}
/*图像边框*/
img.framed{
padding:10px;/*填充为10px*/
border:3px solid.#ff0000;
background-color:#ff0000;
margin:-5px 5px 5px -5px;/*设置图片边框*/
display:block;/*实现单击区域按钮的效果*/
position:relative;/*使用相对定位来偏移图像*/
}
/*链接样式设计*/
a
{
color:red;
text-decoration:none;/*隐藏下划线*/
background-image:url(image/face1.gif);/*链接背景图片*/
background-repeat:repeat-x;
background-position:100% 100%;/*保证图形出现在链接文字的下方*/
padding-bottom:4px;/*链接下方加入空白给自定义图形留空间*/
white-space:nowrap;/*阻止链接文字折行*/
display:block;/*实现单击区域按钮的效果*/
width:20px;/*按钮宽度*/
line-height:1.3em;/*按钮高度*/
text-align:center;/*按钮文字居中显示*/
border-left:0.5em solid #9ab;/*设置左边框样式*/
}
a:link
{
color:green/*这个表示有链接地址href属性值的*/
}
a:visited
{
color:lightgreen;
}
a:hover
{
background-color:red;/*当鼠标悬停在连接上时连接文本的颜色*/
color:yellow;
text-decoration:line;/*鼠标悬停连接后显示下划线*/
font-weight:bold;/*鼠标悬停字体变粗*/
cursor:url(”image/1.ani”);/*设置鼠标指针要使用的图片只支持ico,cur,ani类型指针文件*/
}
a:active
{
background-color:black;/*当鼠标按下激活链接时背景变为黑色*/
}
table
{
width:230;
height:100;
background:#33ccff
}
tr
{
cursor:hand;
onmouseover:expression(onmouseover=function (){ this.style.borderColor
=’white’;this.style.color=”;this.style.backgroundColor=’#9999CC’});
onmouseout:expression(onmouseout=function (){this.style.borderColor=”;
this.style.color=”;this.style.backgroundColor=”});
}
td
{
cursor:hand;
onmouseover:expression(onmouseover=function (){ this.style.borderColor
=’white’;this.style.color=”;this.style.backgroundColor=’#9999CC’});
onmouseout:expression(onmouseout=function (){this.style.borderColor=”;
this.style.color=”;this.style.backgroundColor=”});
}
.line
{
border-left:none;
border-right:none;
border-top:none;
border-bottom:1px solid #00ffcc;
}
.gg
{
background-color:transparent;/*设置表单背景透明化*/
}
form/*设置表单样式*/
{
margin:10px;
margin-top:20px;
}
.text/*文本框样式*/
{
background-color:#ff99ff;
border-width:2px;
border-style:solid;
border-color:#ff00cc;
}
select /*下拉列表样式*/
{
position:relative;/*设置为相对定位*/
left:-2px;
top:-2px;
font-size:12px;
width:100px;
line-height:14px;
border:0px;
color:#909993;
}
.select1
{
background-color:#ff99ff;
color:#000000;
}
.select2
{
background-color:#ccffcc;
color:#000000;
}
</style>
</head>
<body bgcolor=”#ffccff”>
username: <input type=”text”/>透明化: <input type=”text”/>文本框样式 <input type=”text”/>
<select>
<option>select1</option>
<option>select2</option>
</select>
<table border=”1″><tr><td>青岛网站建设</td><td>ssssssssss</td><td>ssssssssss</td></tr>
<tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
<tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
<tr><td>ssssssssss</td><td>ssssssssss</td><td>ssssssssss</td></tr>
</table>
<div>
<p>p</p>
<p>p</p>
</div>
<p>p</p>
<span>p</span>
<p id=”pp”>对id用的</p>
<span id=”sp”>span</span>
<ul>
<li>li</li>
<li>li</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<h1>h1</h1>
<strong>strong强大</strong>
<em>ememememem</em>
所有标记必须有结束符<br/>
属性名字必须小写<br/>
所有xhtml必须嵌套<br/>
属性值必须用双引号<br/>
属性缩写禁用<br/>
大于号必须><br/>
小于号必须<<br/>
与符号必须&<br/>
用id代替name属性<br/>
<a href=”sss”>不要在注释内容中使用“–”</a><br/>
</body>
</html>
人总是爱幻想的,CSS打造的动态网页实现了设计师的幻想,而创造本就源于幻想,CSS将会彰显其越来越强大的功能。