css的基本语法与方法解释

css是层叠样式表的简称，用于美化与布局网页。css主要由选择器与选择样式两部分组成。其主要写在head标签中的style标签中。<style></style>.选择器用于指定html标签。各属性值之间用；进行分割。属性与属性值之间用：连接

代码风格：

样式格式：1.紧凑型格式 h3{}

1. 展开式的风格 h3{

}

样式大小写：用小写字母写样式

空格规范：属性值前面冒号的后面保留一个空格。选择器与大括号之前保留一个空格。

选择器可以分为基础选择器与复合选择器两大类

css的基础选择器：选择器其实就是用于选择标签

1. 标签选择器：是指用html的标签作为名字的选择器，能快速对页面中同类型标签设置样式。例如 p {

color: red;

}

1. 类选择器：.类名 {

属性: 属性值；

}

使用前要对目标标签设置类名class=”类名”，类名不要取标签名，取类名时，单词之间可用短横线来分割。；例如：star-sing。拼音要用全拼，尽量用英语命名。我们可以对一个标签设置多个类名。对一个标签设置多个类名时，各类名之间用空格分开。例如class=” red font35 shy”.使用多类名方便于维护

1. id选择器：#id名 {

}

以id属性来选择样式.但是它只能对一个标签对象起作用

1. 通配符选择器：* {

}

该选择器会选择页面中所有的标签，对所有标签内容设置样式

css复合选择器：复合选择器即是将基础选择器组合到一起

1. 后代选择器：又称包含选择器，可以选择某标签的后代标签

父元素 后代元素 {

}

父子元素之间是要用空格隔开的，后代元素不仅仅可以是儿子，也可以是孙子。而且后代元素也可以不只是一个，可以层层递进。例如：ol li a {

}

元素可以是任意基础选择器

1. 子选择器：只能选择子元素，不能选择孙子之类的后代元素

父元素 > 子元素{

}

1. 并集选择器：并集选择器可以选择多组标签并为他们定义相同样式

元素1， 元素2{

}

任何形式的选择器都可以做为并集选择器的成分，并集选择器一般竖着写

1. 伪类选择器：给选择器添加新的效果，伪类选择器的最大书写特点便是前面用：来连接

链接伪类：a:link 选择所有未被访问过的链接

  a:visited 选择所有访问过的链接

  a:hover 选择所有鼠标移到上面的链接

  a:active 选择所有正在被点击的链接

为确保链接伪类生效，我们的按照lvha的顺序书写这四个选择器，尽量不要颠倒它们的循序，给链接指定样式得单独给链接指定样式

:focus 伪类选择器 该选择器是用于选择获得焦点的表单元素，即把获得光标的表单元素选取出来

基础样式类型：

width 设置宽度

height 设置高度

字体属性设置：

font-size:数字px; 设置字体大小。标题标签比较特殊需要单独指定字体大小。

font-family:’字体类型’；设置字体类型，当字体内容中写了多个字体，会优先显示前面的字体。

font-weight:;设置字体粗细，其属性值有normal（400）正常，bold（700）加粗，border特粗，lighter加细.实际开发中提倡用数字表示粗细。

font-style:;设置字体显示样式，normal正常显示，intalic斜体显示

字体复合属性：font:font-style font-weight font-size/line-height font-family;各属性值之间用空格隔开。这几个属性值之间的顺序不能颠倒。有些取默认值的属性可以省略，但是font-size和font-family.不能省略。

文本属性设置：

color:颜色;设置文本颜色。颜色表示可以使用预定义的颜色值（颜色名），十六进制表示颜色，rgb(,,)颜色格式。可用ps获取颜色值

text-align:对齐方式;设置文本对齐方式。对齐方式的属性值为left，center，right。居中对齐实质上是让文字居于盒子中间

text-decoration:;设置文本装饰方式。其属性值有none无装饰，underline下划线，line-through删除线，overline上划线。

text-indent:;设置文本缩进，通常是将文本首行缩进。属性值为像素值。若为正值，则向右缩进。若为负值，向左缩进。单位em，1em表示当前一个文字的大小，且默认文字大小为16px。

line-height:;设置行间距，也就是行高；其属性值为像素值。行间距=上行间距+下行间距+字体大小。保证上间距和下间距大小相同。行高也可以不待单位，其默认单位为em

background-color 设置背景颜色

设置文字垂直居中：让文字行高等于盒子的高度，即可使的文字垂直居中。行高小于盒子高度，文字便会偏上。行高大于盒子高度，文字便会偏下。

css的三种样式表：按照css书写的位置与地方的不同可以分为三种样式表

内部样式表：将css本身写在html内部

行内样式表：直接在标签的内部写上style属性，这样便会直接修改该标签的内容，这个样式表的权重最高。例如：<p style=”color: red; font-size: 16px; ”></p>

外部样式表：在html文件之外建一个css文件，并且在该文件中只有样式，没有标签。对html修改样式，则需要在html文件中写入link标签。<link rel=”stylesheet” href=”css文件路径”>

对图片添加一个父标签，可以方便对图片样式进行修改

Chrome调试工具：

1. 可以ctrl+滚轮放缩文字大小
2. 左边边框内容为源代码，右边则为其对应的样式表
3. 页面中呈现的样式表内容参数可以直接修改，方便我们直接观察页面内容
4. 对比左右框的内容，检查我们样式设置是否具有错误。

Emmet语法：vscode内部集成了该语法

快速生成标签

1. 标签书写写入标签名+tab，即可直接生成标签
2. 写入多个相同标签直接写标签名*标签数+tab
3. 父子级标签关系则用>符号
4. 兄弟级标签关系则用+符号
5. 生成含有类名或则id名的标签，直接写类名或id名+tab，默认生成的是div标签。但是在类名或者id名前写上标签名，则可生成对应标签。
6. 若对生成类名或者id名要按照序号排序，则可以在类名或者id名后面加上$符号，$表示自增符号
7. 若想生成的标签中默认带几个文字，则标签名{文字}+tab

快速生成样式

1. 各样式缩写+tab
2. 样式缩写+属性值+tab

快速格式化代码

1. shift+alt+f可以快速格式化文档，调整各语句的对齐方式

元素显示模式：标签元素显示的方法或者说显示的方式，按照显示模式的不同可将元素分为块元素，行内元素和行内块元素。

块元素：

1. 独占一行
2. 高度，宽度，内边距，外边距都可可以设置
3. 默认宽度为父容器的宽度
4. 元素内部可以在放块元素或者行内元素
5. 文字块元素内不能放块元素，<p>中不能放<div>

行内元素（内联元素）

1. 一行可以显示多个行内元素
2. 宽度高度设置无效
3. 默认宽度为内容宽度
4. 内部只能放文字或者其它行内元素

行内块元素

1. 和相邻的行内或者行内块元素在一行上，但中间有空隙
2. 默认宽高为内容宽高
3. 可以设置宽度和高度

显示模式的转换：

转换为块元素 display: block

转换为行内元素 display: inline

转换为行内块元素 display: inline-block

snipaste小工具，截图工具，可以测量高宽，页面颜色

1. F1截图，可以测量宽高，书写文字等
2. 按住alt，点击图片可以取色

css的背景属性：

background-color: 属性值；设置背景颜色，其属性值可以使颜色，也可是transparent透明,这个是默认值

background-images设置背景图片，或者网页上一些装饰性的小图片。background-image: url(地址)|none无背景；这个是默认值。

background-repeat: 属性值；设置背景图片的平铺模式，其属性值有repeat平铺为默认值, none-repeat不平铺,repeat-x沿x轴方向平铺,repeat-y沿y轴方向平铺。

background-position: x y;该属性可以改变图片在背景中的位置.若xy为方位名词，则两个名词的先后顺序没有影响。若只指定了一个方位名词，另一个省略，则另一个默认居中。也可以用像素值设置其位置，这种设置更为精确。但只设置一个像素值，一定是设置x方向的位置，另一方向一定是居中。当然两种方式可以混合起来使用，前一个值一定是x方向，另一个一定是y方向。

background-attachment: 属性值；背景附着设置，其属性值有scroll滚动，和fixed固定。scroll为默认值，图片会随着内容滚动。fixed图片不会随着内容滚动。

背景复合性写法：其实各属性顺序没有要求，一般我们按照如下格式书写。当我们没有书写某些参数时，取默认值。

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

背景颜色半透明：rgba（，，，透明度）透明度的取值为0~1，值越小透明度越高。只会影响背景色的透明度

css的三大特性

层叠性：网页样式改变会使用最近的样式设置，也就相当于覆盖。这个覆盖当然是体现在对相同选择器的改变

继承性：子标签会继承父亲中的某些样式，如文字颜色，字体字号，与文字相关的样式设置等等。当我们对网页整体文字特点进行设置的时候，直接对body标签进行设置，继承特性就会使得其子标签具有一定特性。

优先级： 对同一个元素指定多个选择器，这些选择器样式修改的优先级便有了分别。元素使用的样式根据权重来修改。

各选择器与其权重：继承或者* 0000，元素选择器0001，类选择器与伪类选择器 0010，id选择器0100，行内样式style=“”1000，!Important 无穷大

网页的三大核心：盒子模型，浮动，定位

网页布局过程：

1.准备好相关元素，一般是盒子

2.利用css设置样式，然后拜访在相应位置

3.盒子里装内容

盒子的组成成分：content内容，border边框，margin外边距，padding内边距

边框设置：

border:border-width border-style border-color ;

border-style: 边框样式 solid实线，dashed虚线，dotted点线

border-top:;对上边框进行设置，border-bottom：；对下边框进行设置。以此类推对左右边框进行设置也是一个道理

表格其实就相当于盒子

border-collapes:collapes;合并相邻边框

边框会影响盒子的大小

内边距padding:边框与内容之间的距离，类似的padding-top:;padding-bottom:;可设置盒子各个方向上的边距，默认内边距为零。

内边距的复合写法:padding:值;

1. 一个值，便是对上下左右四个方向上的值进行设置
2. 两个值，前一个值设置上下，后一个值设置左右
3. 三个值，1上，2左右，3下
4. 四个值，1上，2右，3下，4左

padding也会影响盒子的大小，为保证盒子大小不变，就width/height减内边距大小。不设置盒子宽度，设定内边距，内容撑开盒子，会使得文字间的间距比较均匀。没有指定盒子大小，没有内容，内边距不会撑开盒子。

margin:外边距，设置盒子与盒子之间的距离，其设置与padding类似

将块元素盒子设置为水平居中对齐，我们只需要将盒子左右外边距设置为auto

margin-left:auto;margin-right:auto;

margin:auto;

margin:0 auto;

若为行内块元素和行内元素设置为水平居中对齐，则对其父元素设置text-align:center;即可

对于嵌套的两个块元素，对子元素进行上外边距设置的时候，父元素会塌陷最大的外边距。

解决方案

1. 可对父元素进行边框设置即可解决此问题
2. 对父元素进行内边距的设置
3. 对父元素添加overflow:hidden;

清除所有网页元素的内外默认边距设置：

*{

margin:0;

padding:0;

}

行内元素一般只设置其左右内外边距，不去设置上下内外边距。一般对其上下内外边距的设置不起作用。