标签：css2 repeat color 元素行内 background 选择器

用了次html写笔记很让我emo 我还是用回md吧

有出错的「地方」，我会即使改正的

emmet
CSS的复合选择器
CSS的元素显示模式
CSS的背景

1. Emmet语法

简介

Emmet插件能提高html&&CSS的编写速度， vscode内部已集成该语法。

快速生成HTML结构语法（补全加特殊简写）

输入标签名即可生成标签（其实不是标签大部分也可以可能就是个补全的功能）
- 可以快速生成多个
父子级可以用 > 如： ul>li
兄弟级可以用+ 如： div+p
生成的标签带类名或 id 名用 .类名 #id名
$ 可以实现自动往下叔叔（雾）
要生成标签内部内容可以写在{}里哦

    <!-- ul>li>div.${我爱六花}*3+p#${情系安娜}*3 -->
    <ul>
        <li>
            <div class="1">我爱六花</div>
            <div class="2">我爱六花</div>
            <div class="3">我爱六花</div>
            <p id="1">情系安娜</p>
            <p id="2">情系安娜</p>
            <p id="3">情系安娜</p>
        </li>
    </ul>
    <!-- 不过倒是发现 要想生成树这样的 好像我不会 （感觉是没必要的 太麻烦了 与其记住语法 不如enter后多写点）-->

快速生成CSS样式语法(补全)

     /* bgi */
         background-image: url();
     /* td */
         text-decoration: none;
     /* w100 */
         width: 1000px;

妈妈生的
1. 行内元素*几默认好像是在一行可以改

2.CSS的复合选择器

介绍：基础选择器组合而成准确高效的选择标签

包括：后代选择器子选择器并集选择器伪类选择器

后代选择器

简介：又称为包含选择器可以选择父类标签中的子类（甚至是曾曾...孙类）辈分大的在前依次往后写中间以空格作为分割
语法 : 元素1 元素2 {样式声明}
元素1 和元素 2可以是任意基础选择器

    <!-- 一选就连同 后代一起选了 比如 li中的div -->
    <ol>
        <li>我爱1花</li>
        <li>我爱2花</li>
        <li>我爱3花</li>
        <li>
            <div>iloveu</div>
        </li>
    </ol>
    <ul>
        <li>我爱1花</li>
        <li>我爱2花</li>
        <li>我爱3花</li>
        <li>我爱4花</li>
        <li>我爱5花</li>
        <li>我爱6花</li>
    </ul>
    <ol class="nav">
        <li>我爱1花</li>
        <li>我爱2花</li>
        <li>我爱3花</li>
        <li>我爱4花</li>
        <li>我爱5花</li>
        <li>我爱6花</li>
        <li>我爱7花</li>
        <li>
            <!-- a是比较特殊 看弹幕说 a的颜色不继承父类-->
            <a href="#">iloveu</a>
        </li>
    </ol>

    <style>
        ol li {
            color: pink;
        }
        /*类名*/
        .nav li {
            color: red;
        }
    </style>

子选择器(只能选择儿子)

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

    <style>
        .nav>a {
            color: pink;
        }
    </style>

    <div class="nav">
        <a href="#">我是老大</a>
        <p><a href="#">我是老五~</a></p>
        <a href="">我是老六~~</a>
    </div>

并集选择器

选择多组标签用于集体声明
多个元素之间用 , 分隔
语法：元素1, 元素2 {样式声明} 逗号可以理解为和的意思

    /* 尽量换行 也是我们勾指起誓的誓言呢 */
    div ,
    p ,
    span ,
    ul>li {
        color: pink;
    }

    <div>胸大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul>
        <li>猪大哥</li>
        <li>电路老师</li>
        <li>模电老师</li>
    </ul>

链接伪类选择器

属于伪类选择器它用于向某些选择器添加特殊效果 特点是用:表示

    <style>
         /*按照lvha的顺序写*/   
        a:link {
            color: #333;
            text-decoration: none;
        }

        a:visited {
            color: orange;
        }

        a:hover {
            color: skyblue;
        }

        a:active {
            color: green;
        }
    </style>

    <a href="#">我是你bàbà</a>

开发中常一个 a 一个 a:hover

focus伪类选择器

用于选取获得焦点的表单元素（input 和 textarea 都试过可以用）

    <style>
        /*选中的时候有 离开就无了 就像个声控灯一样*/
        textarea:focus {
            color: red;
            background-color: pink;
        }
    </style>


    <textarea name="" id="" cols="30" rows="10">我爱猫猫  </  textarea>
    <input type="text">
    <input type="text">

3. CSS的元素显示模式

元素显示模式就是元素以什么方式进行显示
一般分为块元素和行内元素

块元素

常见的块元素： <h1>~<h6> <p> <div> <ul> <ol> <li>
特点：
1. 独占一行
2. 高宽内外边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器或盒子
5. 文字类的元素中不能使用块级元素比如p 中不能放div

     <style>
         div {

             height: 200px;
             background-color: pink;
         }
     </style>

    <div>比较霸道 ， 自己独占一行</div>瑟瑟发抖
    <!-- 检查里面是  <p>我爱你</p><div>这里有问题</div><p></p>-->

    <!-- <p>我爱你
    <div>这里有问题</div>
    </p> -->

行内元素
1. 常见的行内元素： <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
2. 也叫内联元素
3. 特点：
  1. 相邻的行内元素在一行上一行可以放多个
  2. 高宽的直接设置是无效的
  3. 默认宽度是本身内容宽度
  4. 只能容纳文本或其他行内元素
4. 注意:
  1. 链接里面不能在放链接
  2. 链接里面可以放块级元素
```
    <style>
        span {
            background-color: pink;
            width: 200px;
            height: 200px;
        }
    </style>
```
```
    <span>
    我爱你
    </span>
    <strong>猫猫</strong>
```
行内块元素
1. 有行内元素的特点也有块元素的
2. 常见的： <img> <input> <td>
3. 特点 :
  1. 一行可以显示多个
  2. 默认宽度是本身内容的宽度
  3. 高度内外边距都可以控制
元素显示模式转换
1. 转换为块级元素： display:block;
2. 转换为行内元素： display:inline;
3. 转换为行内块 : display:inline-block;

案例：简介版小米侧栏

 <style>
     /*把a转换为块级元素  去设置宽和高*/
     a {
         display: block;
         font-size: 14px;
         text-decoration: none;
         width: 230px;
         /*去掉height也可以哦  看来块级元素的高度 也是由内容来决定的说呢*/
         /*height: 40px;*/
         color: #fff;
         background-color: #55585a;
         text-indent: 2em;
         /* 小几乔 文字的高度等于盒子 的高度 就可以 实现 文字垂直居中了*/
         line-height: 40px;
     }

     a:hover {
         background-color: #ff6700;
     }
 </style>

 <a href="#">手机 电话卡</a>
 <a href="#">电视 盒子</a>
 <a href="#">笔记本 平板</a>
 <a href="#">出行 穿戴</a>
 <a href="#">智能 路由器</a>
 <a href="#">健康 儿童</a>
 <a href="#">耳机音箱</a>

4. CSS的背景

背景颜色
1. 语法： background-color: 颜色值;
2. 默认值是 transparent 透明你就是小透明 bà （幽情提示透明色和白色的奶罩是不一样滴哦 lsp都知道的（苍蝇搓手））
背景图片 (常用于超大的背景图或装饰性的小图片)
1. 语法： background-image: ;
2. 值可以为
参数值作用

none 无背景图（默认的）

url 使用绝对或相对地址指定背景图像

背景平铺

给我一种以前大头贴的感觉
语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y;

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

背景图片的位置
1. 语法 : background-position: x y;
2. x y 可以使用方位名词或精确单位

标签：css2,repeat,color,元素,行内,background,选择器
From： https://www.cnblogs.com/RikkaandLcj/p/16989747.html

css2

用了次html写笔记很让我emo 我还是用回md吧

emmet

CSS的复合选择器

CSS的元素显示模式

CSS的背景

1. Emmet语法

简介

2.CSS的复合选择器

3. CSS的元素显示模式

4. CSS的背景

相关文章

赞助商

阅读排行

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

css2

用了次html写笔记 很让我emo 我还是用回md吧

emmet

CSS的复合选择器

CSS的元素显示模式

CSS的背景

1. Emmet语法

简介

2.CSS的复合选择器

3. CSS的元素显示模式

4. CSS的背景

相关文章

赞助商

阅读排行

用了次html写笔记很让我emo 我还是用回md吧