CSS基础

# CSS介绍

# 介绍

CSS即层叠样式表，用于给HTML标签添加样式，使其变得更加美观。

# 注释语法

css样式代码一般杂乱且多，所以我们在写css样式时，通常会使用注释来划定样式区域，方便后续查找。

比如：

/* 这是用于首页的样式 */
/* 顶部导航条样式 */
... ...
/* 左侧菜单栏样式 */
... ...

1
2
3
4
5

单行注释

/* 单行注释 */

多行注释

/*
多行注释1
多行注释2
... ...
*/

1
2
3
4
5

# 语法结构

选择器 {
    属性1: 值1;
    属性2: 值2;
    ... ...
    }

1
2
3
4
5

# 引用方式

第一种方式，head内style标签内部直接书写。

<style>
    h1 {color: burlywood;}
</style>

1
2
3

第二种方式，link标签引入外部css文件，最正规的方式。其中href可以是本地路径，也可以是远程Url。

<link rel="stylesheet" href="mystyle.css">

第三种方式，行内样式，直接写在标签内部，一般不使用。

<h1 style="color: green">Hello</h1>

# CSS选择器

# 基本选择器

id选择器、类选择器、标签选择器都会对查找到的标签，以及其嵌套的标签添加样式。

# id选择器 (常用)

#[id值] {...}

通过标签的id找到标签，对其添加样式，每个标签的id都应当是唯一的。

例如：

<style>
    #d1 {color: greenyellow;}
</style>

<!-- 可以选择到以下标签 -->

<div id="d1"><p>test1</p></div>

1
2
3
4
5
6
7

# 类选择器 (常用)

.[类名] {...}

通过class名找到引用该class的标签，对其添加样式，一个class可以被多个标签引用。

例如：

<style>
    .cls {color: greenyellow;}
</style>

<!-- 可以选择到以下标签 -->

<div class="cls1"><p>test1</p></div>
<p class="cls1">test2</p>

1
2
3
4
5
6
7
8

# 标签选择器

[标签名] {...} 又称元素选择器，会找到所有的指定类型标签，对其添加样式。

例如：

<style>
    div {color: greenyellow;}
</style>

<!-- 可以选择到以下标签 -->

<div><p>test1</p></div>
<div><p>test2</p></div>

1
2
3
4
5
6
7
8

# 通用选择器

* {...} 会对所有的标签添加样式，所以基本不会用。

例如：

<style>
    * {color: greenyellow;}
</style>

<!-- 可以选择到以下标签 -->

<h1>test1</h1>
<p>test2</p>

1
2
3
4
5
6
7
8

# 组合选择器

在前端，我们可以用亲戚关系来表述标签的嵌套关系。

以下的标签B，都可以使用*通配符匹配。

# 后代选择器

[标签A] [后代标签B] {...}

标签之间的空格，就是后代选择器。找到所有的指定[标签A]，对其中嵌套的所有[儿子标签B]添加样式，包括其下n级。

例如：

div span {color: greenyellow;}

<!-- 可以选择到以下所有的<span>标签 -->

<div>
    <p>div p</p>
    <p>div p
        <span>div p span</span>
    </p>
    <span>div span</span>
</div>

1
2
3
4
5
6
7
8
9
10
11

# 儿子选择器 (子元素选择器)

[标签A]>[儿子标签B] {...}

找到所有的指定[标签A]，对其往下嵌套一层的[儿子标签B]添加样式。

例如：

div>span {color: greenyellow;}

<div>div
    <p>div p
      <!-- 该<span>不会被选择 -->
      <span>div p span</span>
    </p>
    <!-- 只会选择到向下嵌套一层的<span>标签 -->
    <span>div span</span>
    <span>div span</span>
</div>

1
2
3
4
5
6
7
8
9
10
11

# 相邻选择器

[标签A]+[相邻标签B] {...}

找到所有的指定[标签A]，并对其同级且紧挨着的下面那个[相邻标签B]添加样式。

例如：

div+p {color: greenyellow;}

<div>div</div>
<!-- 会选择到该<p>标签 -->
<p>test</p>
<div>div</div>
<!-- 会选择到该<p>标签 -->
<p>test</p>

1
2
3
4
5
6
7
8

# 弟弟选择器 (普通兄弟选择器)

[标签A]~[弟弟标签B] {...}

找到所有的指定[标签A]，并对其后面所有同级别的[弟弟标签B]添加样式。

例如：

div~p {color: greenyellow;}

<!-- 会选择到<div>后面所有同级的<p>标签 -->

<div>div</div>
<p>test1</p>
<h1>test2</h1>
<p>test3</p>

1
2
3
4
5
6
7
8

# 属性选择器

[属性名] {...}

含有某个属性，找到所有含有该指定属性的标签，对其添加样式。

例如：

[attr] {color: greenyellow;}

<!-- 会选择到所有包含attr属性的标签 -->

<p attr="test">test1</p>
<p>test2</p>
<p attr="test">test3</p>

1
2
3
4
5
6
7

[属性名="值"] {...}

含有某个属性并且有某个值，找到所有含有指定属性="指定值"的标签，对其添加样式。

例如：

[attr="value"] {color: greenyellow;}

<!-- 会选择到所有包含attr属性且其值为"value"的标签 -->

<p attr="value">test1</p>
<p>test2</p>
<p attr="value">test3</p>

1
2
3
4
5
6
7

标签名[属性名="值"] {...}

含有某个属性并且有某个值的某个标签，找到所有含有指定属性="指定值"的指定标签，对其添加样式。

例如：

h3[attr="value"] {color: greenyellow;}

<!-- 会选择到所有包含attr属性且其值为"value"的h3标签 -->

<p attr="value">test1</p>
<h3 attr="value">test2</h3>
<p attr="value">test3</p>
<h3 attr="value">test3</h3>

1
2
3
4
5
6
7
8

# 分组选择器

[标签名1], [标签名2], [标签名3]... {...}

可以将任意多个标签分组在一起，然后一起添加样式。

例如：

h3, p {color: greenyellow;}

<!-- 同等于 -->

h3 {color: greenyellow;}
p {color: greenyellow;}

<!-- 会选择到所有h3、p标签 -->

<h3>test1</h3>
<h4>test2</h4>
<div>
    <p>test3</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 嵌套选择器

[选择器1][选择器2][选择器3]... {...}

多个选择器之间可以混合嵌套使用。

例如：

<!-- 
"#testid.c1" 表示id为testid且class为c1的标签
"," 表示分组
"div .c2" 表示div下的有c2类的标签
"p.c3" 表示p标签带c2类的
-->
#testid.c1, div .c2, p.c3 {color: greenyellow;}

<!-- 会选择到以下标签 -->

<h3 id="testid" class="c1">test1</h3>
<div>
    <p class="c2">test3</p>
</div>
<p class="c3">test3</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 伪类选择器

[标签名]:[伪类] {...}

可以控制标签特殊状态的样式，以下是部分伪类。

anchor伪类

a:link {...} 访问之前的状态。

a:hover {...} 鼠标悬浮状态，其他标签也可以使用。

a:active {...} 鼠标点击标签不松开的状态。

a:visited {...} 访问之后的状态。

注意：如果a标签的四种状态都要设置，则顺序必须是如上顺序。

一般情况下只需要设置a标签的默认效果和鼠标划过的效果：a{}、a:hover{}。

input框

input:focus {...} input框获取焦点的状态，即鼠标点中input框。

# 伪元素选择器

[标签]:first-letter 控制指定标签的文本的首字母样式。

[标签]:before {content: "...";} 在指定标签的文本开头添加指定文本、与该文本的样式。

[标签]:after {content: "...";} 在指定标签的文本结尾添加指定文本、与该文本的样式。

before和after通常是用来清除浮动带来的影响也就是父标签塌陷的问题。

# 选择器优先级

# CSS优先级规则

选择器的权重值不同时，权重值高的优先。
选择器的权重值相同时，后定义的规则优先。
样式属性后面加!importand时，该属性无条件绝对优先。

如：p {color : red !important;}

# 选择器权重值

权重值1000：行内样式。

权重值100：id选择器。

权重值10：类选择器、属性选择器、伪类选择器。

权重值1：标签选择器、伪元素选择器。

# CSS属性

属性定义在选择器后的"{}"中，使用";"分隔多个属性。

# CSS属性简写

{属性名前缀: 属性值1 属性值2 属性值3...}

当属性前缀相同但后缀不同的属性有多个时，我们一般可以使用简写的方式。

属性名带"-"的属性一般都支持简写，可以属性前缀相同的各属性的值全部写在"属性名前缀 + :"后面。

例如：

{
background-color: green;
background-repeat: no-repeat;
background-image: url("images/test.jpg");
background-position: center center;
background: green no-repeat url("images/test.jpg") center center;
}

/* 可以简写为： */
{
background: green no-repeat url("images/test.jpg") center center;
}

1
2
3
4
5
6
7
8
9
10
11
12

# 标签长宽属性

块级标签才能设置长宽，行级标签无法设置长宽

长度：height: 像素值px

宽度：width: 像素值px

# 背景属性

背景颜色属性：background-color: 颜色值

颜色值可以是颜色名、RGB代码、十六进制值，默认背景颜色为透明 (transparent)。

背景图片属性：background-image: url("图片路径")

图片路径可以是本地图片路径，也可以是网络图片路径。

背景图片平铺属性：background-repeat: 平铺方式

指定图片大小不足标签大小时，图片的平铺方式。

平铺方式包括：

repeat：重复平铺图片 (默认)。

no-repeat：不重复平铺图片。

x-repeat：仅x横轴方向重复平铺图片。

y-repeat：仅y纵轴方向重复平铺图片。

背景图片位置属性：background-position: x轴位置 y轴位置

轴位置为指定像素，控制图片离标签左边x和顶部y多少像素。只指定一个像素位置时，则y轴默认为居中。

轴位置也可以指定参数：

x轴位置参数：

center - 随浏览器窗口居中。

left - 轴左对齐。

right - 轴右对齐。

y轴位置参数：

center - 随浏览器窗口居中。

top - 顶部对齐。

bottom - 底部对齐。

注意：像素和参数可以混合使用，如{background-position: 100px top;}

背景图片附着属性：background-attachment: 附着方式

附着方式：

fixed：固定背景图片，使背景图片不随滚动条的滚动而滚动。设置该参数后，背景图片的居中对齐方式，会变为随着浏览器窗口而居中。

scroll (默认)：不固定背景图片，使背景图片随滚动条的滚动而滚动。

# 字体属性

字体系列属性：font-family: "字体1", "字体2"...

可以指定多个字体，前面的字体如果不存在或不生效，就会用后面的字体。

字体大小属性：font-size: 像素值px

字体粗细属性：font-weight: 粗细度

粗细度可以为数值或指定参数，数值只能是100-900之间。

粗细参数：

normal - 默认正常粗细。

bold - 粗体。

bolder - 比粗体更加粗。

lighter - 比正常字体细。

inherit - 继承父标签的粗细度。

# 文本属性

文本颜色：color: 颜色值

颜色值可以是如下方式：

颜色名，如：green、red...

RGB代码，如：rgb(255, 255, 255)，值分别为红、绿、蓝的代码(0-255)。

RGBA代码，如：rgba(255, 255, 255, 0.9)，值分别为红、绿、蓝的代码(0-255)、透明度(0-1)。

十六进制值，如：#FFFFFF。

文本对齐属性：text-align: 对齐方式

对齐方式：

center - 居中对齐。

left - 左对齐 (默认)。

right - 右对齐。

justify - 两端对齐，可以让大段的文本看起来比较整齐。

文本装饰属性：text-decoration: 装饰方式

装饰方式：

underline - 下划线

overline - 上划线

line-through - 删除线

none - 无装饰，可以去掉a标签自带的下划线。

文本缩进属性：text-indent: 缩进像素px

字体大小*2为两格字。

# 边框属性

边框宽度：border-width: 像素值px

边框样式：border-style: 样式名

样式名：

solid - 实线。

dotted - 虚线。

边框颜色：border-color: 颜色值

边框半径：border-radius: 半径值

如果需要圆，半径值直接写50%即可，长宽一样就是圆，不一样就是椭圆。

例如：

.circle { height: 200px; width: 200px; border-width: 1px; border-style: solid; border-radius: 50%; }

指定边框单侧属性：border-[left/right/top/bottom]-[属性]

例如：border-left-width: 5px

# display属性

控制标签展示方式：display: 展示方式

展示方式：

none - 不展示标签，并且不占有原来的位置。

inline - 可以使块级标签拥有行级标签的特点，不独占一行，只占文本大小，并且无法设置长宽。

block - 可以使行级标签拥有块级标签的特点，独占一行，可以设置长宽。

inline-block - 使标签既可以在一行显示，又可以设置长宽。

# visibility属性

控制标签是否可见：visibility: hidden

原来的位置仍然会占有，hidden为不可见，默认为可见。

# 盒子模型

# 介绍

所有标签都可以看作一个盒子，封装周围的标签。

F12开发者模式选中标签时，右下角可以看见模型。

它包括：

Margin - 外边框，盒子与盒子之间的距离。

Border - 边框，盒子的厚度。

Padding - 内边距，盒子的内容到盒子之间的距离。

Content - 内容，盒子的内容。

# margin属性

控制盒子与盒子之间的距离：margin-[left/right/top/bottom]: 像素值px

margin属性简写：margin: 像素值px 像素值px...

像素值px有一个时：

控制的是上下左右整个外边框。

像素值px有两个时：

第一个控制：上下

第二个控制：左右

像素值px有三个时：

第一个控制：上

第二个控制：左右

第三个控制：下

像素值px有四个时：

第一个控制：上

第二个控制：右

第三个控制：下

第四个控制：左

像素值为："0 auto" 时，就是水平居中。

注意：

浏览器会自带8px的margin，一般情况下，我们会先将浏览器body自带的margin清除。

不同标签(盒子与盒子之间) 的margin的值不叠加，哪个值大取哪个。

# padding属性

控制的是内容到盒子之间的距离：{margin-[left/right/top/bottom]: 像素值px

padding属性简写：padding: 像素值px 像素值px...

值数量不同的作用，参考margin的简写方式。

# 浮动属性

使用浮动：float: 浮动方式

浮动一般用于图像、页面的布局规划等，浮动可以理解为让某个元素脱离标准文档流，漂浮在流之上，和流不是一个层次。

元素浮动之后，其他紧挨着它的元素将围绕它。浮动的元素没有块行级之分，都是按行级的特性，本身多大，浮起来之后就只能占多大。如果你把几个浮动的元素放到一起，它们排列会随着浏览器窗口空间的变化而变化。

浮动方式：

left - 浮动到父标签的左边。

right - 浮动到父标签的右边。

定义元素的哪边不允许出现浮动元素或标准流元素：clear: 清理方式

一般用于解决浮动导致的父标签坍塌，如果指定侧有，则朝指定侧元素的下面放，所以可以用来撑大父标签。

浮动的标签，可能会超出到父标签本身的范围之外，这会对我们布局产生一定的影响，我们可以使用clear属性来解决。

清理方式：

left - 左侧不允许浮动元素。

right - 右侧不允许浮动元素。

both - 左右两侧均不允许浮动元素。

none - 允许浮动元素出现在两侧 (默认值)。

inherit - 规定从父元素继承 clear 属性的值。

固定的解决浮动方式：

定义一个类选择器，使拥有该类的标签添加一个内容，且该内容以块级标签的形式出现，且左右不允许浮动。

这样如果有标签出现塌陷，就直接让该标签继承此处定义的类即可解决。

.clearfix:after { content: ""; display: block; clear: both;

}

# 溢出属性

控制标签溢出方式：overflow: 溢出方式

当标签内容大到超过标签本身范围时，标签内容默认会溢出到标签本身的范围之外。

溢出方式：

visible - 溢出的标签内容仍然可见 (默认)

hidden - 溢出的标签内容不可见

scroll - 给标签添加上下左右滚动条，溢出的文本可以通过滚动滚动条翻看。

auto - 自动决定用何种方式，当标签内容没有超过标签范围时，不添加滚动条。当标签内容超过标签范围时，添加上下滚动条。

# opacity属性

控制标签透明度：opacity: 透明值

rgba只会修改颜色的透明度，而opacity会修改颜色和字体的透明度。

透明值范围是0-1，值越低、越透明。

# z-index属性

控制标签堆叠顺序：z-index: z轴值

z-index属性用于控制标签与标签之间的堆叠顺序，可用于实现模态对话框等。类似于PS的图层，z-index越大显示会越优先。

模态对话框是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应，如：登录框、有确定和取消按钮的对话框等。

z轴值可以为正数或负数，其值越大、则层级越高、也就是显示优先级越高。

# 定位属性

静态位置：position: static

所有标签默认都是静态(static)的，无法修改位置。

相关属性：

left: 像素值px 从左往右定位，如果是负数则是从右往左。

top: 像素值px 从上往下定位，如果是负数则是从下往上。

设置为相对定位方式：position: relative

相对于标签原来的位置做移动，不脱离文档流，原本的位置会保留。

设置为绝对定位方式(常用)：position: absolute

相对于已经定位过的父标签做移动，如果没有父标签则以body为参照，脱离文档流，原本的位置不会保留。

当不知道页面其他标签的位置和参数时，只给一个父标签的产生，就可以基础该标签做定位。

相关属性：

left: 像素值px 从左往右定位，如果是负数则是从右往左。

top: 像素值px 从上往下定位，如果是负数则是从下往上。

设置为固定定位方式(常用)：position: fixed

相对于浏览器窗口进行定位，会固定在浏览器窗口的某个位置，脱离文档流，原本的位置不会保留。

如：窗口右下角固定的回到顶部、侧边栏、广告等。

相关属性：

left: 像素值px 从浏览器左侧开始定位。

right: 像素值px 从浏览器右侧开始定位。

top: 像素值px 从浏览器顶部开始定位。

bottom: 像素值px 从浏览器底部开始定位。

定位居中问题

以上定位方式，都是以标签的左上角顶点为定位点，如果需要以标签的中心为定位点，则还需将标签往左侧和顶部移动标签的一半像素。

如：

{ position: fixed; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }

# 页面搭建基本流程

设计，先设计规划页面布局。

前端，用各类标签划分区域、占位置、填写基本内容，最后再调节CSS样式。

注意：

标签可以先指定class，id可以暂时不管。

class名和id名，应该见名知其意。

无论是HTML或CSS都应该写好注释，以方便后续阅读和查找。

#前端 #CSS

← Html常用标签 JavaScript基础→