javaWeb学习笔记-----2css

Posted 2022-12-11 漠小浅

css

1、css的简介：

*css：层叠样式表

** 层叠：一层一层的

**样式表：很多的属性和属性值

*使页面显示效果更加好

*css将网页内容和显示样式进行分离，提高了显示功能。

2、css和html的结合方式（四种结合方式）（*************************************）

（1）在每个html标签上面都有一个属性style，把css和html结合起来。

-<div style="background-color:red;color:green;">

（2）使用html的一个标签实现<style>标签，写在head里面

*<style type="text/css">

css代码；

</style>

*<style type="text/css">

div

background-color:blue;

color:red;

</style>

（3）在style标签里面使用语句（在某些浏览器下不起作用）

@import url（css文件的路径）

-第一步，创建一个css文件

<style type="text/css">

@import url(div.css);

</style>

（4）使用头标签link，进入外部css文件

-第一步，创建一个css文件

-<link rel = "stylesheet" type="text/css" href="css文件的路径"/>

  ******第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式。

3、css的基本选择器（三种）（************************************************）

**要对哪个标签里面的数据进行操作

（1）标签选择器

*使用标签名作为选择器的名称

div

background-color：gray；

color：white；

（2）class选择器

*每个html标签都有一个熟悉感 class

-<div class="haha">aaaaa</div>

-   .haha

background-color:orange;

(3) id选择器

*每个html标签上面有一个属性id

-<div id="haha">bbbb</div>

-  #haha

background-color:orange;

**优先级

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

4、css的扩展选择器

（1）关联选择器

*<div><p>wwwwww</p></div>

*设置div标签里面p标签的样式，嵌套标签里面的样式

* div p

background-color：green;

（2）组合选择器

*<div>11111</div>

<p>22222</p>

*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

*    div,p

background-color：orange;

（3）伪元素选择器

*css里面提供了一些定义好的样式，可以拿过来使用

* 比如超链接

**超链接的装填

原始状态  鼠标放上去的状态  点击           点击之后

:link         :hover                  :active       :visited

5、css的盒子模型

**在进行布局前需要把数据封装到一块一块的区域内(div)

（1）边框

border : 2px solid red

border::统一设置

上  border-top

中  border-buttom

左  border-left

右  border-right

（2）内边距

padding:20px

使用padding统一设置

也可以分别设置

上下左右四个内边距

（3）外边距

margin：20px；

可以使用margin统一设置

也可以分别设置

上下左右四个外边距

6、css的布局的漂浮

float：

**属性值

left：文本流向对象的右边

right：文本流向对象的左边

7、css的布局的定位 

position

**属性值

abolute：将对象从文档中流出，相当于漂浮在页面上面，可以通过top、buttom等属性进行定位

relative：不会把对象从文档流中拖出去，可以使用top、buttom等属性进行定位