前端基础入门笔记-CSS-02-详细

六、chrome调试工具

七、Emmet语法

   1、HTML

1. 直接输入标签，按tab键即可，例如 div 按tab键，就直接生成<div></div>
2. 生成多个标签，例如div*3;
3. 有父子级关系，例如，ul>li，
4. 有兄弟级关系，例如div+span;
5. 生成带有类名，或者ID名，div.red,div#red;
6. 标签带有文字，p{我是美女}
7. 生成的类名是有递增的顺序的，带自增符号$;

1. CSS

缩写的样式(首字母)按tab键，例如text-decoration:none：tdn;

1. 格式化代码

Shift+alt+F .

保存时自动格式化代码：点击文件-》首选项-》设置—》搜索format,勾选上format on Save 即可自动保存时格式化代码。

八、CSS的复合选择器。

更准确、更高效的选择目标元素（标签），由多个基本选择器，通过组合的方式。

1.后代选择器

元素1 元素2…{ 属性：值}  （元素1包含2）

可以是任意的基础选择器。

2.子选择器

元素1>元素2{  } （只会选择第一代儿子）

3、并集选择器

元素1，元素2  {  }（元素1和元素2）并集选择器竖着写

4、伪类选择器

用于向某些选择器添加特殊效果，比如给链接加效果，或选择第1、第n个元素。链接伪类、结构伪类等

A:link   选择所有未被访问链接

A：visited   选择所有已被访问的链接

A:hover   选择鼠标指针位于其上的链接

A：active     选择活动链接（鼠标下未弹起的链接）

链接伪类的注意事项：为了确保链接生效，必须按照（LVHA）的顺序声明。

重点是 a{}和a:hover{}的写法。

:Foucs  获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素。

九、CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示。比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型。

1.块元素：<div>最典型的块元素。

特点：1、比较霸道，自己独占一行。2、高度、宽度、外边距、内边距都可以控制。3、宽度默认是容器（父级宽度）的100%、4、是一个容器及盒子，里面可以放行内或者块级元素。

注意事项：文字类的元素内不能使用块元素。例如<p>/<h1>等。

2.行内元素：<span>是最典型的行内元素。

特点：1、相邻行内元素在一行上，一行可以显示多个。2、高宽直接设置是无效的，3、默认宽度就是他本身内容的宽度。4、行内元素只能容纳文本或其他行内元素。

注意：链接里面不能放链接。特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3.行内块元素：<img/>、<input/>、<td>

特点：1、相邻元素在一行上，但是之间有空白缝隙，一行可以显示多个（行内元素特点）2、默认宽度就是本身内容宽度（行内元素特点）。3、高度、行高、外边距以及内边距都可以控制(块级元素特点)

4.元素显示模式转换

一个模式转换成另一个模式。 Display:block;(转换为块级元素)   display:inline(转换为行内元素)       display：inline-block;（转换为行内块元素）

十、CSS的背景

背景颜色、背景图片、背景平铺等

Background-color:transparent|color

Background-image:none |url(url)

Background-repeat:repeat(平铺)，no-repeat(不平铺)）repeat-x（沿着x轴平铺）

Background-position:x,y;(x,y是坐标，也可以使用方位名词left,top,right,center或精确单位,精确单位和方位名词可以混合使用)

背景图像固定（滚动）: background-attachment: scroll (滚动的)|fixed（固定的）

复合属性Backgroud的顺序一般为：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。（background:black url(images/bg.png) no-repeat fixed top center）

背景半透明：rgba(0,0,0,0,0.3)    最后一个参数alpha透明度，取值范围在0~1之间。

十一、CSS三大特性

层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：就近原则，

继承性：text,font,line-,color属性

Font:12px/1.5 ‘Microsoft YaHei’  这个1.5就是行高是当前元素的文字的font-size的1.5倍。

优先级：继承或者*   元素选择器  类选择器 伪类选择器  ID选择器 行内样式 style=””  !impotant 重要的

复合选择器：权重叠加