跟着老侯玩编程 跟着老侯玩编程
首页
  • 基础语法
  • 网络编程
  • 设计模式
  • 基础篇
  • 进阶篇
  • 框架篇
  • Redis
  • Alibaba
  • 课程目录
  • 码农宝典
留言
首页
  • 基础语法
  • 网络编程
  • 设计模式
  • 基础篇
  • 进阶篇
  • 框架篇
  • Redis
  • Alibaba
  • 课程目录
  • 码农宝典
留言
  • 基础篇

    • 聊聊环境变量
    • 永不过时的HelloWorld
    • 标识符
    • 数据类型
    • 运算符
    • 语句
    • 数组
    • 方法详解
    • 类和对象
    • 类的成员
    • 类的继承
    • 类的形式
    • 封装和多态
    • 接口和Lambda表达式
    • 泛型编程
    • 常用API之函数式接口
    • 常用API
    • 异常机制
    • 多线程
    • 常用API之File类
    • IO流
    • 集合
    • 常用API之Stream流
    • 网络编程
    • 枚举
    • 注解和反射
  • 进阶篇

    • MySQL基础
    • 数据库-JDBC
    • HTML基础
    • CSS基础
      • 内嵌式写法
      • 外链式写法
      • 行内样式表
      • 三种写法特点
      • 基础选择器
        • 标签选择器
        • 颜色的显示方式
        • 类选择器
        • ID 选择器
        • 通配符选择器
      • 复合选择器
        • 交集选择器
        • 后代选择器
        • 子代选择器
        • 并集选择器
      • 文本元素
        • 属性
        • 文本属性连写
      • CSS 三大特性
        • 层叠性
        • 继承性
        • 优先级
      • 链接伪类
      • 背景属性
      • 行高
      • 行内元素
      • 块级元素
      • 行内块元素(内联元素)
      • 块元素和行内元素转换
      • 盒子模型
        • 边框 border
        • 内边距
        • 内边距撑大盒子的问题
        • 外边距
      • 浮动布局
      • 清除浮动
        • 额外标签法
        • 给父集元素使用 overflow:hidden;
        • 伪元素清除浮动 推荐使用
      • 定位
        • 绝对定位
        • 相对定位
        • 固定定位
      • 居中显示
      • 标签包含规范
      • 可见性
    • JavaScript-基础
    • 服务器-Servlet
    • 服务器-Servlet3
    • 动态网页-JSP
    • Ajax
    • 前端项目工程化
    • ECMA2015
    • 模块化规范
  • 框架篇

    • 工具-Maven
    • 框架-MyBatis
    • 框架-Spring
    • 框架-SpringMVC
    • 工具-SpringBoot
    • 工具-Nginx
  • 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-基础

← HTML基础 JavaScript-基础→

Theme by Vdoing | Copyright © 2013-2023 冀ICP备16006233号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×