前端入坑到放弃day4

第04天——CSS基础

一、emmet语法

1、emmet生成HTML结构语法

 

 

补：input：submit——快捷建提交表单

2、常用属性大多数英文单词的首字母连写即可，示例如下：

        ——tac——text-align：center；

        ——tdn——text-decoration:none;

        ——w100——width：100px；

        ——h200——height：200px；

        ——ti2em——text-indent：2em；

        ——lh26px——line-height：26px；

 

二、复合选择器

1、后代选择器：选择父元素中的子元素

      ——选择器1  选择器2 { 样式声明 }

        —— 后代选择器终选中的元素是子代元素 → 后代元素 

2、子代选择器

       —— 选择某个元素近一级的子元素（亲儿子） 

         —— 选择器1 > 选择器2 { 样式声明; }

         —— 子代选择器的选择器之间使用 > 分开。 

         —— 子代选择器终选中的元素是子代元素 → 亲儿子

3、并集选择器

       —— 集体声明 —— 选择多组标签，同时设置相同的样式 

         —— 选择器1, 选择器2 { 样式声明; }

         —— 并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号

4、伪类选择器

       —— 伪类选择器使用单冒号 : ，是某种状态下的样式，例如 :hover 表示鼠标指向元素 的状态。

         —— 链接伪类选择器

                 a：link——选择所有未访问的链接

                 a：visited——选择所有已经被访问的链接

                 a：hover——选择鼠标指针位于其上的链接

                 a：active——选择激活链接（鼠标按下未松开的链接）

注：伪类选择器书写有要求，link > visited > hover > active  (   LV hao )

         —— focus伪类选择器（获取焦点）

                 1、在表单中突出显示当前获得焦点的表单元素，提升用户体验

                 2、使用 focus 伪类选择器，当输入框内获取焦点时，修改文本颜色和输入框的背景颜色。 

 

5、复合选择器总结

 

三、元素显示模式

1、块元素（block）：独占一行，可设置宽高边距等

2、行内元素（inline）：相邻行内元素在一行显示，一行多个 ，不能设置宽高（a、span）

3、行内块元素（inline-block）：相邻行内元素在一行显示，一行多个，可设置宽高边距等（img、input、td）

 

元素显示模式总结

 

显示模式的转换

display: block 转换为块元素

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

display: inline 转化为行内元素（使用较少）

注：在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。

 

四、单行文字垂直居中

        —— 将 line-height 设置为盒子的高度。

        —— text-align：center；将文字设置水平居中

        —— margin：0  auto；将盒子设置水平居中

 

五、背景图片

        —— 背景图片语法：background-image：none | url（）；

        ——背景平铺：background-repeat （repeat默认，水平垂直平铺；no-repeat，不平铺；repeat-x，水平平铺；repeat-y，垂直平铺）

        ——背景位置-方位名词：background-position：x y；

                1、水平方向： left / right / center

                2、垂直方向： top / bottom / center 

         —— 如何让背景图片水平垂直居中？

                 background-position: center;

         —— 背景位置-精确单位 ：background-position：x y；

         —— 如果指定了一个值，则是x方向的，垂直方向居中显示

         —— 背景位置-混合单位：background-position：x y； 

                  混合单位有顺序，第一个值一定是 x / 第二个值一定是 y

         —— 背景固定：background-attachment （scroll 默认，背景图像跟随滚动；fixed 背景图像固定）

         —— 背景属性复合写法 

                   background: color image repeat attachment position （没有顺序）

         ——  背景颜色半透明 ：background: rgba(0, 0, 0, 0.3);           

                   rgba取值范围： 0 ~ 1，0 完全透明 / 1 完全不透明

 

背景总结