CSS的概念

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

CSS的好处

功能强大
将内容展示和样式控制分离
*降低耦合度——解耦
*让分工协作更容易
*提高开发效率

CSS的使用：CSS与html结合

一、内部样式

在head标签内，定义style标签，style标签的标签体内容就是CSS代码

<head>

<metacharset="UTF-8">

<style>

div{

color: aqua;

}

</style>

</head>

<body>

<div>hello css</div>

</body>

二、外部样式

定义CSS资源文件
在head标签内，定义link标签，引入外部的资源文件

<linkrel="stylesheet"href="css/a.css">

选择器

格式：
选择器 {
属性名1:属性值1；
属性名2:属性值2；
……
}
选择器：筛选具有相似特征的元素
注意点：每一对属性需要使用；隔开，最后一对属性可以不加

一、基本选择器

id建议唯一，class可重复

1.id选择器

选择具体id属性值的元素

语法：#id属性值{}

2.元素选择器

选择具有相同标签名称的元素

语法：标签名称{}

3.类选择器

选择具有相同的class属性值的元素

语法：.class属性值{}

二、扩展选择器

1.选择所有元素

语法：*{}

2.并集选择器

语法：选择器1，选择器2{}

3.子选择器

语法：选择器1 选择器2{}

筛选选择器1元素下的选择器2元素

4.父选择器

语法：选择器1 > 选择器2{}

筛选选择器2的父元素选择器1

5.属性选择器

语法：元素名称[属性名=“属性值”]{}

选择元素名称，属性名=属性值的元素

适用input标签的type属性

6.伪类选择器

选择一些元素具有的状态

语法：元素：状态{}

例如：<a>状态有

link：初始化的状态

visited：被访问过的状态

active：正在访问的状态

hover：鼠标悬浮的状态

a:link{

color: #1E9FFF;

}

属性

1.字体、文本

font-size：字体大小
color：文本颜色
text-align：对齐方式

style="text-align: center;" //文字居中

line-height：行高

2.背景

background：背景，复合属性

3.边界

border：设置边框，复合属性

style="margin: 4px; border-bottom: dotted #ccc;padding: 4px;"

//外边距为4px，下边界为点缀型，颜色#ccc，内边距为4px

4.尺寸

width：宽度
height：高度

div{

background: url("image/DominusNoob.jpg") no-repeatcenter;

border: 1pxredsolid;

width: 1000px;

height: 1000px;

}

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

5.盒子模型：控制布局

padding：内边距

内边距会影响整个盒子的大小。因为内容是固定的，修改内边距（内容与边界的距离），等于修改盒子大小
box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小

.div1{

width: 200px;

height: 200px;

border: 1pxredsolid;

padding: 50px;

box-sizing: border-box;

}

padding: 8px 16px; //上下的内边距是8px，左右的内边距是16px

margin：外边距

margin:20px 上下左右外边距都是20px

margin: 10px 0px; //上下10px，左右0px

float：浮动

盒子默认换行，若想让盒子不换行，就添加浮动属性

非盒子模型的标签

经常会发现正常div的属性在a标签上或者p标签上都不管用，这是因为a标签和p标签都不是盒子模型。

例如：

这是有效的距离，但是

这就是无效的距离

原因很简单，margin是针对盒子的，a标签和p标签都不是盒子模型，但是可以把他们变成盒子模型

style="display:block"

变成块级元素后，就成为盒子模型了，就可以设置margin等属性了。

7. position

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

注意：

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

static

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

relative

相对定位

position: relative; 的元素相对于其正常位置定位

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

fixed

固定定位

position: fixed; 的元素是相对于窗口定位的（固定的显示在屏幕上），这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

absolute

绝对定位

position: absolute; 的元素相对于 static 定位以外的第一个父元素进行定位

它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用

注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

style="position: absolute;right: 10px;" //绝对定位，右边距父元素10px

8. z-index

zIndex 属性设置元素的堆叠顺序。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

style="position: absolute;right: 10px;" //绝对定位，右边只剩下10px

style="position: fixed;width: 100%;z-index: 999;" //固定定位，宽度占窗口100%，

9. display

display 属性设置元素如何显示

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

css快速入门