Web前端基础——CSS
一、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="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;} 可以指定选第几列
