Java
进阶篇

CSS基础

CSS 指层叠样式表 (Cascading Style Sheets)（级联样式表）

CSS 是用来美化 html 标签的，相当于页面化妆。

# 内嵌式写法


<head>
    <style rel="stylesheet" >
        /*样式表写法*/
    </style>
</head>

1
2
3
4
5
6
7

# 外链式写法

写在 head 里，


<head>
    <link rel=”stylesheet” href=”1.css”>
</head>

1
2
3
4
5

# 行内样式表

<!-- 行内样式 -->
<h1 style="font-size:30px;color:red"> HelloWord </h1>

1
2
3

# 三种写法特点

内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）

# 基础选择器

# 标签选择器

特点：

标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

写法

标签{属性：值；}

# 颜色的显示方式

直接写颜色的名称

十六进制显示颜色

#000000 前 2 为代表红色，中间 2 位代表绿色，后边 2 位代表蓝色。

color:rgb(120,120,120)
color:rgba(120,120,120,0.5) a 代表 alpha 不透明度值 0-1

# 类选择器

特点：

谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。

类选择器命名规则

不能用纯数字或者数字开头来定义类名
不能使用特殊符号或者特殊符号开头来定义类名
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名

写法

自定义类名{属性：值；属性：值；}

# ID 选择器

特点：

一个 ID 选择器在一个页面只能调用一次。如果使用 2 次或者 2 次以上，不符合 w3c 规范，JS 调用会出问题。
一个标签只能调用一个 ID 选择器。
一个标签可以同时调用类选择器和 ID 选择器。

# 通配符选择器

写法


*{属性：值；}

1
2
3

特点：

给所有的标签都使用相同的样式

PS：不推荐使用，增加浏览器和服务器负担。

# 复合选择器

两个或者两个以上的基础选择器通过不同的方式连接在一起。

# 交集选择器

写法

标签 + 类（ID）选择器{属性：值；}

特点：

即要满足使用了某个标签，还要满足使用了类（id）选择器。

# 后代选择器

写法

选择器 + 空格 + 选择器{属性：值；}

特点：

无限制隔代
只要能代表标签，标签、类选择器、ID 选择器自由组合
后代选择器首选要满足包含（嵌套）关系
父集元素在前边，子集元素在后边

# 子代选择器

写法

选择器》选择器{属性：值；}

特点：

选中直接下一代元素

# 并集选择器

写法

选择器 +，+ 选择器 +，选择器{属性：值；}

# 文本元素

# 属性

font-size:16px; 文字大小
Font-weight: 700 ; 值从 100-900，文字粗细，不推荐使用 font-weight:bold;
Font-family: 微软雅黑；文本的字体
Font-style: normal | italic; normal 默认值 italic 斜体
line-height: 行高


div{
    font-size:16px;
    font-weight:700;
}

1
2
3
4
5
6

# 文本属性连写

font: 后边写属性的值。一定按照书写顺序。

font: font-style font-weight font-size/line-height font-family;

文本属性连写文字大小和字体为必写项

# CSS 三大特性

# 层叠性

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码（后边代码层叠前边的代码）。和标签调用选择器的顺序没有关系。

# 继承性

继承性发生的前提是包含（嵌套关系）

文字颜色可以继承
文字大小可以继承
字体可以继续
字体粗细可以继承
文字风格可以继承
行高可以继承

总结：文字的所有属性都可以继承。

特殊情况：

h 系列不能继承文字大小。
a 标签不能继承文字颜色。

# 优先级

继承的权重为 0

权重会叠加

默认样式《标签选择器《类选择器<id 选择器《行内样式<!important
0         1          10     100    1000     1000 以上

1
2

# 链接伪类

a:link{属性：值；} a{属性：值}效果是一样的

写法	描述
a:link{属性：值；}	链接默认状态
a:visited{属性：值；}	链接访问之后的状态
a:hover{属性：值；}	鼠标放到链接上显示的状态
a:active{属性：值；}	链接激活的状态
：focus{属性：值；}	获取焦点

# 背景属性

方位值只写一个的时候，另外一个值默认居中


background-position: right;

1
2
3

写 2 个方位值的时候，顺序没有要求


background-position: right bottom;

1
2
3

写 2 个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。


background-position: right bottom;

1
2
3

# 行高

浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高 = 文字高度 + 上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。

行高的单位

行高单位	文字大小	值
20px	20px	20px
2em	20px	40px
150%	20px	30px
2	20px	40px

总结：

单位除了像素以为，行高都是与文字大小乘积。

不带单位时，行高是和子元素文字大小相乘，em 和 % 的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

推荐行高使用像素为单位。

# 行内元素

行内大多为描述性标记

典型代表 span ,a, ,strong , em, del, ins

特点：

和其他元素都在一行
高度、宽度以及内边距都是不可控的
宽高就是内容的高度，不可以改变
行内元素只能行内元素，不能包含块级元素


<span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <sup>...</sup>  上标

  <sub>...</sub>  下标

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 块级元素

块级大多为结构性标记

特点：

总是从新的一行开始
高度、宽度都是可控的
宽度没有设置时，默认为 100%
块级元素中可以包含块级元素和行内元素


  <address>...</adderss>

  <center>...</center>  地址文字

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <pre>...</pre>  预格式化

  <blockquote>...</blockquote>  段落缩进   前后 5 个字符

  <marquee>...</marquee>  滚动文本

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 行内块元素（内联元素）

典型代表 input img

特点：

在一行上显示
可以设置宽高

# 块元素和行内元素转换


/*块元素转行内元素*/
div,p{

    display:inline;
}
/*行内元素转块元素*/
span{

    display:block;
}

/*块和行内元素转行内块元素*/
div ,a,span,strong{
    display:inline-block;
    width:200px;
    height:200px;
    background-color:yellow;
    text-align:center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 盒子模型

# 边框 border

特点：

没有顺序要求，线型为必写项。


border: 1px solid red;

1
2
3

边框合并


table{
    width: 300px;
    height: 500px;
    border: 1px solid red;
    border-collapse:collapse;
}

1
2
3
4
5
6
7
8

# 内边距

padding-left | right | top | bottom

padding 连写

padding: 20px; 上右下左内边距都是 20px

padding: 20px 30px; 上下 20px 左右 30px

padding: 20px 30px 40px; 上内边距为 20px 左右内边距为 30px 下内边距为 40

padding: 20px 30px 40px 50px; 上 20px 右 30px 下 40px 左 50px

# 内边距撑大盒子的问题

影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度

盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

# 外边距

margin-left | right | top | bottom

外边距连写

margin: 20px; 上下左右外边距 20PX
margin: 20px 30px; 上下 20px 左右 30px
margin: 20px 30px 40px; 上 20px 左右 30px 下 40px
margin: 20px 30px 40px 50px; 上 20px 右 30px 下 40px 左 50px

垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

嵌套的盒子外边距塌陷

解决方法：

给父盒子设置边框
给父盒子 overflow:hidden; bfc 格式化上下文

行内元素可以定义左右的内外边距，上下会被忽略掉。

# 浮动布局

float: left | right

特点：

元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用 display: inline-block;）

浮动的作用

文本绕图
制作导航
网页布局

# 清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

清除浮动不是不用浮动，清除浮动产生的不利影响。
清除浮动的方法：clear: left | right | both
工作里用的最多的是 clear:both;

# 额外标签法

在最后一个浮动元素后添加标签，。


<div class="main">

    <div clss="content"> </div>
    <div class="sidebar"> </div>
    <!-- 额外标签法 -->
    <div style="clear:both;"> </div>
</div>

1
2
3
4
5
6
7
8

# 给父集元素使用 overflow:hidden;

如果有内容出了盒子，不能使用这个方法。

20190325154525793_1619

# 伪元素清除浮动推荐使用

20190325154504993_32205

# 定位

定位方向：left | right | top | bottom

position:static; 静态定位。默认值，就是文档流。

# 绝对定位

position:absolute;

特点：

元素使用绝对定位之后不占据原来的位置（脱标）
元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用 display:inline-block;）

# 相对定位

position: relative;

特点：

使用相对定位，位置从自身出发。
还占据原来的位置。
子绝父相（父元素相对定位，子元素绝对定位）
行内元素使用相对定位不能转行内块

# 固定定位

Position:fixed;

特点：

固定定位之后，不占据原来的位置（脱标）
元素使用固定定位之后，位置从浏览器出发。
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用 display:inline-block;）

PS: 文档流，元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

# 居中显示

margin:0 auto; 只能让标准流的盒子居中对齐。

定位的盒子居中：先左右走父元素盒子的一半 50%，在向左走子盒子的一半 (margin-left: 负值）

20190325160924255_25795

# 标签包含规范

div 可以包含所有的标签。
p 标签不能包含 div h1 等标签。
h1 可以包含 p，div 等标签。
行内元素尽量包含行内元素，行内元素不要包含块元素。

# 可见性

overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素隐藏之后还占据原来的位置。
display:none; 隐藏元素隐藏之后不占据原来的位置。
display:block; 元素可见
display:none 和 display:block 常配合 js 使用。

← HTML基础 JavaScript-基础→

CSS基础

# 内嵌式写法

# 外链式写法

# 行内样式表

# 三种写法特点

# 基础选择器

# 标签选择器

# 颜色的显示方式

# 类选择器

# ID 选择器

# 通配符选择器

# 复合选择器

# 交集选择器

# 后代选择器

# 子代选择器

# 并集选择器

# 文本元素

# 属性

# 文本属性连写

# CSS 三大特性

# 层叠性

# 继承性

# 优先级

# 链接伪类

# 背景属性

# 行高

# 行内元素

# 块级元素

# 行内块元素（内联元素）

# 块元素和行内元素转换

# 盒子模型

# 边框 border

# 内边距

# 内边距撑大盒子的问题

# 外边距

# 浮动布局

# 清除浮动

# 额外标签法

# 给父集元素使用 overflow:hidden;

# 伪元素清除浮动 推荐使用

# 定位

# 绝对定位

# 相对定位

# 固定定位

# 居中显示

# 标签包含规范

# 可见性

# 伪元素清除浮动推荐使用