HTML和CSS设计03——CSS基础

CSS基础

---

一.CSS基本语法

选择器{属性：属性值}

二.CSS引用方式

1.行间样式

<div style="color:red;width:100px">
...
</div>

2.内部样式

<style>
   p{
   ...
    }
</style>

3.外部样式

先创建一个CSS文件，再用link标签引入这个标签

<link rel="stylesheet" href="style.css">···Emment写法：link:css

4.导入外部样式

先创建一个CSS文件，再在style中用import引入这个文件（一般不用）

三.CSS选择器

1.*：匹配html中的所有元素

2.标签选择器：匹配对应的标签

3.类选择器：匹配对应的class命名的标签

.wrapper{
        ...
      }
      
<div class="wrapper">类选择器</div>

4.id选择器：匹配对应的id的标签

#content{
       ...
       }
       
<p id="content">id选择器</p>

5.派出选择器：根据上下文来确定选择标签

.box li{
       ...
      }
      
<ul class="box">
     <li>001</li>
     <li>li002
        <ul>
          <li>sub1</li>
        </ul>
      </li>
</ul>

四.选择器分组

让多个元素有相同样式，一般用于设置公共样式

<style>
   h1,.box,h{
            ...
          }
</style>

五.选择器继承

子元素可以继承父类元素的样式，反之不行

六.CSS字体

CSS字体(https://segmentfault.com/a/11...

Tip:

font可以按顺序复合使用:font:font-style font-variant font-weight font-size font-family

例子：font:italic small-caps bolder;

七.CSS背景

CSS背景（https://segmentfault.com/a/11...）

八.伪类选择器

1.设计链接不同的状态

:linked/:visited/:hover/:active

<style>
   a:linked{
          color:red;
          }
   a:visited{
          color:red;
          }
    a:hover{
          color:red;
          }
    a:active{
          color:red;
          }
</style>

2.表单获取焦点，用于文字框上

：focus

<style>
   input:focus{
      outline:1px solid #f600
      }
</style>

<input type="text">

3.选择元素的某个元素

:first-child,:last-child,:nth-child(number)

<style>
    ul li:first-child{
       color:#ff1129;
       }
     ul li:last-child{
       color:#38ff24;
       }
     ul li:nth-child(2){
       color:#2c3cff;
       }
</style>

效果：

九.属性选择器

属性选择器（https://segmentfault.com/a/11...）

十.关系选择器

1.空格：后代选择器
2.>:只选择儿子元素
3.+:兄弟选择

<style>
    ul li+li+li{
              list-style-type:none;
              color:red;
            }
</style>

效果：

十一.伪元素选择器

伪元素选择器（https://segmentfault.com/a/11...）

十二.浮动

作用：让块级元素不独占一行
float:left/right/inherit(从父类继承float属性）