Java/JavaWeb/CSS(Cascading Style Sheet)_cascading style sheets, java api-CSDN博客

本文链接：https://blog.csdn.net/weixin_51404666/article/details/120200297

1.CSS概述

Cascading Style Sheet，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS的作用就是设置网页的各个组成部分的表现形式。

CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。

2.三种定义样式的方法

1.内联（行内）式:

        在HTML标签的style属性中编写CSS代码混合在HTML标记使用,在其里面加入style参数。

        好处：简单对某个元素单独定义样式

         缺点：

一、w3c标准是:内容、样式、行为三者分开,这个嵌入方式不符合W3C规范,并且代码乱,不好维护

二、代码冗余,相同的style得写多次,不可复用

2.内嵌式：

在<head></head>中编写CSS代码。

这个方式解决了同一页面多个标签需要写多分style属性的问题，但是内嵌式无法实现在多个html都要使用这个css样式的功能。

ps：

3.链接式

在html的head中插入<link rel="stylesheet" href="css文件路径" type="text/css">

href中的是要插入的样式的css文件，通过连接式解决了多个html使用一个css样式的问题。

ps：Link标签有两个作用（link标签是用于当前文档引用外部文档的）：

        1. 定义文档与外部资源的关系；2. 是链接样式表。

        rel标签属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的。

        Stylesheet – 定义一个外部加载的样式表。

       type="text/css

        用处是告诉浏览器，这段标签内包含的内容是css或text，也就是说如果某种浏览器(特别是wap等手机浏览器械、)不能识别css的，会将代码认为text，从而不显示也不报错。

        type->类型,这里是style的属性

        text/css ->文本/css,即css文本去掉效果一样，这里只是标注一下这个样式的属性是css文本。

3.样式的定义格式（内嵌式）

样式定义选择符是指样式定义的对象，可以是HTML标记元素，还可以是用户自定义的类、用户自定义的ID、伪类和伪元素等.

1.标记选择符

任何HTML元素都可以是一个CSS的标记选择符例如：div{ text-align:center }

ps：div即division，即分区。一般在页面中不显示样式，需要通过id或class样式来试着样式，用于页面的分区。

标记选择符.类名{样式属性1:值1; 样式属性2:值2; ……}

2.类选择符（比较常用）

每一个标记选择符都能自定义不同的类(CLASS)，从而允许同一元素具有不同的样式 。

.类名{样式属性1:值1; 样式属性2:值2; ……}/*有个点！*/

用的时候就是 class=

3.ID选择符

ID 选择符用于分别定义每个具体元素的样式，与自定义类选择符不同的是，ID选择符只能为某一个标记元素使用。例如：#index { color:blue }

id选择符和类选择符的区别

类选择符可以给任意多的标记定义样式，但是ID选择符在当前页面中只能够使用一次，因为ID是唯一标识的。

通常用来设置网页中的唯一元素，如网页头部，底部，或者侧边栏等

大多与布局元素div配对使用
ID选择符样式比类选择符样式优先级高，但是ID选择符的局限性很大，只能单独定义其中一个元素的样式(特殊情况下使用)。

转载： ID选择符与类选择符的区别 - DIVCSS5

上面给的是官方定义，而实际上呢？

转载：(1条消息) 前端学习系列——（九）理解什么是ID选择器的“唯一性”_随风丶逆风的博客-CSDN博客_前端id选择器https://blog.csdn.net/sinat_36521655/article/details/80693167?ops_request_misc=&request_id=&biz_id=102&utm_term=ID%E9%80%89%E6%8B%A9%E7%AC%A6%E7%9A%84%E5%94%AF%E4%B8%80%E6%A0%87%E8%AF%86&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-80693167.pc_search_es_clickV2&spm=1018.2226.3001.4187

4.标记类选择符

5. 上下文选择符

4.页面布局

1.DIV标签

在HTML中，每一个标签都可以称作是容器，能够放置内容 DIV是HTML中专门用于布局设计的容器对象以DIV对象为核心的页面布局中，通过层来定位，通过CSS定义外观，最大程度地实现了结构和外观彻底分离的布局效果。

2.页面元素定位

页面元素的定位分为流布局和坐标定位布局两种

（1）流布局static

如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠 如果不设置元素的定位方式，则默认是流式布局。

规则：（1）块元素分行显示（2）行内元素在同一行内显示，一行显示不下则折行。

float

（2）坐标绝对定位absolute

在使用坐标绝对定位之前，必须先将style元素的position属性的值设置为absolute，然后就可以由style元素的left、top、right、bottom和z-index属性来决定元素在页面中的绝对显示位置 ,z-index值大的元素会覆盖值小的元素

3，DIV和CSS布局

（1）float

float:none 用于设置是否浮动

float:left 用于表示对象向左浮动

float:right 用于表示对象向右浮动

（2）页面结构

        标题区（header）用来显示网站的标志和站点名称等。

        导航区（navigation）      用来表示网页的结构关系，如站点导航，通常放置主菜单。

        主功能区（content）       用来显示网站的主题内容，如商品展示、公司介绍等。

        页脚（footer）                用来显示网站的版权和有关法律声明等

通常采用 DIV元素来将这些结构先定义出来，类似这样：

justify-content容器属性