2013.9.10

1.学会自己编写css相关的东西,了解了css的编写方法,例:

<style>
div{
background:red;
}
.back{
border:#000000;
float:left;
border:solid 1px;
33%;
height:100px;
font-size:18px;
text-indent:2em;
}/*class为div的样式*/

#p

{

font-size:18px;

}/*id为p的css样式*/

</style>

 

  

2.css选择器

 元素选择器

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元素选择器</title>
<style>
div
{
	background:#999999;
	font:italic 50pt bold ;/*?不能调节字的大小(定义了两个字体类型 去掉宋体)*/
	text-align:center;
}
p
{
	background-color:#006600;
 	color:#993333;
	font:small-caps bold 50pt Arial, Helvetica, sans-serif;
	text-align:center;
}
</style>
</head>
<body>
<div>
 	div内的文字
</div>
<p>
	p内的文字
</p>
</body>
</html>

 3.属性选择器

问题:颜色不能按照自己的意愿分布

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器</title>

<style type="text/css">
div
{
font:italic bold 宋体 50pt;/*?不能调节字的大小*/
text-align:center;
}
p
{
background-color:#006600;
color:#993333;
font:small-caps bold 50pt Arial, Helvetica, sans-serif;
text-align:center;
}


#xx/*对为xx*/
{
background:#FFFF00;/*yellow*/
color:#FF0000;/*red*/
}
div[id*=xx]/*对包含xx属性id的div起作用 */
{
background:#339999;/*blue*/

}
div[id^=xx]/*以xx开头,结尾为$ */
{
background:#FFFF00;/*yellow*/
color:#FF0000;/*red*/
}

</style>

</head>
<body>
<div> div内的文字 </div>
<div id=“a”> 只含id属性的元素 </div>
<div id=“zzxx”> 含xx属性的元素 </div>
<div id=“xxyy”> 含xx开头属性的元素 </div>
<div id=“xx”> 只为xx属性的元素 </div><!--""的问题 改为英文就好了 出现不了自己想要的颜色-->
<p> p内的文字 </p>
</body>
</html>

  

 

原文地址:https://www.cnblogs.com/yuelingzhi/p/3311994.html