我的css学习博客（二）

起因

        在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。

我的css学习博客应该会分为7~10节，本博客为第2节。

Emmet语法

Emmet语法用缩写来提高html/css的编写速度。

  1.快速生成html结构语法

①.生成标签时直接输入标签名按tab键即可。

②.生成多个相同标签加上*号即可，例如div*10再按tab键。

③.生成父子级标签可使用>，例如ul>li再按tab键。

④.生成兄弟级标签可使用+，例如div+p再按tab键。

⑤.如果生成带有类名或者id名，写p.类名或span#id名即可，.或#前为标签名（不加默认为div）。

⑥.如果生成的类名是有数字顺序的，可使用$，例如.demo$*5会生成demo1、demo2...demo5。

⑦.若想在生成的标签内部写内容可用{}，例如div{我是kckv}。

  2.快速生成css样式语法

属性首字母+属性值首字母+tab键可快速生成css代码。例如lh26px 为 line-height: 26px。

css复合选择器

  1.后代选择器

又称为包含选择器，可以选择父元素的子元素，写法如下：

ul li {
    color: red;
}
<ul>
    <li>我是kckv</li>
    <li>我是kckv</li>
    <li>我是kckv</li>
</ul>

元素1为父元素，元素2为子元素，最终选择的为子元素。

元素2之后还可以添加子元素，元素3为元素2的子元素，以此类推。

ul li a {
    color: red;
}
<li>我是kckv<a href="#">我是kckvv</a></li>

后代选择器对所有父元素中相同子元素都起作用。

ul a {
    color: pink;
}
<li>我是kckv啊<a href="#">我是kckvv</a></li>
<a href="#">我是kckv</a>
不论是li中的a，还是li外的a都会变色。

元素1，元素2可以是任意的基础选择器（类选择器等）。

.nav li a {
    color: pink;
}
<ul class="nav">
    <li>我是kckv</li>
    <li>我是kckv</li>
    <li><a href="#">我是kckvv</a></li>
</ul>

  2.子选择器

只能选择作为某元素的最近一级子元素。使用方式如下：

.nav > a {
    color: pink;
}
<ul class="nav">
    <li><a href="#">我是kckvv</a></li>
        <a href="#">我是kckv</a>
</ul>
只有第二个“我是kckv”会变为粉色。

  3.并集选择器

        可以选择多组标签，同时为他们定义同样的样式，通常用于集体声明。使用方式如下：

div,
p,
.nav > li {
    color: pink;
}
<div>我是div</div>
<p>我是p</p>
<ul class="nav">
    <li>我是li一</li>
    <li>我是li二</li>
    <li>我是li三</li>
</ul>

  4.伪类选择器

　　用于给某些选择器添加特殊的效果，最大的特点是用：来表示

　　①链接伪类选择器

a:link       //选择所有未被访问的链接
a:visited   //选择所有已被访问的链接
a:hover    //选择鼠标指针位于其上的链接
a:active   //选择活动链接（鼠标按下来未弹起的链接）

　　　　为了确保生效，应按照LVHA顺序，:link - :visited - :hover - :active   (love,hate)

　　　　因为a链接在浏览器中有默认样式，因此应专门设定样式（body标签修改样式对a链接不起作用）。

　　②:focus伪类选择器

　　　　用于选取获得焦点的表单元素。

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

input:focus {
        background-color: pink;
}

css的元素显示模式

　　元素显示模式就是元素（标签）以什么方式进行显示，HTML元素一般分为块元素和行内元素两种类型。

　　1.块元素

　　　　<div>标签是最典型的块元素，块元素具有以下特点：

　　　　　　①、自己独占一行。

　　　　　　②、高度，宽度，外边距以及内边距都可以控制。

　　　　　　③、宽度默认是容器（父级宽度）的100%。

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

　　　　注意：文字类的元素内不可以再放块元素，例如<p>和<h1~6>内不能放块级元素，尤其是div。

　　2.行内元素

　　　　又称内联元素，<span>标签是最典型的行内元素，行内元素具有以下特点：

　　　　　　①、一行可以显示多个。

　　　　　　②、高、宽直接设置是无效的。

　　　　　　③、默认宽度就是他本身内容的宽度。

　　　　　　④、行内元素只能容纳文本或其他行内元素。

　　　　注意：链接里不能再放链接。

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

　　3.行内块元素

　　　　在行内元素中有几个特殊的元素如img、input、td，他们同时具有行内元素和块元素的特点。有些资料称他们为行内块元素。

　　　　行内块元素具有以下特点：

　　　　　　①、和相邻行内元素（行内块）在一行，但是他们之间会有空白间隙。一行可以显示多个。

　　　　　　②、默认宽度就是他本身内容的宽度。

　　　　　　③、高度，宽度，外边距以及内边距都可以控制。

　　4.元素显示模式转换

　　　　当一个模式的元素需要另一个模式的特性时，我们需要元素显示模式转换。

　　　　比如想要增加元素<a>链接的处罚范围。使用方式如下：

<style>
    a {
        width: 150px;
        height: 50px;
        background-color: pink;
        display: block;
    }
</style>
<a href="#">我是链接</a>

<style>
    div {
        width: 150px;
        height: 50px;
        background-color: pink;
        display: inline;
    }
</style>
<div>我是kckv</div>
<div>我是kckv</div>

<style>
    span {
        width: 250px;
        height: 150px;
        background-color: pink;
        display: inline-block;
    }
</style>
<span>我不是kckv</span><span>我不是kckv</span>

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

　　　　css并没有提供文字垂直居中的代码，但我们可以通过让文字的行高（line-height）等于盒子的高度（height）来实现。

css的背景属性

　　1.背景颜色

　　　　background-color设定了元素的背景颜色。

　　　　一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动设置为透明，使用方法如下：

background-color: transparent;
background-color: #ffffff;
background-color: red;
background-color: rgb(255,255,255);

 

　　2.背景图片

　　　　background-image属性描述了元素的背景图像，常用与logo或者装饰性小图片或者超大的背景图片。

　　　　优点是非常便于控制位置（精灵图）。使用方式如下：

background-image: none;
background-image: url(我是图片的地址链接啊);

　　3.背景平铺

　　　　在HTML页面上对背景图片进行平铺可以使用background-repeat。使用方法如下：

background-repeat: no-repeat;  //不平铺
background-repeat: repeat;       //默认属性，平铺
background-repeat: repeat-x;    //横向平铺
background-repeat: repeat-y;    //纵向平铺

　　4.背景图片位置

　　利用background-position属性可以改变图片在背景中的位置。

background-position: x y;
参数值分为length和postion
length可以为百分数或由浮点数字和单位标识符（px等）组成的长度值。
position可以为top、center、bottom、left、right 方位名词。

　　1.参数是方位名字

　　　　如果指定的两个值都是方位名词，则两个值前后顺序无关。

background-position: left top;
background-position: top left;

　　　　如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

background-position: left;
background-position: left center;

　　2.参数是精确单位

　　　　如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

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

　　3.参数是混合单位

　　　　如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

　　5.背景图像固定

　　background-attachment属性可以设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll;
background-attachment: fixed;
scroll 背景图像是随着对象内容滚动
fixed  背景图像固定

　　6.背景复合写法

　　为简化代码，实际开发多将背景属性合并简写在同一个属性background中。

　　没有特定的书写顺序，一般习惯约定顺序为：

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

background: transparent url(地址) no-repeat fixed center center;

　　7.背景色半透明

　　css3为我们提供了背景颜色半透明的效果。

background: rgba(0,0,0,0.3);

　　最后一个参数是alpha透明度，取值为0~1。

　　0.3的0可以省略，写作.3。

　　半透明指的是盒子背景半透明，盒子的内容不受影响。