样式定义

行内样式

行内样式就是写在html 标签内的样式,又称(内联样式)。

语法!

1
<h1 style="color: red;">行内样式</h1>

内部样式

内部样式就是写在html被head标签内所包裹中的样式,又称(内部样式)。

语法!

1
2
3
4
5
6
7
8
9
<head>
    <meta charset="UTF-8"/>
    <title><</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

外部样式

外部样式就是在外部文件中所定义的样式,并通过link标签在当前页面中引入后放在head标签内使用,又称(外部样式)。

语法!

这里是style.css文件!

1
2
3
h1{
    color: red;
}

这里是在html文件中通过link标签引入外部样式!

1
2
3
4
5
6
7
8
<head>
    <meta charset="UTF-8"/>
    <title><</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>外部样式范例</h1>
</body>

样式表优先级

  • 优先级规则 内联样式 > 内部样式 > 外部样式
    1. 内部样式和外部样式优先级相同,且后者 会 覆盖前者!
    2. 行内样式优先级最高!

选择器

基本选择器

选择器用法
id选择器#myid
类选择器.myclassname
标签选择器div,h1,p
相邻选择器h1+p
子选择器ul > li
后代选择器li a
通配符选择器*
属性选择器a[rel="external"]
伪类选择器a:hover, li:nth-child

伪类选择器

伪类选择器用法
:link选中未访问过的链接
:visited选中已访问过的链接
:active选中被激活的链接
:hover选中鼠标指针位于其上方的链接
:focus选中获得点的元素
:lang()根据元素的 lang 属性的值来选择元素
:enabled选择可点击的元素
:disabled选择不可点击的元素
:checked选择被选中的元素
:root选择文档的根元素
:target选择当前活动的 #id 元素
:nth-child()根据元素在父元素中的位置来选择元素
:nth-last-child()根据元素在父元素中的位置来选择元素
:nth-of-type()根据元素在父元素中的位置来选择元素
:nth-last-of-type()根据元素在父元素中的位置来选择元素
:first-child选择父元素的第一个子元素
:last-child选择父元素的最后一个子元素
:first-of-type选择父元素的第一个同类子元素
:last-of-type选择父元素的最后一个同类子元素
:only-child选择父元素中唯一的子元素
:only-of-type选择父元素中唯一的同
:not()否定伪类
:empty选择没有子元素的元素
:is将对应的匹配规则应用于多个元素（最高优先级）
:where将对应的匹配规则应用于多个元素（最低优先级）
:has匹配包含对应子元素的父级元素

伪元素选择器

伪元素选择器用法
::first-line选中元素的第一行
::first-letter选中元素的首字母
::before在元素之前插入内容
::after在元素之后插入内容
::section选中文本的颜色
::placeholder选中input placeholder

伪类选择器用法

:nth-child
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* :nth-child(2)选取第几个标签，“2可以是你想要的数字” */
.demo01 li:nth-child(2){background:#090}

/* :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同 */
.demo01 li:nth-child(n+4){background:#090}

/* :nth-child(-n+4)选取小于等于4标签 */
.demo01 li:nth-child(-n+4){background:#090}

/* :nth-child(2n)选取偶数标签，2n也可以是even */
.demo01 li:nth-child(2n){background:#090}

/* :nth-child(2n-1)选取奇数标签，2n-1可以是odd */
.demo01 li:nth-child(2n-1){background:#090}

/* :nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一” */
.demo01 li:nth-child(3n+1){background:#090}

/* :last-child选取最后一个标签 */
.demo01 li:last-child{background:#090}

/* :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 */

选择器优先级

简单选择器优先级

这个(1，0，0) 代表权重，最终会通过一一比对选择权重较高的选择器来确定最终的样式! 如果其中一位较高，则后边不在进行比对!

!important > 行内样式 > ID选择器(1,0,0) > 类选择器(0,1,0) > 标签选择器(0,0,1) > 通配符选择器(0,0,0)

复杂选择器优先级

  • 选择器权重
  • 格式(a,b,c)
  • a: ID选择器的个数
  • b: 类 伪类 属性选 择器的个数
  • c: 元素 伪元素 选择器的个数

注意: 有权重看权重 没有权重 后来者居上!

CSS三大特性

  1. 层叠性

    如果发生样式冲突，就会根据选择器优先级进行样式层叠(覆盖)!

  2. 继承性

    • 元素会自动拥有其父元素的样式 祖先元素上所设置的某些样式!
    • 优先继承离的比较近的元素!

    • text-?? font-?? line-?? color…

  3. 优先级

    • !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符(*)选择器 > 继承的样式
    • 复杂优先级, 需要计算权重!

并集选择器 不参与权重计算!

1
2
3
4
5
6
7
8
/* (0,0,2) */
div>span{
    color: red;
}
/* (0,0,1) */
div,span{
    color: red;
}

CSS样式属性

颜色

rgb() rgba() hsl() hsla() color() transparent inherit

  • rgb(255,0,0) : 红 绿 蓝
  • rgba(255,0,0,0.5): 红 绿 蓝 透明度(0 - 1)
  • hsl(): 色相 饱和度 亮度
  • hsla(): 色相 饱和度 亮度 透明度
  • transparent : 透明
  • inherit: 继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 颜色名 */
color: red;
/* rgb red*/
color: rgb(255,0,0);
/* rgba red 透明度一半 */
color: rgba(255,0,0,0.5);
/* hsl red 0deg 色相 具体值为 色相环角度 */
color: hsl(0deg,100%,50%);
/* hsla red 透明度一半 */
color: hsla(0,100%,50%,0.5);
/* 透明 */
color: transparent;
/* 16进制 */
color: #ff0000;

16进制

ff0000 16进制 每两位表示一个值,最小值为00 最大值为ff! ff->red 00 -> green 00 -> blue!

值越大， 颜色值越亮，相反则越暗!

以下为16进制表示法 0 - f!

00 01 02 03 04...09 0a 0b 0c 0d 0e 0f
10 11 12 13 14...19 1a 1b 1c 1d 1e 1f

字体

属性描述用法
font-size字体大小font-size: 14px
font-weight字体粗细font-weight: bold(加粗)
font-style字体风格font-style: italic(斜体)
font-family字体系列font-family: "微软雅黑"
line-height行高line-height: 18px (上下间距)
text-align文本对齐方式text-align: center / left / right
text-decoration文本修饰text-decoration: line-through
text-indent首行缩进text-indent: 2
letter-spacing字符间距letter-spacing: 3
word-spacing单词间距word-spacing: 2
text-transform文本转换text-transform: uppercase(大写) / lowercase(小写) / capitalize
text-overflow文本溢出text-overflow: clip(裁剪隐藏) / ellipsis(溢出省略号)
white-space空白处理white-space: nowrap(不换行)
vertical-align垂直对齐vertical-align: baseline / top / text-top / middle / bottom / text-bottom
text-shadow文字阴影text-shadow: 0(x),0(y),15px(模糊程度范围),0.8(透明)
text-wrap文本换行text-wrap: normal / none / unrestricted / suppress
word-break单词断开word-break: normal / break-all / keep-all
word-wrap单词换行word-wrap: normal / break-word

字体系列

font-family

font-family: "微软雅黑", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

1
font-family: "微软雅黑","宋体", "楷体", "华文彩云";

微软雅黑 若没有，者取值为宋体 若没有，则取值为楷体 若没有，则取值为华文彩云！

字体风格

font-style

font-style: normal(默认) / italic(斜体) / oblique(倾斜)

字体粗细

font-weight

font-weight: normal(默认) / bold(加粗) / bolder(更加粗) / lighter(更加细)

字体复合属性

1
2
/* 字体大小 字体粗细 字体风格 字体系列 */
font: 14px bold italic "微软雅黑", "宋体", "楷体", "华文彩云";

字体间距

letter-spacing

letter-spacing: normal(默认) / 正数(增加间距) / 负数(减少间距)

文本修饰

text-decoration

text-decoration: none(默认) / underline(下划线) / overline(上划线) / line-through(删除线)

文本缩紧

text-indent

text-indent: 2(首行缩进)

字体行高

line-height

line-height: normal(默认) / 正数(增加行高) / 负数(减少行高)

文本对齐_ 水平

text-align

text-align: left(默认) / right(右对齐) / center(居中)

文本对齐_垂直

  1. 居中对齐: 对于单行文本通过height=line-height即可!
  2. 底部对齐: line-height=(height x 2) - font-size

垂直对齐

vertical-align

vertical-align: baseline(默认) / top(顶部对齐) / middle(居中对齐) / bottom(底部对齐)
作用: 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式!

注意: vertical-align 不可以控制块元素!

文本阴影

text-shadow

text-shadow: 0(x),0(y),15px(模糊程度范围),0.8(透明)

列表属性

属性描述用法
list-style-type列表项标记list-style-type: none(无标记) / disc(实心圆) / circle(空心圆) / square(实心方块)
list-style-image列表项标记list-style-image: url(图片地址)
list-style-position列表符号位置list-style-position: inside(里) / outside(外)
list-style复合属性list-style: none inside url(图片地址);

边框属性

属性功能属性值
border-width边框宽度CSS长度值
border-style边框样式none(无边框) / dotted(点线) / dashed(虚线) / solid(实线) / double(双线) / groove(3D凹槽) / ridge(3D凸槽) / inset(3D内凹) / outset(3D外凸)
border-color边框颜色颜色值
border复合属性border: 1px solid #000;
border-radius边框圆角CSS长度值
border-top-left-radius左上角圆角CSS长度值
border-top-right-radius右上角圆角CSS长度值
border-bottom-left-radius左下角圆角CSS长度值

table属性

属性功能属性值
border-collapse边框合并collapse(默认) / separate(不合并)
border-spacing边框间隔CSS长度值
caption-side标题位置top(默认) / bottom
empty-cells空单元格show(默认) / hide
table-layout控制表格的列宽auto(默认) / fixed

背景属性

属性功能属性值
background-color背景颜色颜色值
background-image背景图片url(图片地址)
background-repeat背景重复repeat(默认) / repeat-x(横向) / repeat-y(纵向) / no-repeat(不重复)
background-position背景定位left(默认) / center / right / top / bottom / x轴坐标 / y轴坐标
background-attachment背景固定scroll(默认) / fixed(固定)
background-size背景大小contain(包含) / cover(覆盖)
background复合属性background: url(图片地址) no-repeat center center;
示例
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
/* 背景图片 背景大小 背景定位 背景固定 */
background: url(bg.jpg) no-repeat center center / contain fixed;

/* 关键字 */
background-size: cover;
background-size: contain;

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto  ;   /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

鼠标属性

属性功能属性值
cursor鼠标指针auto(默认) / pointer(手型) / move(移动) / help(帮助) / wait(等待) / text(文本) / crosshair(十字) / e-resize(向右) / ne-resize(向右上) / nw-resize(向左上) / n-resize(向上)

自定义鼠标样式

1
2
3
4
5
/* 鼠标指针 */
cursor: pointer;

/* 自定义鼠标样式 */
cursor: url(hand.png), pointer;

显示属性

属性功能属性值
display元素显示none(默认) / block(块级元素) / inline(行内元素) / inline-block(行内块级元素) / list-item(列表项) / table(表格) / table-row-group(表格行组) / table-header-group(表格头组) / table-footer-group()

display

1
2
3
4
5
6
7
8
9
10
11
12
/* 隐藏元素 */
display: none;

/* 显示元素 */
display: block;
display: inline;
display: inline-block;
display: list-item;
display: table;
display: table-row-group;
display: table-header-group;
display: table-footer-group;

长度单位

单位含义
px像素
em相对于当前元素字体大小(当前元素(font-size)的倍数)
rem相对于根(html)元素字体大小
vh相对于当前视口高度
vw相对于当前视口宽度
vmin取vh和vw的最小值

em相对单位

em相对于当前父元素以其父元素字体大小(当前元素或父元素``(font-size)的倍数)，如果父元素没有设置字体大小,则向上找,都没有就使用浏览器默认的16px!

rem相对单位

rem相对于根元素(html)字体大小(html元素的font-size),如果根元素没有设置字体大小,则使用浏览器默认的16px`!

vh和vw相对单位

vh和vw相对于当前视口的高度和宽度,如果当前视口

vmin相对单位

vmin取vh和vw的最小值

%百分比单位

%百分比单位相对于父元素的宽度,如果父元素没有设置宽度,则使用浏览器默认的100%!

盒子模型

盒子模型的组成

组成含义
外边距外边距是指元素与元素周围的空白区域
边框边框是指元素的边线，可看作是外边距的外边
内边距内边距是指元素内容与元素边框之间的空白区域
内容内容是指元素的内容区域，即元素中所包含的文本和图片等
宽度宽度是指元素内容区域的宽度，即内容区域的宽度
高度高度是指元素内容区域的高度，即内容区域的高度

外边距

外边距含义
margin外边距是指元素与元素周围的空白区域
margin-top元素上外边距
margin-right元素右外边距
margin-bottom元素下外边距
margin-left元素左外边距

注意事项

  1. 子元素的(margin)外边距是参考父元素的内容区域!
  2. 对于行内元素设置上下margin是无效的，但是设置左右margin是有效的!应该是vertical-algin: baseline所影响的!

margin问题

  1. margin塌陷
    • 父元素内的第一个子元素和最后一个子元素设置上下外边距时，会作用在父元素上!
    • 可以通过border: 1px solid red; 或者 padding: 1px; 来处理此问题!会影响``父元素盒子的大小!
    • overflow: hidden;也可以处理坍塌问题，这种方案不影响 父元素盒子大小!
  2. margin合并
    • 上元素设置margin-bottom 和 下面元素设置margin-top时, 所产生的合并问题!
    • 这种现象只有上下垂直方向的元素会出现该问题,水平方向不影响!
margin塌陷问题示例图


margin合并问题示例图

边框

边框含义
border边框是指元素的边线，可看作是外边距的外边
border-width边框宽度
border-style边框样式
border-color边框颜色
border-top元素上边框
border-right元素右边框
border-bottom元素下边框
border-left元素左边框

内边距

内边距含义
padding内边距是指元素内容与元素边框之间的空白区域
padding-top元素上内边距
padding-right元素右内边距
padding-bottom元素下内边距
padding-left元素左内边距

宽度

宽度含义
width宽度是指元素内容区域的宽度，即内容区域的宽度
min-width最小宽度
max-width最大宽度

默认宽度

所谓的默认宽度,就是不设置width属性时,元素所默认的宽度!
总宽度 = 父的content-box宽度 - 自身左右的margin!
内容区的宽度 = 父的content-box 宽度 - 自身左右的padding!
宽度 = 内容区的宽度 - 自身左右的margin - 自身左右的border - 自身左右的padding!

高度

高度含义
height高度是指元素内容区域的高度，即内容区域的高度
min-height最小高度
max-height最大高度

box-sizing

属性功能属性值
box-sizing盒子模型`content-box(默认)
box-sizing盒子模型border-box

定位

属性功能属性值
position定位static(默认) / relative(相对定位) / absolute(绝对定位) / fixed(固定定位) / sticky(性定位)

static定位

static定位含义
static默认值，没有定位，元素出现在正常的文档流中

relative定位

relative定位含义
relative相对定位，元素相对于正常位置进行定位
top元素向上移动的距离
right元素向右移动的距离
bottom元素向下移动的距离
left元素向左移动的距离

absolute定位

absolute定位含义
absolute绝对定位，元素相对于最近的已定位父元素进行定位
top元素向上移动的距离
right元素向右移动的距离
bottom元素向下移动的距离
left元素向左移动的距离

fixed定位

fixed定位含义
fixed固定定位，元素相对于浏览器窗口进行定位
top元素向上移动的距离
right元素向右移动的距离
bottom元素向下移动的距离
left元素向左移动的距离

sticky定位

sticky定位含义
sticky粘性定位，元素根据用户的滚动行为进行定位
top元素向上移动的距离
right元素向右移动的距离
bottom元素向下移动的距离
left元素向左移动的距离

浮动

属性功能属性值
float浮动none(默认) / left / right

浮动后的影响

  1. 对兄弟元素的影响: 后面兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响!
  2. 对父元素的影响: 不能撑起父元素的高度导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素!

浮动问题示例图



浮动问题处理

  1. 给父元素指定高度height。
  2. 给父元素也设置浮动，带来其他影响。
  3. 给父元素设置overflow:hidden。
  4. 在所有浮动后面添加一个块级元素并设置clear:both;
  5. 在父元素上加上伪类::after 并其设置样式设置为display:block; clear:both;
1
2
3
4
5
.parent::after{
    content: "",
    display: block;
    clear: both;
}

清除浮动

属性功能属性值
clear清除浮动none(默认) / left / right / both

溢出

可以处理子元素超出父元素``宽高范围外的溢出问题! 溢出隐藏`滚动…

属性功能属性值
overflow溢出visible(默认) / hidden / scroll / auto

隐藏元素

display

通过none可以控制元素显示与否，元素隐藏后，不会占具原来位置!

属性功能属性值
display隐藏元素none

visibility

通过show | hidden可以控制元素显示与否，元素隐藏后，会占具原来位置!

属性功能属性值
visibility隐藏元素show / hidden

opacity

通过0-1可以控制元素显示与否，0为隐藏，1为显示，, 元素隐藏后，会占具原来位置!

属性功能属性值
opacity隐藏元素0

样式继承

部分样式会继承，如果当前元素没有设置样式，那么会继承父元素的样式!

会继承的css属性:

字体属性 文本属性(veritcal-align除外) 文字颜色等!

不会继承的css属性:

背景属性 边框属性 内边距属性 宽度属性 高度属性 溢出属性 定位属性 浮动属性 透明度属性

能继承的属性都不影响布局! 都是和盒子模型没有关系的!

行内元素留白问题

  1. 行内元素之间的缝隙

    • 原因是由 写代码时 由回撤之间导致留下来的缝隙!

    • 可以通过在父元素上使用font-size:0px 来处理，但是子元素不设置文字大小的话会默认继承父元素的文字大小，这将会受到font-size:0px的影响!

    • 不过可以单独针对子元素设置文字大小!

  2. img元素底部留白问题

    • 原因是由 vertical-align: baseline 引起, 我们可以改变vertical-align的属性值来解决此问题!

行内元素之间的缝隙示例图

img元素底部留白问题示例图