CSS详细基础教程-02-css的emmet语法、复合选择器、元素显示模式、背景、三大特性

CSS详细基础教程-02-css的emmet语法、复合选择器、元素显示模式、背景、三大特性

emmet语法

1. 快速生成HTML结构语法

   • 生成标签直接输入标签名按tab键即可
   • 生成多个相同标签加上* 就可以，比如 div*3
   • 生成带有类名或者id名字的，直接写.demo或者#two 按tab键就可以了
   • 父子级关系用>，如ul>li
   • 兄弟关系用+，如div+p
   • 生成div类名是有顺序的，可以用自增符号$,如.demo$*3
   • 生成的标签里面默认显示几个文字，写内容用{文字}按tab

2. 快速生成css样式

   • 例w100 按tab，出现width：100px；

3. 快速格式化代码

   • 右键 选择 格式化文档
   • 日常快速格式化
     

css的复合选择器

1. 建立在基础选择器之上的；由两个或多个基础选择器，通过不同的方式组合而成的

2. 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

   • 后代选择器（包含选择器）：

     语法：元素1 元素2 {样式声明}

     元素1（父亲）和元素2（孩子）用空格隔开；最终选择的是元素2；元素1和元素2可以是任意基础选择器

   • 子元素选择器（子选择器、亲儿子选择器）：只选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素；

     语法：元素1>元素2{样式声明}

   • 并集选择器：选择多组标签，用于集体声明

     语法：元素1，元素2{样式声明}

     逗号可以理解为和的意思；任何选择器都可以作为并集选择器的一部分；并集选择器喜欢竖着写；最后一个选择器不用加逗号

   • 伪类选择器：向某些选择器添加特殊效果

     书写特点是用冒号（:）表示，如:hover

     伪类选择器有很多，比如链接伪类、结构伪类等

     • 链接伪类选择器

       

       注意事项：

       顺序不能变，记忆顺序（love hate或者lv 包包hao）

       给链接单独指定样式

     • ：focus伪类选择器：用于获得焦点的表单元素，焦点就是光标，一般情况下类表单元素才能获取

       语法： input：focus{样式}

css的元素显示模式

1. 元素显示模式：（更好的布局网页）

   元素（标签）以什么方式进行显示

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

   • 块元素：div标签是最典型的

     特点：

     比较霸道，自己独占一行；

     高度、宽度、外边距以及内边距都可以控制；

     宽度默认是容器（父级宽度）的100%；

     是一个容器及盒子，里面可以放行内或者块级元素；

     注：文字类元素内不能使用块级元素，如 p，h1~h6

   • 行内元素（内联元素）：标签是最典型的行内元素

     特点：

     相邻行内元素在一行上，一行可以显示多个；

     高、宽直接设置是无效的；

     默认宽度就是它本身内容的宽度；

     行内元素只能容纳文本或其他行内元素；

     注：链接里面不能再放链接；特殊情况链接 < a > 里面可以放块级元素

   • 行内块元素：同时具有块元素和行内元素的特点，如img，input，td

     特点：

     和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙，一行可以显示多个（行内元素特点）；

     默认宽度就是它本身内容的宽度（行内元素特点）；

     高度、宽度、外边距以及内边距都可以控制（块级元素特点）；

2. 显示模式的转换

   一个模式的元素需要另一种模式的特性

   语法:

   转换为块级元素display：block；

   转换为行内元素display：inline；

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

3. 小工具snipaste

4. 单行文字垂直居中的代码

   小技巧：让文字的行高等于盒子的高度

   行高包括上空隙、文字本身高度、下空隙

css的背景

背景属性设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1. 背景颜色：background-color

   transparent：透明色；一般默认为透明

   语法：background-color：颜色值；

2. 背景图片：background-image

   图片：logo或者装饰性图片、超大图片

   优点：便于控制位置

   语法：background-image：none| url（）；

3. 背景平铺：background-repeat

   background-repeat： repeat（默认） | no-repeat | repeat-x | repeat-y；

   注：页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

4. 背景位置：background-position

   background-position：x y；

   参数代表：x坐标和y坐标，可以使用方位名词或者精确单位

   • 参数是方位名词，right、center、left、top

     注：两个值都是方位名词，前后顺序无关，效果一致；如果只写一个参数，则省略的参数默认居中；

   • 参数是精确单位，x坐标，y坐标，顺序不能变

     注：如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

   • 参数混合单位，x坐标，有坐标，顺序不能变

5. 背景图像固定（背景附着）

   background-attachment属性设置图像是否固定或者随着页面的其余部分滚动；制作视差滚动的效果

   参数：scroll 背景图像是随着对象内容滚动；fixed 背景图像固定

6. 背景复合写法

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

7. 背景色半透明

   background：rgba（0,0,0,0.3）；后面必须是4个值

   alpha 透明度 范围0-1

css的三大特性

1. 层叠性（长江后浪推前浪，前浪死在沙滩上）

   • 相同的选择器，设置相同的样式，此时，样式就会覆盖（层叠）另一个样式

   • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

   • 样式不冲突，不会层叠

2. 继承性（子承父业）

   • 子标签继承父标签中的样式（主要是文字样式，颜色）

   • 恰当使用，简化代码，降低代码复杂性

   • 行高的继承，对父标签修改样式

     行高可以跟单位，也可以不跟单位

3. 优先级

   • 当一个元素指定多个选择器，就会有优先级的产生。

   • 如果选择器相同，则执行层叠性

   • 选择器不同，则根据选择器权重执行

   

   注：

   • 继承的权重为0，先看这个标签有没有直接被选出，不管父元素权重多高，子元素权重都为0

   • 复合选择器会有权重叠加的问题，但不会有进位