1114 CSS基础

目录

• CSS入门
  • 标签设置长宽
  • 1.字体样式
    • 1.1 字体类型 font-family
    • 1.2 字体大小 font-size
    • 1.3 字体颜色 color
    • 1.4 字体粗细 font-weight
    • 1.5 文本斜体 font-style
  • 2.文本样式
    • 2.1 文本对齐 text-align
    • 2.2 文字装饰 text-decoration
    • 2.3 首行缩进 text-indent
  • 4.背景样式
    • 4.1 背景颜色 background-color
    • 4.2 背景图片 background-image
    • 4.3 背景重复 background-repeat
    • 4.4 背景位置 background-position
      • 1、取值为“像素值”
      • 2、取值为“关键字”
    • 4.5 背景固定样式 background-attachment
  • 5.边框属性
    • 5.1 边框样式 border
      • 1.border-width 宽度
      • 2.border-style 样式
      • 3.border-color 颜色
      • 4.简写
    • 5.2 边框局部样式 border局部
      • 1. 上边框border-top
      • 2. 下边框border-bottom
      • 3. 左边框border-left
      • 4. 右边框border-right
    • 5.3 圆,圆角边框 border-radius
  • 6.display 显示方式
    • 定义
    • 使用
    • 同行显示display: inline
    • 异行显示display: block;
    • 兼并display: inline-block;
    • 标签特性
  • 7.盒子模型
    • 7.1 margin: 外边距
    • 7.2 border: 边框
    • 7.3 padding: 内边距
    • 7.4 content: 内容区域
  • 8. 浮动布局 float
    • 8.1 三种取值
    • 8.2 clear 清除浮动
  • 9.overflow 溢出
  • 10. 定位布局 position
    • 10.1 静态定位 static
    • 10.2 相对定位 relative
    • 10.3 绝对定位 absolute
    • 10.4 固定定位 fixed
    • 10.5 是否脱离文档流
    • 11. z-index
  • 12.透明度 opacity
• 通用样式

CSS入门

标签设置长宽

块级标签才能设置宽度,内联标签的宽度由内容决定

width属性设置宽
height属性设置高

1.字体样式

font前缀

**表1 CSS文字属性**

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

：除了颜色，其他文字属性都是以“font”前缀开头。font就是“字体”的意思，字体大小就是“font-size”，字体粗细就是“font-weight”等等.

长度单位: px mm cm em rem vw vh in

1.1 字体类型 font-family

font-family可指定多种字体，多个字体将按优先顺序排列，以逗号隔开

    <style>
        p {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>

1.2 字体大小 font-size

语法: font-size：关键字/像素值;

说明: font-size的属性值可以有两种方式，一种是使用关键字，如表1；二是使用像素做单位的数值。

font-size: 36px;

1.3 字体颜色 color

color 被用来设置文字的颜色

1. 颜色英文: red
2. 十六进制值: #06a0de 使用pycharm提供的取色器
3. 一个RGB值: rgb(1,1,1) 三基色元素改变颜色
4. rgba (0,128,128,0.9) 第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

1.4 字体粗细 font-weight

字体粗细和字体大小[font-size]是不一样的，粗细指的是字体的“肥胖”，大小指的是高和宽。大家好好理解一下就很容易区分了。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal，700相当于bold。100~900分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，值越小就表示越细。

对于中文网页来说，一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）

1.5 文本斜体 font-style

font-style属性的取值如下表：

font-style属性值	说明
normal	默认值，正常体
italic	斜体，这是一个属性
oblique	将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique

italic是字体的一个属性，也就是说并非所有字体都有这个italic属性，对于没有italic属性的字体，可以使用oblique将该字体进行倾斜设置。

一般字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有的字体都有这些属性。一些不常用的字体，或许就只有个正常体，如果你用italic发现字体没有斜体效果，这个时候你就要用oblique。

2.文本样式

text前缀

文字样式主要涉及文字本身的型体效果，而段落样式主要涉及多个文字的排版效果，即整个段落的排版效果。文字样式注重个体，段落样式注重整体。

**表1 CSS段落属性**

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距

2.1 文本对齐 text-align

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

    <style>
        p {
            text-align: center;
            text-align: left;
            text-align: right;
        }
    </style>

2.2 文字装饰 text-decoration

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

    <style>
        p {
            text-decoration: underline;   下划线
            text-decoration: overline;      上画线
            text-decoration: line-through;  删除线
        }
    </style>

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

2.3 首行缩进 text-indent

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

4.背景样式

**表1 CSS背景图像属性**

属性	说明
background-image	定义背景图像的路径，这样图片才能显示
background-repeat	定义背景图像显示方式，例如纵向平铺、横向平铺
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像是否随内容而滚动

4.1 背景颜色 background-color

background-color: red;

4.2 背景图片 background-image

默认是铺满整个区域

background-image:url("图像地址");

图像地址可以是相对地址，也可以是绝对地址.

4.3 背景重复 background-repeat

使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。

**表1 background-repeat属性取值**

属性值	说明
no-repeat	表示不平铺
repeat	默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x	表示在水平方向（x轴）平铺
repeat-y	表示在垂直方向（y轴）平铺

注意：设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果

    <style>
        div {
            width: 1000px;
            height: 1000px;
            /*background-color: red;*/
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573747556067&di=3d4da0714fc07822563fd99f40626446&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012224238_enfwb.jpg");
            background-repeat: no-repeat;   不平铺
            background-repeat: repeat-x;    x轴平铺
            background-repeat: repeat-y;    y轴平铺
        }
    </style>

4.4 背景位置 background-position

左右上下居中

background-position: center center

    <style>
        div {
            width: 1000px;
            height: 1000px;
            /*background-color: red;*/
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573747556067&di=3d4da0714fc07822563fd99f40626446&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012224238_enfwb.jpg");
            background-repeat: no-repeat;	不平铺
            background-position: center center;	居中
        }
    </style>

背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。

background-positon:像素值/关键字;

语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。

1、取值为“像素值”

取值为像素值时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。例如：“background-position：12px 24px;”表示背景图片距离该元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，这两个取值之间要用空格隔开。

设置值	说明
x（数值）	设置网页的横向位置，单位为px
y（数值）	设置网页的纵向位置，单位为px

2、取值为“关键字”

当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

background-position: left top;
/*background-position: 200px 200px;*/

支持简写

background:#336699 url('1.png') no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

4.5 背景固定样式 background-attachment

使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。

background-attachment:scroll/fixed;

scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。

5.边框属性

任何块元素和行内元素都可以设置边框属性.

要设置一个元素的边框必须要设置以下3个方面：

• （1）边框的宽度；
• （2）边框的外观（实线，或者虚线）；
• （3）边框的颜色；

5.1 边框样式 border

**表1 边框的三个属性**

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

注意，设置一个元素的边框必须要同时设置[border-width]、[border-style]、[border-color]这三个属性，这个元素的边框才能在浏览器显示出来。

1.border-width 宽度

border-width:像素值;

2.border-style 样式

border-style:属性值;

border-style属性取值如下：

属性值	说明
none	无样式
hidden	与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线，双线的宽度等于border-width值

从表中我们可以看出，solid、dashed、dotted和double用于定义基本边框样式，从下图1中，我们可以看出这几个属性值的明显区别。

3.border-color 颜色

border-color:颜色值

4.简写

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

5.2 边框局部样式 border局部

想要对上下左右这四条边进行单独设置时

1. 上边框border-top

`border-top-width``:``1px``;``border-top-style``:``solid``;``border-top-color``:``red``;`

简洁写法：border-top:1px solid red;

2. 下边框border-bottom

`border-bottom-width``:``1px``;``border-bottom-style``:``solid``;``border-bottom-color``:orange;`

简洁写法：border-bottom:1px solid orange;

3. 左边框border-left

`border-left-width``:``1px``;``border-left-style``:``solid``;``border-left-color``:``blue``;`

简洁写法：border-left:1px solid blue;

4. 右边框border-right

`border-right-width``:``1px``;``border-right-style``:``solid``;``border-right-color``:``red``;`

简洁写法：border-right:1px solid green;

无论是边框整体样式，还是局部样式，都需要设置边框的3个属性：宽度、外观、颜色。

    <style>
        p {
            border-top: 10px solid red;
            border-left: 20px dashed darkblue;
            border-right: 30px dotted wheat;
            border-bottom: 40px double greenyellow;
        }
    </style>

5.3 圆,圆角边框 border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

/*左上为第一个角, 顺时针赋值, 不足找对角*/
/*border-radius: 30px 60px;*/
​
/*border-radius: 150px;*/
/*border-radius: 50%;*/
​
/*横向第一个角50px, 第二个角10px, 不足找对角*/
/*纵向均是150px*/
border-radius: 50px 10px / 150px;

6.display 显示方式

定义

用于控制HTML元素的显示效果

使用

通过设置该属性的不同属性值, 使其在页面中的显示方式达到设定的效果,且对于css的样式支持程度也不一样

同行显示display: inline

块级标签变为行内标签,可以同行显示,但没法设置长宽

1. 同行显示
2. 只支持部分css样式(不支持宽高)
3. 宽高由文本内容撑开

异行显示display: block;

将行内参数变为块级标签

1. 异行显示
2. 支持所有css样式
3. 设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)

兼并display: inline-block;

标签即可以设置长宽,又可以在全部在一行显示

1. 同行显示
2. 支持所有css样式
3. 设置了宽高就采用设置的值

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

标签特性

1. 有些标签支持宽高, 有些标签不支持宽高，如span不支持宽高，p，img支持宽高；
2. 有些标签同行显示span img, 有些标签异行显示(独占一行)p；
3. 有些标签有结束标识span、p, 有些标签没有结束标签(省略了)img link。

7.盒子模型

所有的元素都可以看成一个盒子！

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

 每个元素都看成一个盒子，盒子模型是由content（内容）、[padding]（内边距）、[margin])（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。 

**表1 盒子模型4个属性**

属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

7.1 margin: 外边距

1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
            margin-left: -80px;
            margin-top: -80px;
            margin-bottom: 100px;
            margin: 100px 50px;
            起始为上, 顺时针依次赋值, 不足边取对边

7.2 border: 边框

2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
            border-style: solid;
            border-width: 10px;
            border-color: red;
            transparent 透明色
            border: blue dashed 20px;

7.3 padding: 内边距

3.padding: 内边距, 从显示角度控制文本的显示区域
            padding: 10px 0 0 10px;

7.4 content: 内容区域

4.content: 内容区域, 由宽 x 高组成

注意:
1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content

margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

• 提供一个，用于四边；
• 提供两个，第一个用于上－下，第二个用于左－右；
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
• 提供四个参数值，将按上－右－下－左的顺序作用于四边；

8. 浮动布局 float

在 CSS 中，任何元素都可以浮动。 (谷歌浏览器的body默认有8px的外边距)

浮动元素会生成一个块级框，而不论它本身是何种元素。(相当于升维,平面的标签突然变成三维升空了!)

关于浮动的两个特点：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的元素是脱离了正常文档流的(原来的位置会让出来),但浏览器会优先展示文本内容(********)

8.1 三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

浮动的影响

浮动会脱离文档流,使得下方的标签自动补位,升维的同时带来塌陷,解决使用clear清除浮动影响

    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;    左浮动
        }
        .c2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: right;   右浮动
        }
    </style>

8.2 clear 清除浮动

清除浮动的副作用（父标签塌陷问题）主要有三种方式：

• 固定高度
• 伪元素清除法
• overflow:hidden

伪元素清除法（使用较多）：

首先定义风格

.clearfix:after {
  content: "";
  display: block;
  clear: both;		/*左右两边都不能有浮动的元素*/
}

哪个父标签塌陷了 就给谁加clearfix这个类属性值

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

9.overflow 溢出

超出盒子规定的显示区域外的内容的处理方式

/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
​
/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
​
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

• overflow（水平和垂直均设置）
• overflow-x（设置水平方向）
• overflow-y（设置垂直方向）

10. 定位布局 position

CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。

所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后

10.1 静态定位 static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

10.2 相对定位 relative

相对于标签原来的位置 移动

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

10.3 绝对定位 absolute

相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位******,类似于定位一个购物车标签,在购物车的方位设置位置

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

10.4 固定定位 fixed

相对于浏览器窗口 固定在某个位置不动,网站的回到顶部标签

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

    <style>
        body {
            background-color: darkolivegreen;
        }
        .c1 {
            height: 300px;
            width: 300px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
            max-width: 160%;
            max-height: 300%;
            position: relative;
            left: -60px;
        }

    </style>

10.5 是否脱离文档流

脱离文档流：

• 浮动元素　　
• 绝对定位
• 固定定位

不脱离文档流：

• 相对定位

11. z-index

设置对象的层叠顺序,但必须是定位了的元素(xyz轴)

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

d1 {
	z-index=999
}

12.透明度 opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

会更改文字和背景颜色的透明度

通用样式

a标签的 text-decoration: none;
浮动的 clearfix