[PHP知识库]PHP学习之旅-PHP相关基础知识（了解CSS的概念以及相关相关属性）

CSS的概念

层叠样式表

主要控制网页的样式和布局

能够使样式、布局和标记能够分离的语言

CSS的基本语法

选择器{

属性1:值1;

属性2:值2;

....

属性n:值n;

}

注意：

1、每个属性/值一对的后面加上分号

2、web浏览器将会忽略空格和回车

CSS颜色的四种表示方法

color:颜色值，设置字体的颜色

1）、16进制的数字。

2）、英文单词

3）、rgb颜色，格式为：rgb(红，绿，蓝);

4）、rgba颜色，格式：rgba(红，绿，蓝，透明度);

透明度：0~1之间，0为完全透明

CSS的使用方式

内联方式

在HTML的body标签中使用属性来设置CSS样式

格式：

<标签名style="属性1:值1;属性2:值2...."></标签名>

特点：仅作用于本标签

内嵌方式

在head标签中使用<style>标签来设置CSS样式

特点：作用于当前整个页面

格式：

<style>

选择器{

属性1：值1;

属性2:值2;

.........

}

</style>

外部导入方式

格式：

<linkhref=

"文件名.css"type="text/css"rel="stylesheet"/>

href，哪个CSS样式文件。

type，text/css这是一个css文件。

rel，样式表。

特点：

如果整个网站都引入这个CSS文件，文件中的CSS将可以作用到整个网站的页面中。

注意：

1、以上三种方式，当样式冲突时，采用就近原则。如果没有属性冲突的时候将会叠加。

CSS的注释符：

/*注释的内容*/

选择器

HTML选择器(标签选择器)

用HTML标签作为选择器的名称来选择

ID选择器

在HTML标签中定义一个ID属性，然后在CSS中使用#ID属性对应的值

作为选择器来使用。

方式：#ID值

class选择器

在HTML标签中定义一个class属性，然后在css中使用.class属性对应的值来选择。

注意事项：

1、ID选择器在规范中一个ID的值只能在一个页面中出现一次。

2、类选择器，class选择器，因为，他们属于一类。一类中可以包含多个。

3、一个标签可以属于多个类：使用的时候：class="类1类2"

.类名

组合选择器

将所有的选择器一并写出来，一起选择。

选择器1,选择器2,选择器3

层次选择器

后代选择器：EF

选择匹配的F元素，且匹配的F元素被包含在E元素内。

子选择器：E>F

选择匹配的F元素，且匹配的F元素是E元素的子元素。

（这俩是兄弟，必须得是同辈的）

相邻兄弟选择器：E+F

选择匹配的F元素，且匹配的F元素仅位于匹配的E元素的后面。

通用选择器：E~F

选择匹配的F元素，且位于匹配的E元素后面的所有的F元素。

伪类选择器

伪：不存在于HTML中，只有当用户和网站交互时才会体现出来。

E:link

匹配的E元素，且E元素未被访问过。

E:visited

匹配的E元素，且已经被访问过。

E:hover

匹配的E元素，且用户鼠标悬停在上面。

E:active

匹配的E元素，用户点击的那一刹那。

注意：必须遵守一个“爱恨原则”，LoVe/Hate（？）

Link-->visited->hover->active

E:focus：

选择匹配的E元素，当E元素获得焦点时。

E:target：

锚点指向的时候会触发。

background-color:背景颜色

结构性伪类选择器

E:first-child：

选择父元素的第一个子元素且元素为E的元素。

E:last-child：

选择父元素的最后一个子元素且元素为E的元素。

E:nth-child(n)：

选择父元素的第n个子元素且元素为E的元素。

n，表示一个整数，也可以是关键字odd奇数，even偶数。

E:first-of-type：

选择父元素中第一个E元素。

E:last-of-type：

选择父元素最后一个E元素

E:nth-of-type(n)：

选择父元素的第n个E元素。

属性选择器

E[attr]：

选择匹配具有attr属性的E元素。

E[attr='val']：

选择匹配具有attr属性的E元素，且attr属性的值为val

E[attr*='val']：

选择匹配具有attr属性的E元素，且attr属性的值的任意位置出现了val

E[attr^='val']：

选择匹配具有attr属性的E元素，且attr属性的值以val开始。

E[attr$='val']：

选择匹配具有attr属性的E元素，且attr属性的值以val结束。

选择器优先级

计算优先级：

1、一个标签选择器1分

2、一个类选择器10分

3、一个ID选择器100分

4、一个内联方式1000分

5、一个伪类选择器10分

6、属性选择器10分

7、层次选择器，先拆开然后进行相加。

注意事项：

1、数值越大，权重越高。

2、权重值相同时候最后一个样式胜出。

3、如果要忽略权重值时，需要在属性后面加上!important（一般不用）。

字体属性

font-family

指定想要的字体。

格式：font-family:字体1,字体2,字体3....

注意：

1、使用的是客户端的字体。

2、如果客户端没有这个字体，将会使用浏览器默认的字体。

3、可以使用多个字体，方便客户端无此字体的话可以直至找到想要的字体，如果第一个没有找到就看第二个能不能找到，如果第二个找到了那么就直接使用不再向下寻找。

存储字体的位置

C:\Windows\Fonts中存储的是你的所有字体。

font-size

设置字体的大小

px：像素值。

百分比：按照基准文本尺寸的百分比来进行计算。62.5%=10px

em:按照基准尺寸来进行计算。1em=16px;

font-style

字体风格

格式：

font-style:值

值：

normal，默认值

italic，斜体

font-weight

定义字体粗细

格式：

font-weight:粗细

值：

normal，默认值

bold，定义粗体字体。

line-height

定义行高

格式：line-height:值

值：

px

em

%

数值，没有单位，表示以数值乘以文本的大小来计算。

font-size

font-family

font-style

font-weight

简写方式：

font:styleweightsize/line-heightfamily;

注意：

1、必须指定字体大小和字体的系列

2、注意顺序。

文本属性

color

设定文字颜色

格式：color:值

值：

单词

16进制

rgb

rgba

text-transform

定义字母大小写

格式：text-transform:值

值：

none，默认，标准

capitalize，每个单词以大写字母开头

uppercase，都大写

lowercase，都小写

text-decoration

修饰文本

格式：text-decoration:修饰值

值：

none，标准文本

underline，文本的下划线

overline，上划线

line-through，贯穿线

注意：可以使用多个值：text-decoration:underlineoverlineline-through;

text-shadow

文本阴影

格式：text-shadow:左右阴影上下阴影模糊度颜色

注意：

1、左右阴影为负数放在文本左侧，正数放在文本右侧。

2、上下阴影为负数表示放在文本上，正数文本下。

3、模糊度值越大表示越模糊，0px表示完全不模糊

4、IE9之前不支持。

text-align

对齐文本

格式：text-align：值

值：

left：默认的，左边。

right：右边

center：居中。

注意：只能用于块状元素。

text-indent

首行文本缩进

格式：

text-indent：值

值：

px

em

百分比，基于父元素的宽度的百分比来进行缩进。

width:宽度

height:高度

border:1pxsolidgreen;

overflow

规定内容溢出元素框时候发生的事情

格式：overflow:值

值：

visible，默认值，内容不会更改。

hidden，超出的内容被隐藏。

scroll，带滚动条。

word-break

用于设置对象内文本的换行行为。

格式：word-break：值

值：

normal，默认值，根据语言自己的规则确定换行方式。

break-all：自动进行换行。

列表属性

list-style-type

列表项的标志。

格式：list-style-type:值

值：

none,无标记

list-style-image

使用图片作为列表项的标志。

格式：

list-style-image:url('图像地址');

list-style-position

设置列表项标记的位置。

格式：list-style-position:值

值：

inside，放置在文本以内。

outside，默认值，放置在文本以外。

简写：

list-style:list-style-imagelist-style-typelist-style-position

注意：如果有image会将type的值给覆盖掉。

表格选项

border-collapse

设置表格的边框是否显示为单一边框。

格式：border-collapse:值

值：

separate，默认值，边框会被分开

collapse，边框合并为一个单一的边框。

注意：怎么使用通常先给table标签设置border-collapse，然后给table、th、td设置border边框属性:border:1pxsolidred;

border-spacing

设置相邻单元格之间的距离

格式：border-spacing:值

值：

一个值，表示水平和垂直距离。

两个值，第一个值表示水平距离，第二个值表示垂直距离。

注意：border-spacing只能用在border-collapse为默认值的时候用。

caption-side

设置表格标题的位置

格式：caption-side:值

值：

top：上，默认值

bottom：下

left，左

right，右

vertical-align

垂直对齐方式：

格式：vertical-align:值

值：

top，上对齐

middle，垂直居中，默认值

bottom，底端对齐。

盒子模型

盒子模型的概念

浏览器把每个元素都做一个盒子模型，任何的标签都是里面装有东西的盒子。包括文本、包括图像。

盒子模型的组成

每个盒子都是由宽度、高度、内边距、边框、外边距组成。

width：

定义元素内容的宽度。

格式：width:值

值：

auto，浏览器会自动的计算出实际的宽度。

px

%，包含他的块级元素（父元素的百分比宽度）。

注意：行内元素标签会忽略width属性

height：

定义元素内容的高度。

格式：height:值

值：

auto，默认

px

%，包含他的块级元素（父元素的百分比高度）。

注意：行内元素标签也会忽略height属性

padding：

内边距，定义内边距距离

格式：

1、padding-top:设置上内边距

2、padding-right：右内边距

3、padding-bottom:下内边距

4、padding-left:左内边距

简写方式：

padding:上内边距右内边距下内边距左内边距

4值：上-》右-》下-》左

3值：上-》右左-》下

2值：上下-》右左

1值：上右下左

采用“顺时针”原则

border：

是围绕元素内容和内边距的一条或多条线

border-style：

定义了边框的样式。

格式：

border-top-style:上边框样式

border-right-style:右边框

border-bottom-style:下边框

border-left-style：左边框

值：

none，无边框

border-style:顺时针原则

4值：上-》右-》下-》左

3值：上-》右左-》下

2值：上下-》右左

1值：上右下左

border-width:

定义边框的宽度

格式：

border-top-width:上边框宽度

border-right-width:右边框

border-bottom-width:下边框

border-left-width：左边框

简写：border-width:

4值：上-》右-》下-》左

3值：上-》右左-》下

2值：上下-》右左

1值：上右下左

border-color:

定义边框的颜色

格式：

border-top-color:上边框颜色

border-right-color:右边框

border-bottom-color:下边框

border-left-color：左边框

简写：border-color:

4值：上-》右-》下-》左

3值：上-》右左-》下

2值：上下-》右左

1值：上右下左

颜色：

颜色名

rgb

rgba

十六进制

transparent:

透明颜色。默认值

border:宽度样式颜色;

border-top:

border-right:

border-bottom:

border-left:

border-radius：

边框圆角

格式：border-radius:值

值：

1个值：左上、右上、右下、左下

2个值：左上、右下-》右上、左下

3个值：左上-》右上、左下-》右下

4个值：左上-》右上-》右下-》左下

注意：

img标签是特殊的行内元素标签。它能够应用width和height并且多个img不会产生换行。

box-shadow：

盒子阴影

格式：box-shadow:

水平阴影的位置垂直阴影的位置模糊度阴影的尺寸

阴影的颜色阴影的类型

值：

水平阴影的位置：正值右边，负值到左边。

垂直阴影的位置：正值下边，负值到上边。

阴影的类型：不填的时候为外阴影，inset表示内阴影。

background：

背景属性

background-color：

设置元素的背景颜色

格式：background-color:颜色值

注意：使用背景的时候会连同边框一起覆盖。

opacity：

透明属性

格式：opacity:值

值：默认为1，可以使用0~1之间的任意浮点数，值为1时，完全不透明，为0的时候完全透明。

rgba和opacity的区别：

1、rgba是用来对元素设置透明度，针对元素的背景色、文字颜色、边框颜色。

2、opacity，只能给整个元素背景设置一个透明度，并且其透明度会直接继承给后代元素。

background-image：

设置元素的背景图片。

格式：background-image:url('图像地址');

background-repeat：

设置是否及如何重复背景图像

格式：background-repeat:值

值：

repeat：默认值，背景图像将在垂直方向和水平方向重复。

repeat-x：水平方向重复

repeat-y：垂直方向重复

no-repeat：不重复。

background-attachment：

设置背景图像是否固定或随着页面的其他部分滚动

格式：background-attachment:值

值：

scroll，默认值。背景图像随着页面其余部分的滚动而滚动。

fixed，当页面的其余部分滚动时，背景图像不会移动。

background-position:

设置背景图像的开始位置，默认的时候是从左上角开始。

值：

Xpx,Ypx，第一个值是水平位置，第二个值是垂直位置。

0px0px

简写方式：

background:colorimagerepeatattachment;

margin：

设置元素的外边距

1、margin-top:

2、margin-right:

3、margin-bottom:

4、margin-left:

简写格式：margin:值;

4值：上-》右-》下-》左

3值：上-》右左-》下

2值：上下-》右左

1值：上右下左

box-sizing:

规定两个并排的带边框的框，以特定的方式匹配某个区域内的特定元素。

格式：box-sizing:值;

值：

content-box:默认的时候width和height中不包括padding

border-box:widht和height中。包括边框和padding

供应商前缀：

各个浏览器对新属性的支持程度不同，有些还在测试阶段。所以每个浏览器厂商使用特定的前缀来进行标记。

firfox:-moz-

safari:-webkit-

opera:-o-

ie:-ms-MicroSoft

浮动与页面设计规范指导

display

改变元素的类型：

值：

none，该元素不显示。

block，显示为块级元素。

inline，行内元素。

float

浮动：

定义元素往哪个方向浮动。

格式：float:值;

值：

left，元素向左浮动，元素下的内容移动到元素的右边。

right，元素向右移动，元素的内容移动到元素的左边。

none，无浮动。

注意事项：

1、由于浮动框不在普通的文档流中，所以对于普通的文档流就像不存在一样。

2、如果父元素包含浮动元素，并且父元素没有设定高度值，那么父元素的高度将会被压塌。

3、任何一个元素设置为浮动都会自动的被设置为块状元素。

clear属性

清除哪一侧的浮动：

格式：clear:值

值：

none，允许浮动元素出现在两侧。

left，左侧不允许出现浮动元素。

right，右侧不允许出现浮动元素

both，两侧都不允许出现浮动元素。

position

规定元素的定位类型：

格式：position:值

值：

static，默认值，没有定位，按照文档流自己的位置来进行处理。

absolute，来生成绝对定位，网页上面的其他正常的元素不知道他的存在。设定为position为absolute时自动变为块状元素。

relative，生成相对定位，相对于它在HTML流中的本来的位置来进行定位。

fixed，生成绝对定位的元素，并且元素的位置永远按照浏览器窗口的位置进行定位。

注意事项：

1、absolute靠body的左上角定位。

2、relative靠元素的本来的位置来进行定位。

3、如果一个标签的位置是绝对定位的，且它又不存在于其他任何设定了absolute、relative、fixed定位的标签里面。他就是相对于浏览器的body进行定位。

4、如果一个标签的位置是绝对定位的，且它在另外一个设定了absolute、relative、fixed定位的标签内，那么他就是相对于它父类的标签的位置来进行定位。

设定元素的位置

1、top，规定元素的上边缘

2、bottom，规定元素的下边缘

3、left，规定元素的左边缘

4、right，规定元素的右边缘

px

%，设置以包含元素的宽度的百分比计算。

注意：postion为static时不起作用。

z-index

设置元素的堆叠顺序。

格式：z-index:数值

注意：

1、z-index仅能在定位的元素上有效。

2、值越大，元素就会出现在越顶部的地方。默认的时候z-index为0

常用的套路性问题

居中

1）、行内元素居中：设置父级元素属性text-align:center;

2）、块级元素居中：设置元素margin:0auto;

3）、块级元素中的内容垂直居中：只有一行的情况下line-heihgt等于height

4）、如果一个块级别元素的内容垂直居中并且有多行，那么这个时候将父元素设置为display:table-cell，然后使用vertical-align:middle

5）、块状元素垂直居中：

步骤

1、设置父元素为position:relative

2、设置子元素position:absolute

3、设置子元素top：50%;

4、设置子元素上边距为margin-top:负子元素高度的一半

书写顺序

注释的写法：

/*头部开始*/

头部的修饰内容

/*头部结束*/

位置属性

position\top\right\left\bottom\display\float\z-index\margin

大小属性

width、height、padding、margin

文字系列

font\line-height\letter-spacing\color\text-align

背景

background\border