首页 > 代码库 > css样式表1 2017-03-11
css样式表1 2017-03-11
样式表
DIV + CSS
一、 样式表的分类
以下均以div标签为例，可以换成其他标签
1、 内联样式表
格式:
style="属性1：属性值1；属性2：属性值2；属性3：属性3.1 属性3.2 属性3.3"
-------注意哪个用冒号哪个用分号 什么时候用空格
<div style="width: 500px; height: 100px; border:1px solid black">
</div>
注：优先级最高；border的值必须带有px; solid是指实体线；dash是指虚线
和html联合显示，控制精确，但是可重用性差，冗余多。
2、 内嵌样式表
Def: 作为一个独立区域内嵌在网页里，必须写在head标签里。
<head>
<style type="text/css">
Div
{
width:400px;
height:300px;
border:1px;
}
</style>
</head>
注意：只对div标签起作用；必须在head标签里。不要漏了分号。
3、 外部样式表
新建一个CSS文件，用来放样式表。如果要调用样式表，需要在html文件中点右键----CSS样式-----附加样式表。一般用link链接方式。
<link href="http://www.mamicode.com/地址" rel="stylesheet/>
注： 放于head中。
补充：
有些标签有默认的边距，一般写样式代码的时候都会先去除（或设置其他样式）。
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
</style>
作用： 取消掉所有标签的页边距和间距。
* 表示对所有标签起作用。
二、选择器
1、标签选择器（用标签名作选择器，如上面2、补充就是一个标签选择器）
<style type="text/css">
Div
{
height: 100px;
width: 100px;
}
</style>
2、class选择器 （都是以“.”开头）
<head>
<style type="text/css">
.div
{
width:400px;
height:300px;
border:1px;
}
</style>
</head>
<body>
<div class="div" >
哈哈
</div>
</body>
注：表示class="div"这一类应用该样式。
3、 id选择器（以#开头）
<head>
<style type="text/css">
#div
{
width:400px;
height:300px;
border:1px;
}
</style>
</head>
<body>
<div id="div" >
哈哈
</div>
</body>
4、 复合选择器
（1）用”,”隔开，表示并列。
<head>
<style type="text/css">
div,span,p
{
width:400px;
height:300px;
border:1px
}
</style>
</head>
作用：标签div,span,p都具有相同的样式。
（2）用空格隔开，表示后代
<head>
<style type="text/css">
.div div1
{
width:400px;
height:300px;
border:1px;
}
</style>
</head>
作用： div标签里的div1将应用该标签。
（3）筛选”.”
<head>
<style type="text/css">
div.222
{
width:400px;
height:300px;
border:1px;
}
</style>
</head>
作用：在标签div中class=”222”的标签将会执行该样式。
拓：应用多个样式
<head>
<style type="text/css">
P
{
width:400px;
height:300px;
border:1px;
}
span
{
background-color:blue;
}
</style>
</head>
<body>
<div p span >
哈哈
</div>
</body>
作用：哈哈 所在div标签将会应用p标签和span标签所定义的样式。
Reflextions:
What I have learned today are more than before, and more complex than before , I have to try my best to catch up with them and just go ahead!
Thanks for the day is a sunny day, thanks for the people I love are still with me, thanks for the people always loving me never leave me; thanks for everything; and hope everything goes well, tomorrow, tomorrow‘ tomorrow, tomorrow‘ tomorrow‘tomorrow.............
css样式表1 2017-03-11