跟着老侯玩编程
  • Java
  • 基础进阶
舞动的代码
2022-06-08

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

特点：

  1. 和其他元素都在一行

  2. 高度、宽度以及内边距都是不可控的

  3. 宽高就是内容的高度，不可以改变

  4. 行内元素只能行内元素，不能包含块级元素


<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

# 块级元素

块级大多为结构性标记

特点：

  1. 总是从新的一行开始

  2. 高度、宽度都是可控的

  3. 宽度没有设置时，默认为 100%

  4. 块级元素中可以包含块级元素和行内元素


  <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-基础

← JavaScript-基础→

Theme by Vdoing | Copyright © 2013-2022 冀ICP备16006233号-1
×