乐趣区

关于前端:HTML和CSS的第三天

jiezi

一.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 属性）

退出移动版