Javaweb学习第四天

1 Css的简介

Css层叠样式表

层叠 ：一层一层的

样式表： 很多属性与书属性值

Css可以将页面的内容与显示的样式分离，提高了显示功能

2 css 与html 的四种结合方式

1）每一个HTML标签上面都有一个属性 style

Eg<divstyle="background-color:red;color:green">asdfgasdg</div>

2）使用HTML的标签<style> 写在head里面

<styletype=”text/css”>div {background-color:blue}</style>

下面div标签里面的属性就会按照上面设置的执行

 

3）创建css文件，然后在HTML文件中引入css文件实现分离

Css文件：<div>{background-color:red;color:blue}</div>

<style type="text/css">@importurl(div.css);</style>

(有一些浏览器不起作用，一般不用)

4）使用link标签(在head中)

<linkred=”stylesheet” type=”text/css” href=”css的路径”/>

3 css的优先级

由上到下，由外到内优先级由低到高，后加载的优先级高

4 Css的基本选择器（三种）

格式 选择器{属性名: 属性值;…}

1） 标签选择器 ：使用标签名作为选择器名

2） Class选择器：在HTML标签中使用一个class属性，对class属性起名

那么选择器的名字就可以是标签名+class的名字，如果有多个可以使用.class值

3） Id选择器:原理与class一样，将class----àid, .-----à#

选择器的优先级：

style>Id选择器>class选择器>标签选择器

 

5 css扩展选择器

1) 关联选择器，用于标签里面套标签 div p {}用于div 里面p标签的数据

2) 组合选择器， div,p{}用于div 和p 标签的操作，并操作

3) 伪元素选择器

超链接的状态 ：原始状态 鼠标放上去的状态 点击 点击之后的状态

:link :hover :active :visited

6 盒子模型-----在进行布局前需要把数据封装到一块一块的区域中（div）

1) 边框
border ：粗细（2px）样式（solid）颜色（blue）
上：border—top
下：border—bottom
左：border—left
右：border—right

2) 内边距
padding：距离（20px）
使用padding同一设置也可以分别设置上下左右的内边距

3) 外边距
margin：距离（2px）
可以使用margin统一设置也可以分别设置上下左右四个边框

 

7 css布局的漂浮
float：left：文本流向对象的右边
right：文本流向对象的左边

8 css 的布局定位
position：
属相值：absolute：将对象从文档中拖出，在最上层，可以使用top，bottom等定位
relative：不会将对象拖出，而是直接使用top和bottom等对对象定位。

图片签名-----在图片上显示文字
#text{position: absolute;top: 30px;left: 30px;color:red;}
<div id="img11"><img src="image/1.jpg"width="200" height="300"></div>

<div id="text">王美华</div>