前端自学之CSS 2

  慢慢悠悠，慢慢悠悠，一个多月才学到这。自学的进度是真的慢啊。

  加油！打工人！！

 

文本缩进

Text-indent属性用来指定文本的第一行的缩进，通常用于短咯的首行缩进

   p {

            font-size: 24px;

            /* 文本的第一行首行缩进 多少距离  */

            /* text-indent: 20px; */

            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */

            text-indent: 2em;  

        }

em就是一个文字的大小

行间距

用于设置每行之间的距离（行高）

 div {

           line-height: 26px;

       }

CSS的引入方式

行内样式表（行内式）：  在元素标签内的style属性中设定CSS样式，适合修改简单样式

内部样式表（嵌入式）：  写在HTML的页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中

外部样式表（链接式）：  把样式写到CSS文件中，之后把CSS文件引入到HTML文件中

内部样式表（嵌入式）

1. 理论上可以放在HTML的任意位置，但一般来讲放在HEAD中
2. 通过此方法，控制整个HTML页面
3. 代码结构清晰，但是结构和样式没有完全分离
4. 此方法被称为嵌入式，一般用于训练

行内样式表（行内式）

1. stle其实就是标签的属性
2. 在双引号之间，写法要符合CSS规定
3. 可以控制当前的标签设置样式
4. 书写繁琐，没有体现出结构和样式分离的思想，所有不推荐试用，可以考虑简单是使用

外部样式表（链接式）

1.建一个后缀名为.css，把所有CSS代码都放入

2.在HTML页面中，使用<link>标签引入 <link rel="stylesheet" href="style.css">

3.这个最常用

 

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度

1. 快速生成HTML语法结构
2. 快速生成CSS语法

 

 

1.1生成标签用TAB

1.2如果生成多个标签，加上*就可以了

1.3如果有父子关系，可以用>

1.4如果有兄弟关系，可以用+

1.5如果生成带有名或者id的，直接写.demo或者#two tab键就可以

1.6如果生成的div类名有顺序，可以使用自增符号$

1.7如果生成的标签里面有内容用（）表示

后代选择器

    ol li {

            color: pink;

        }

 

        /* 中国 山东 济南 蓝翔 */

        ol li a {

            color: red;

        }

        .nav li a {

            color: yellow;

        }

子选择器

   .nav>a {

            color: red;

        }

并集选择器

选择多组标签，同事为他们定义相同的样式，通常用于集体声明

      /* 要求1: 请把熊大和熊二改为粉色 */

        /* div,

        p {

            color: pink;

        } */

 

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */

        div,

        p,

        .pig li {

            color: pink;

        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */

        /* 一定要注意,最后一个选择器 不需要加逗号 */

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果

前面用：隔开表示，比如  :hover    :first-child

伪类选择器有链接伪类，结构为类等

链接伪类

a:link    /* 选择所有未被访问的链接*/

a:virsted  /* 选择所有已被访问的链接*/

a:hover   /* 选择指针位于骑上的链接*/

a:active   /* 选择活动链接（鼠标按下未弹起的链接）*/

 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */

        a:link {

            color: #333;

            text-decoration: none;

        }

 

        /*2. a:visited 选择点击过的(访问过的)链接 */

        a:visited {

            color: orange;

        }

        /*3. a:hover 选择鼠标经过的那个链接 */

        a:hover {

            color: skyblue;

        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */

        a:active {

            color: green;

        }

链接伪类的注意事项

1.伪类保证书写的正确性，请按照LVHA的循序说明:link-:visted-:hover-:active

2.因为a链接在浏览器中具有默认样式，所以我们实际工作中需要给链接单独制定样式

      a {

            color: #333;

            text-decoration: none;

        }

 

        a:hover {

            color: #369;

            text-decoration: underline;

        }

:focus伪类选择器

获取焦点的表单元素

    /* // 把获得光标的input表单元素选取出来 */

        input:focus {

            background-color: pink;

            color: red;

        }

CSS元素选择模式

元素（标签）以什么方式进行显示的，比如为什么div独占一行，span一行可以有多个     

HIML元素一般分为块元素和行内元素

什么是元素显示模式     

作用网页多的标签很多，在不同的地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页

常见的块元素  h1  p  div  ul  ol  li等

块元素特点

1. 独占一行
2. 高度，宽度，外边距以及内边距都可以控制
3. 宽度默认值是容器的100%
4. 是一个容器及盒子，里面可以放行内及块元素

注意

1. 文字类元素不能是用块元素
2. P  H不能放div

行内元素的特点

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

注意