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="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;}  可以指定选第几列

上一篇:gRPC学习


下一篇:semantic-ui 模态窗口