一、CSS概述
css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示、位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word 一样的排版控制。
DIV+CSS 标准的叫法 xhtml+css //XHTML 指扩展超文本标签语言（EXtensible HyperText Markup Language）。
CSS的好处
1.提高网页的浏览速度,至少50% 的文件尺寸；
2.缩短改版时间将表现与内容分离,只要改几个css就能修改成千上万个网页；
3.将底网站流量,减少带宽占用；
4.更容易被搜索引擎搜到；
5.内容能被更广泛的设备访问；
web 标准
web 标准主要有几部分组成
1.结构（结构标准主要对应的语言是 xhtml）
2.表现（表现标准对应的主要语言是 css）
3.行为（行为标准主要对应的语言是 javascript）
二、CSS的几种设置方式
1.内联样式表 (inline styles)
如果使用内联样式表,建议加上
<meta http-equiv="Content-Style-Type" content="text/css">
//直接把样式写在了元素上
例子：
<div style="color:blue; width:300px;height:90px" >这是div中的内容</div>
2.嵌入样式表
<style type="text/css">
div{
background-color:red;
color:blue;
width:300px;
height:90px;
} p{
font-size:20pt;color:red;font-family:宋体;
text-decoration:underline;
}
</style>
3.外部样式表
把样式写在一个单独的文件中,然后引入
-- style.css 文件 --
h1 {color: green;}
p {margin-left: 200px;} /*注意,20 和 px之间千万别有空格 */
body{
background-image: url("image/lengtu.jpg")
}
-- 在页面中引入 --
<link rel="stylesheet" type="text/css" href="style.css" />
-- 输入样式表 //自己试一下
可以使用@import声明将一个外部样式文件,输入到另一个css文件中,被输入的css文件就成了输入到的文件的一部分，也可以用@import将一个css文件输入到网页文件的<style></style>标签对中，则输入的文件中的样式规则语句就成了<style></style>标签对中的语句
<style type=text/css>
@import url(http://xxx.com/style1.css);
@import url(stylesheets/style2.css);
p{background:green;color:red}
</style>
css 样式的特点
继承 : 网页中的子元素,将继承父元素的样式
层叠: 子元素中的样式会覆盖父元素中的同名样式, 后面的会覆盖前面的
三、样式规则的选择器
1) * 号选择器
* 可以选择全部
// * {margin 0, padding:0 } //所有的边距都为 0，在特定的时候很有用
// table * {margin 0, padding:0 } margin 指的是外边距
/* margin 的说明:*/
margin: 0px 0px 0px 0px 它的顺序是 上, 右 下 左
margin: 0px 0px 顺序是 上下 和 左右
margin: 0px 10px 10px ,三个参数,第一个用于上,第二个用于左右,第三个用于下
body {....} 这个选择器,如里面有 h1 什么的,它还控制不了这些东西的字体.但 * 可以
*{ color:blue }
2) html 标签选择器
div{color:red}
h1{...}
table{...}
3) id 选择器
#userName {
color:pink;
font-size:30px;
}
4) class 选择器
将一组css样式写在一起,起个名字(就是class名称),然后在元素上引用
.cry{
background-color:silver;
border-style:double;
font-size:40px;
border-color:blue;
}
<p class="cry"> //注意,引入的时候,名称前面不要加 .
这是断落中的内容
</p>
<div class="cry">
这是div中的内容
</div>
例子: css 的一种常见写法
p.stop{
color:red;
}
p.warning{
color:yellow;
}
p.normal{
color:green;
}
div.glad{
background-color:red;
}
<p class="stop">aaa</p>
<p class="warning">bbb</p>
<p class =normal>ccc</p>
<div class="glad">这是div</div>
例子,同一个元素,有多个class
.blueone{
color:blue;
font-size:5px
}
.bigone{
font-size:90px; --如果有冲突,以这个(后面写的)为准
}
<p class="bigone blueone"> //注意,中间用空格分开,如果两个类中有冲突的地方,以css文件中,后面写的那个为准
这个断落有多个class
</p>
经验:css命名 ,尽量按功能命名,不要按具体内容命名选择器的优先级 id > class > html
5) 属性选择器
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
例子
[title] //所有带title 属性的都被选中
{
color:green;
}
<a href="x" title="这是title" >test</a> //只有它被选中
<a href="x" >test</a>
例子
a[href] {color:red;} //只有带 href的a 标签被选中
例子
[title=W3School] //可以有多种写法 title~=hello
{
border:5px solid blue;
}
例子,控制表单中的按钮和text文本框
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
font-family: Verdana, Arial;
}
<form>
<input type="text" name="Name" value="Bill" size="20" />
<input type="text" name="Name" value="Gates" size="20" />
<input type="button" value="提交" />
</form>
在上面的基础上扩充
=== 关联选择器
1) 后迭代选择器
p em{
color:red;
}
ul li a{ /*不管后面的内容在第几级,都会被选中 */
font-size:50px;
}
<p>
刚才幸运抽大奖中奖者是 <em> 贵</em>
</p>
<em> 贵</em> //这个em不会被选中
<ul>
<li><a href="" >这是a标签</a></li>
<li><a href="" >这是a标签</a> </li>
</ul>
2) 子元素选择器
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
h1 > strong {color:red;} //选择直属于父级的
<h1> 这是<strong>very</strong> <strong>very</strong> 重要内容</h1> //这两个strong中的内容变红
<h1>这是<em>really <strong>very</strong></em> 重要内容</h1> //由于这里的两个 strong 属于emp内的,所以不变红
附:本例在 ie 6 下无效,ie8有效
3) 选择相邻兄弟
例子
h1 + p {margin-top:50px; color:red}
<h1>我是h1</h1>
<p>我是h1的兄弟</p> //这一行将被选中
<p>我是打酱油的</p>
<p>我是打酱油的</p>
<p>我是打酱油的</p>
例子
li + li {font-weight:bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li> //被选中
<li>List item 3</li> //被选中
</ul>
<ol>
<li>List item 1</li> //它不会被选中,因为它不是上面li 的相邻兄弟
<li>List item 2</li> //被选中
<li>List item 3</li> //被选中
</ol>
组合选择器 (最大特点,逗号分开)
可以在一条规则样式语句中组合若干个选择器,每个选择器之间用逗号分开， 例如 H1,H2,H3,H4,H5,H6,TD{color:red} //将所有的标题,和td 内容的颜色都定义为红色。
p,div,.waring{属性名:属性值}
h1,h2,h3, #divContent strong {color:red}
h1.waring ,#content h1{...}
如果有多个 类 /id 选择器,它们有相同的部分,可以把相同的css放在一起
例子：
.redone{
border-color: red;
border-style: solid;
}
.blueone{
border-color: blue;
border-style: solid;
}
.redone,.blueone,#p1{
font-size: 50px; //所以有字体都变成大的
}
<div class="redone">bigone</div>
<div class="blueone">bigone</div>
<p id="p1">p1</p>
伪元素选择器
对同一个HTML 元素的各种状态和其所包括的部分内容的一种定义方式。
例如: 对超链接的正常状态,访问过的,选中状态,当标滑过的状态 ,对段落的首字母和首行,都可以使用伪元素选择器
格式
HTML 元素 伪元素 {属性:值}
常用的伪元素
a:active 选中超链接时的状态
a:hover 光标移到超链接上的状态
a:link 正常状态
a:visited 访问过的超链接的状态
P:first-line 段落中的第一行文本
P:first-letter 段落中的第一个字母
//块级元素的都有效
//一个普通html元素,只要设置了with height 则就成为块级元素
//最容易让人想到的是div
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF text-decoration: underline;} /* 鼠标移动到链接上 */
a:active {color: #0000FF text-decoration: underline;} /* 选定的链接 */
L-V-H-A 这个顺序一定要保证
例子 创建链接框
a:link,a:visited {
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,a:active {
background-color: #7A991A;
}
<a href="/index.html" target="_blank">W3School</a>
例子:
给文本框得到焦点的时候,设置背景 (这个例子对IE6,IE7无效,火狐好使)，如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。
<label>姓名<input type=text /></label>
<label>密码<input type=text /></label> input{
width:200px;
height:50px;
border:solid gold;
vertical-align:middle;
padding-left:20px; //里面的文字不要顶格
} nput:focus{ //这是一个伪类
background:pink;
}
四、样式规则的注释和有效范围
1.样式规则的注释
/* */ 不能嵌套
2.样式规则的继承
所有嵌套在某个HTML标签中的HTML 标签都会继承外层标签设置的样式规则
比如body 标签的字体颜色,会被里面的继承,但有一些也不继承
3.样式规则的优先级
从上到下,从整体到局部,从外屋到里层
ID 覆盖 class ,class 覆盖 Html元素选择器
内联样式表>嵌入样式表>外部样式表
五、样式属性详解-背景
Css 样式属性非常多 大体可以分为以下几类
背景 文本 字体 链接 列表 表格 轮廓
1.background-color 可以设置颜色外,还可以设置 transparent //透明
例子
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent} /* 透明 */
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
2.backbround-image
body{
background-image:url(image/lengtu.jpg) /*可以是网络地址*/
}
p.flower {background-image: url(dog.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}
3.background-repeat //设置背景图象是否重复,及重复方式
no-repeat //背景图象只出现一次,不重复
repeat //水平和垂直重复,这是默认值
repeat-x
repeat-y
4.background-attachment:用于确定背景图象是否跟随内容的滚动而滚动
fixed:固定
scroll:图象跟随内容的移动而移动 (默认)
例子
background-image:url(lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed <body>
<p>图像不会随页面的其余部分滚动。</p>
.... 很多行
<p>图像不会随页面的其余部分滚动。</p>
5.background-position : 背景图象的水平位置和垂直位置
取值:
center
top
bottom
right
left
也可以用百分比：
background-position:50% 50%;
background-position-x:50px
background-position-y:50px
也可以用象素值 // background-position: 50px 100px; (实测ie6 不支持)
例子
background-image:url(image/lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed; //对于火狐,或 Opera 必须要加这个属性,下面的这句才好用
background-position:center
6.background: 是前面几个background 的综合
TABLE{ background:red url(logo.jpg) no-repeat bottom right }
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
六、样式属性详解-文本
word-spacing 设置单词之间的间距,设置值可以是前面 表示字体大小的那些单位
例子
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;} //可以是负值
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
letter-spacing 设置每个字符之间的间距
例 :
letter-spacing:20px 也可以用 em等
vertical-align 指定文本的垂直对齐方式
取值可以是:
sub 下标
super 上标
top 顶端对齐
middle 居中
bottom
相对于行高属性的百分比
--text-align 属性规定元素中的文本的水平对齐方式 ,取值:left center right justify
例子:
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
例子 justify 两端对应
.box1 {
width: 500px;
line-height: 20px;
margin: 10px auto;
background-color: #cdd;
text-align: justify
}
.box2 {
width: 500px;
line-height: 20px;
margin: 10px auto;
backgrsound-color: #cdd;
text-align: left;
}
<div class="box1">There is clearly a need for CSS to be taken 好多好多行.. 好多行 </div>
<div class="box2"> ... </div>
text-ident 设置文本的第一行的缩进值,如果设置为负值,就是将文本的第一行拉出
// p {text-indent: 1cm} 就是首行缩进, 也可以用 px,可以用 %
//一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素(实测ie可以,火狐不可以)
white-space 设置如何处理文本中的空白元素
normal 正常,将所有的空白压缩,多个空格剩一个
pre 和 pre 标签一样
nowrap 指定文本不换行,只有遇到了br 标签的时候才换 //和 nobr 标签一样
line-height 设置文本所在行的行高,可以是一个精确的值跟一个单位,也可以是一个百分比
text-transform
取值
none
uppercase //全大写
lowercase //全小写
capitalize //首字母大写
例子
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
<p class="uppercase"> china </p> //CHINA
<p class="lowercase"> china </p> //china
<p class="capitalize"> china </p> //China
text-decoration
取值
none
underline
overline
line-through
blink
七、样式属性详解-字体
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
font-family :字体名称,可以设置多个,用逗号分隔
// h1 {font-family: Georgia;} 如果字体名称中间有空格则可以用单引号
font-size : 字体大小
相对大小的设置可以为 larger 或smaller
绝对单位 px mm cm in pt pc
相对单位 em , %
例子：
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
font-style
normal - 文本正常显示
italic - 文本斜体显示 // p{font-style:italic}
oblique - 文本倾斜显示
font-weight :指定粗体字的大小
normal
bold
bolder
font-variant: 控制大写按小写的大小显示
normal
small-caps //本来是大写,结果显示的小
例子
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
font (综合上前面的全部)
例如 P{font:italic bold 12pt Times,serif}
相当于同时设置了上面的好几个属性
八、样式属性详解-表格
表格边框
table, th, td {
border: 1px solid blue;
}
折叠边框 (可以实现细线表格)
table, th, td { border-collapse:collapse;}
宽度和高度
table{
width:100%;
height:50px;
}
表格文本对刘
text-align 水平对齐方式
vertical-align 垂直对齐方式
td {
height:50px;
vertical-align:bottom;
}
表格的内边距
td {
padding:15px;
}
表格颜色
table, td, th {
border:1px solid green;
}
th{
background-color:green;
color:white;
}
表格格间距 如果有 !DOCTYPE，那么 Internet Explorer 8 以及上可支持,实测ie6不支持
table.two {
border-collapse: separate;
border-spacing: 10px 50px
}
空的格子是否显示出来
empty-cells: show; (或hide) 如果已规定 !DOCTYPE，那么 Internet Explorer 8 以上支持
table-layout 属性用来显示表格单元格、行、列的算法规则 automatic,fixed
table.one{
table-layout: automatic
}
table.two{
table-layout: fixed
}
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<table class ="two" > ...</table>
综合示例 表格
#table1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#table1 td,#table1 th {
font-size: 1em;
border: 1px solid green;
padding: 3px 7px 2px 7px;
}
#table1 th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: white;
}
#table1 tr.alt td {
color: #000000; /*这是黑色*/
background-color: #EAF2D3;
}
<table id="table1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</talbe>
九、样式属性详解-列表
list-style-type 用于指定目录列表项标记的样式
实心圆 disc
空心圆 circle
方块 square
阿拉伯数字 decimal
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 无项目符号
例子
ul li {
list-style-type:circle
}
list-style-image 用于设置标记的图象
例子
ul li {
list-style-image:url(image/dot.bmp)
}
注意,不要加 list-style-type:circle 之类的了,要不然不好使
list-style-position 用于设置列表标记显示在文本内,还是文本外 //设置值 inside outside
outside的
//效果
*aaa
aaa
*aaa
inside 的
//效果
aaa
*aaa
aaa
list-style 综合前面全部的 //li {list-style : url(lengtu.jpg) inside}
综合实例
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul> ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
} li {
float: left;
} a:link,a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
} a:hover,a:active {
background-color: #cc0000;
} -- line-height 行高
line-height:150% = line-height:1.5em p{line-height:1.5em} 或 line-height:150% <p>
喜欢Java<br />
喜欢编程<br />
喜欢大自然<br />
喜欢宅在家里<br />
</p>
十、样式属性详解-定位
CSS 有三种基本定位机制 普通流,浮动,绝对定位
定位属性 一共9个
--position
--top
--right
--bottom
--left
--overflow
--clip //把图片切下来一部分
img{
position:absolute;
clip:rect(0px,50px,200px,0px)
}
--z-index //设置元素的层叠顺序,值越大,越往上
--vertical-align
- baseline 默认
- sub
- super
- top //把元素的顶端与行中最高元素的顶端对齐
- text-top //把元素的顶端与父元素字体的顶端对齐
- middle
- bottom
- text-bottom
- length
- %
例子 本例火狐中有效
img.top {vertical-align:top}
img.bottom {vertical-align:bottom}
img.middle {vertical-align:middle}
<p>
这是一幅<img class="top" src="lengtu.jpg" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" src="lengtu.jpg" />位于段落中的图像。
</p>
<p>
这是一幅<img class="middle" src="lengtu.jpg" />位于段落中的图像。
</p>
例子 z-index
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1; /*默认是0,-1表示拥有更低的优先级*/ } #select1{
z-index:-100; //可以发现,对于下拉框,不管怎么设置z-index,它都是压不住的
} <h1>这是一个标题,,它将压在图片上</h1>
<img class="x" src="data:image\lengtu.jpg" />
<select id="select1">
<option>aaa</option>
<option>aaa</option>
</select>
十一、position 属性详解
absolute: 绝对定位,元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
relative: 相对定位,所设置的定位值是相对于元素通常在的位置的一个偏移量 ,元素仍保持其未定位前的形状，它原本所占的空间仍保留。
static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
fixed: 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
例子 相对定位
h2.pos_left {
position: relative;
left: -20px
}
h2.pos_right {
position: relative;
left: 20px
}
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
例子 绝对定位
h2.pos_abs {
position: absolute;
left: 100px;
top: 150px
}
例二
<div style="position: absolute ; width:50px;height:50px; background:pink; left:150px;top:180px "> </div>
例子 fixed 定位 ie6,7,8 不支持
.div1{
width:2000px;
height:2000px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
.ie{ //这是为了兼容ie写的
_position: absolute;
_clear: both;
_top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat')?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1);
}
<div class="div1">层1</div>
<div class="div2 ie">层2</div>
例子 overflow
--scroll 如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条
--visible 如果设置了这个属性,将会把多余的内容也显示出来(可能会撑大div),但不会出现滚动条
--auto 根据情况,如果需要出现就会出现
--hidden 超出了也不出现
div {
background-color: pink;
width: 150px;
height: 150px;
overflow: scroll //如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条
}
<div>这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
十二、样式属性详解-浮动(属于定位)
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
例一
img {
float:right //在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧,有点象环绕的效果
}
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
...
<img src="lengtu.jpg" />
</p>
例二
<div style="width:500px;height:500px;background:silver;">
<div style="width:50;height:50;background:green;float:left">1</div> //如果象float,则在火狐中,最终看到的是1(上)3(下) 2被压住了看不到,但在ie中不同
<div style="width:50;height:50;background:yellow">2</div>
<div style="width:50;height:50;background:pink">3</div>
</div>
例三,带清除浮动的
#div1{
width:200px;
height:80px;
background:red;
}
#div2{
width:500px;
height:60px;
background:springgreen;
float:left;
opacity:0.4;
filter:alpha(opacity=40);
}
#div3{
width:100px;
height:100px;
background:yellow;
clear:left; /*清除浮动 其他选项 right, both*/
}
#div4{
width:300px;
height:70px;
background:lightskyblue;
}
<div id=div1> div1 </div>
<div id=div2> div2 </div>
<div id=div3> div3 </div>
<div id=div4> div4 </div>
十三、 样式属性详解-其他
1) 光标
--cursor
pointer 手型,crosshair 十字型, text I型, wait 等待,default,help,e=resize 东箭头,ne-resize 东北箭头
n=resize 北箭头,nw-resize 西北箭头,w-resize 西箭头, sw-resize 西南箭头,s-resize 南箭头 se-rize 东南箭头 auto 自动
2) 半透明
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
//注意,它也可以用在 div 的背景色上
3) 块元素和行内元素
行内元素 (inline element) 又叫内联元素。内联元素只能容纳纯文本或其他内联元素,常见的内联元素元<span > <a> //注意和浏览器有关,到ie8以后,它也什么都能放。
块元素(bolck element)
块元素一般都从新行开,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行块元素也要把行占满,常见的块元素<div> <p> <li>
.menu{
}
<div class="menu">div</div> //占满一行
<ul class="menu">
<li>sss</li> //占满一行
<li>sss</li>
</ul>
说明,对于
<div class="menu">div1</div>
<div class="menu">div2</div> 如果指定了 width:100px,虽然div变小了,但它依然是独占一行,后面就算写个span,它依然要占一行，有一些css属性,对行内元素不生效 比如 margin,left ,right, width,height, 和浏览器版本有关,请尽可能使用块元素定位
* 块元素和行内元素可以互相转换
display:inline 转为行内元素(比如div)
display:block 转为块元素,比如 a
比如上面的.menu 中加入 display: inline; 则它们不占满一行了
附: display 的取值 还有很多, 比如 none
十四、框模型 (Box Model)
1)盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
w3c 建议把网页上的所有内容都放到一个盒子里，设计师可以通过创建定义来控制这个盒子的属性,这些对象包扩段落,列表,标题,图片,及层盒子模型主要定义四个区域。
1.盒子中的内容 :content
2.盒子的边框 :border
3.盒子与内容之间的添充 : padding (内补丁)
4.如果有多个盒子,盒子与盒子之间的距离 :margin (外补丁)
整个盒子模型在面页中占用的宽度是由
左边界+左边框+左填充+内容+右填充+右边框+右边界 组成
2)内边距
padding 属性接受长度值或百分比值，但不允许使用负值。
h1 {padding: 10px;}
h1 {padding: 10px 0.25em 2ex 20%;}
=========等价于============
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
3)外边距
p.margin {margin: 2cm 4cm 3cm 4cm}
<p>这个段落没有指定外边距。</p>
<p class="margin">这是一段文本...</p>
<p>这个段落没有指定外边距。</p>
4)边框
每个边框有 3 个方面：宽度、样式，以及颜色
---border-width(border-top-width,border-right-with,border-bottom-width,border-left-with)
// 用于设置元素边框的宽度,设置值可以是 thin medium thick 或数值
---border-color(border-top-color ... )
---border-style(border-top-style ...) // none,dotted,dashed(虚线),solid,double,groove(凹槽线),ridge(凸槽线),inset(凹边),outset(凸边)
// border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，
// 如果您希望边框出现，就必须声明一个边框样式。
---border(border-top,border-right,border-bottom,border-left) //综合了前面的几个
//例子: 给超链接加一个激活时的边框
A:active {border:thick double red}
布局例子：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container{
width:800px;
margin:0 auto; /*这个设置水平居中*/
background:lightskyblue;
} #header{
height:80px;
background:springgreen;
padding-top:20px;
} #logo{
width:60px;
height:60px;
background:gold;
margin-left:50px;
} #content{
/* height:500px; */ //尽量不要在这里设置行高
overflow:auto;
margin-top:10px;
background:#DDEE22
} #content-left {
height:400px;
width:20%;
background:silver;
margin:20px;
float:left; } #content-right {
height:400px;
width:72%;
float:left;
margin:20px;
margin-left:0px;
background:orange;
} #footer{
height:90px;
background:#3A6EA5;
text-align:center;
vertical-align:center; /*没起作用*/
font-size:12px;
color:white; line-height:90px; /*把lin-height 调整成和行高一样,可以居中*/
} .clear{
clear:both;
}
</style> </head> <body>
<div id="container">
<div id="header">
<div id="logo" >这是logo</div>
</div> <div id="content">
<div id="content-left">这是左边</div>
<div id="content-right">这是右边</div>
</div> <div class ="clear"><div>
<div id="footer"> 这是一些版权信息 </div>
</div>
</body> </html>
十五、盒子模型经典案例
//例一
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
border:1px solid red;
height:1000px;
width:700px;
margin:0 auto;
} div{
border:1px solid #2929FF;
margin-top:20px;
margin-left:50px;
width:350px;
height:270px;
/*
padding-top:30px;
padding-left:20px 也可以,但会撑大 */
} div img{
margin-top:30px;
margin-left:20px;
}
</style>
</head> <body>
<div>
<img src="head.gif">
</div>
</body>
</html>
例二
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
border:1px solid red;
width:700px;
height:800px;
margin:0 auto;
} ul{
margin:0;
padding:0;
width:600px;
height:700px;
margin-top:20px;
margin-left:17px;
border:1px solid blue;
} ul li{
border:1px solid deeppink;
width:100px;
height:120px;
list-style-type:none;
float:left;
margin-left:10px;
margin-top:20px;
} ul li img{
width:80px;
height:100px;
margin: 10px; } </style>
</head> <body>
<div>
<ul>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li>
<li><img src="cat.gif"></img></li> </ul>
</div>
</body>
</html>
注意：
table td:first-child{background-color:#ff0000; color:#000000;} 可以选第一列
或 table tr td:nth-child(1) {background-color:#ff0000; color:#000000;} 可以指定选第几列