javaweb-css

Posted 抓根宝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaweb-css相关的知识,希望对你有一定的参考价值。

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

CSS

1css的简介

1)什么是css?层叠样式表

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

* 层叠:一层一层的,样式的优先级。

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

 

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

 

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

* csshtml的如何结合使用。

 

2csshtml的结合方式

1csshtml有四种结合方式

第一种:使用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"/>

 

第四种:使用htmlstyle标签,在标签里面使用语句样式操作

(我用的很少)

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

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

 

3、css的选择器

1css优先级

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

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选择器 > 标签选择器

 

4css的扩展选择器

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">

 

 

 

以上是关于javaweb-css的主要内容,如果未能解决你的问题,请参考以下文章

[JavaWeb-CSS]CSS概述

[JavaWeb-CSS]CSS扩展选择器

[JavaWeb-CSS]CSS基础选择器

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js