css引入方式

1·行内式

1·行内样式表(行内式):直接在标签的内部的style属性设置css样式

<div style="color:pink;"> 粉红色行内式 </div>

2·嵌入式

2·内部样式表(嵌入式):就是子啊HTML页面的内部写样式，但是要单独写到<style>标签内部

 <style>
    .pink {
        color: pink;
    }
 </style>
 <div class="pink"> 粉红色嵌入式</div>

3·链接式

3·外部样式表(链接式):单独写到一个css文件里面，之后把css文件引入到HTML页面中使用 分两步： 1·建立一个后缀为.css的文件，将所有的css代码放到这里面 2·在HTML页面中，使用<link>标签引入这个文件

<link rel="stylesheet" href="[css文件路径]">

Emmet语法

快速格式化文档

shift+alt+f

css复合选择器

1·复合选择器由至少2个的基础选择器组合而成 2·常用的复合选择器包括，后代选择器，子选择器，并集选择器，伪类选择器等

后代选择器

例如，页面中同时有无序列表<ul></ul>和有序列表<ol></ol>, 他们之中都有<li></li>标签，但是当我们我们只要选择其中一个的<li></li>标签时，就可以用到后代选择器

语法：

元素1 元素2 {
    样式申明 
}
表示选择元素一里面所有的元素二标签

    <style>
        ol li {
            color: pink;
        }

    </style>

    <ol>
        <li> 我是ol中的li </li>
        <li> 我是ol中的li </li>
        <li> 我是ol中的li </li>
    </ol>

    <ul>
        <li> 我是ul中的li </li>
        <li> 我是ul中的li </li>
        <li> 我是ul中的li </li>
    </ul>

只有有序列表<ol></ol>里面的字体变粉红色

1. 我是ol中的li
2. 我是ol中的li
3. 我是ol中的li

• 我是ul中的li
• 我是ul中的li
• 我是ul中的li

当出现这这样的情况时

1. 我是ol中的li
2. 我是ol中的li
3. 我是ol中的li

• 我是ul中的li
• 我是ul中的li
• 我是ul中的li

• 我是ul中的li
• 我是ul中的li
• 我是ul中的li

我想要第二个无序列表里面的 最后一行 我是ul中的li变为黄色yellow

此时可以写为

<style>
       .red ol li a{
            color: yellow;
        }  
</style>

<ol>
    <li> 我是ol中的li </li>
    <li> 我是ol中的li </li>
    <li> 我是ol中的li </li>
</ol>

<ul>
    <li> 我是ul中的li </li>
    <li> 我是ul中的li </li>
    <li> <a href="#"> 我是ul中的li </a></li>
</ul>

<ul class="red">
    <li> 我是ul中的li </li>
    <li> 我是ul中的li </li>
    <li> <a href="#"> 我是ul中的li </a> </li>
</ul>

1. 我是ol中的li
2. 我是ol中的li
3. 我是ol中的li

• 我是ul中的li
• 我是ul中的li
• 我是ul中的li

• 我是ul中的li
• 我是ul中的li
• 我是ul中的li

后代选择器中的元素也可以是其他任意的基础选择器

<style>
       .red ol li a{
            color: red;
        }  
</style>

子元素选择器

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素

语法：

元素1 > 元素2{
    样式声明
}

表示只选择元素一里面所有的最近一级的直接后代(子元素) 例如：将div里面最近一级的<P></P>里面的字体设置为红色

div > a {
    color: red;
}

<style>
    .divv > a {
        color: red;
}
    </style>
<div class="divv">
    <p> <a href="#"> div标签中p标签中的a标签</a></p>
    <a href="#"> div标签直接的a标签</a>
<div>

只把div标签中直接存在的a></a>标签变红

元素1,元素2···{
    样式声明
}

ul,div{
    color:red：
}

   a:[链接效果词]{

   }

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

<a href= "#"> 鼠标划到我这里变为绿色</a>

<style>
    input:focus{
        background-color:pink;
        color:red;
    }
    </style>
    <input type="text">
    <input type="text">
    <input type="text">