javaweb-css

Posted 2020-07-06 抓根宝

本文着重介绍CSS(在网上搜集的笔记是跟html在同一天讲完的,但是这样太草率,所以我把css单独列出来,毕竟是装修装饰的玩意,多了解一点,人靠衣装嘛)

CSS

1、css的简介

（1）什么是css？层叠样式表

* 样式表：有很多的属性和属性值，来设置内容样式

* 层叠：一层一层的，样式的优先级。

** 优先级:由上至下,就近原则

 

最终目的:把网页的内容和样式进行分离,利于代码的后期维护

 

* 想要使用css，不能单独使用，要和html结合使用

* css和html的如何结合使用。

 

2、css和html的结合方式

（1）css和html有四种结合方式

第一种：使用html标签里面的属性 style="css的代码"(不推荐,因为太乱)

* 代码 <div style="color:blue;">

 

第二种：使用html的标签

(这种用得比较多)

* <style type="text/css">

css的代码;

</style>

* 代码

  <style type="text/css">

div {

 

color:black;

}

  </style>

 

第三种：使用html标签实现  link，写在head里面

(外部样式表,用的也挺多)

* 首先创建css文件，在css文件里面写css代码

* 在html中使用link标签引入css文件

* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>

 

第四种：使用html的style标签，在标签里面使用语句样式操作

(我用的很少)

* 首先创建css文件，在css文件里面写css代码

* 写style标签，在标签里面 @import url(css路径);

 

3、css的选择器

（1）css优先级

* 在一般情况下，优先级是后加载的优先级高

（2）格式规范：  属性名称1:属性值1;属性名称2:属性值2;

(具体的属性可以在帮助文档中查询)

（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）

* css有三个基本选择

第一个：标签选择器

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

div {

    

}

 

第二个：class选择器

** 每个html标签上面都有一个属性class，通过设置class属性的值

** 代码

.haha {

background-color:red;

}

 

第三个：id选择器

** 每个html标签都有一个属性id，通过设置id的属性值

** 代码

#hehe {

background-color:green;

}

 

（4）选择器的优先级

* style(写在标签上的数据) > id选择器 > class选择器 > 标签选择器

 

4、css的扩展选择器

（1）关联选择器

* 设置嵌套标签的样式

** 代码

div p {

background-color:red;

}

 

（2）组合选择器

* 设置不同的标签具有相同的样式

* 代码

div,p {

background-color:green;

}

 

（3）伪元素选择器

* 比如超链接为例，

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

:link       :hover          :active      :visited

 

盒子模型:

定位属性 :position:a,绝对定位:从容器的左上角开始(它所在的容器中)

        b,相对定位

         Position:absolute 绝对定位

Left:横坐标

Top:纵坐标

单位:px(像素,如1366*768这个就是屏幕分辨率,单位也是像素)

         相对定位:相对于自己原来的位置,relative

同时:在所有有标签初始排列顺序就成为顺序流

两种情况:控件脱离了顺序流

1,当把控件的位置设置为绝对定位

2,当把控件的float属性进行设置

Float:将两个div横线排列 left(脱离了顺序流)(如果用ID,两个ID区域内都要写)

注意:可能会被覆盖

 

Overfloat:当盒子中的内容超出范围该怎么办

Auto:浏览器自己解决(默认会出现下拉滚动条)

Visible:超出直接显示

Hidd:不显示

 

样式表示例:

创建一个html文件,把这个样式表放进去,可以对表格单元格生效

<style text="text/css">

td{

border-style:solid;

border-color:red;

border-width:thin;

font-size:100%;

width:45px;

height:45px;

}

table{

 text-align:center;

 border-collapse:collapse;

}

</style>

<script type="text/javascript">