3.CSS-基础2

784 views

笔记目录

图片

5.CSS的引入方式

  1. 内部样式表（嵌入式）
  2. 行内样式表（行内式）
  3. 外部样式表（链接式）

5.1 内部样式表

内部样式表：将CSS代码写在html内部，放到了<style>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    a {
        text-decoration: none;
    }
    p {
        text-decoration: underline;
    }
    </style> 
</head>
<body>
    <p>我是用来测试下划线的</p>
    <a href="#">淘宝</a>
</body>
</html>

  • 未实现结构与样式完全分离，因为结构和样式还是写在一个html文档中。

  • <style>理论上是可以在任何位置的。

5.2 行内样式表

如果遇到这种情况：

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
</body>

我们只是想要求改第六段的文字样式，我们可以使用一种更加简单的方式，而不定义内部样式表。

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p style="font-size:20px; font-weight:800">第六段</p>
</body>

直接在一个标签内部修改，注意行内样式表修改的格式。

5.3 外部样式表（常用）

当有非常多的样式行时使用

第一步：建立一个.css文件，只写样式，不写<style>

第二步：在html文档中==引用==这个css样式表文档。在<head></head>中输入link然后点击tab自动补全：<link rel=“stylesheet” href=“style.css”>

<link rel="stylesheet">：被链接的文档是一个样式表文件，系统会自动输入<href="style.css">：css文档的路径

如：

CSS文档：（只有样式）

p{
    text-indent: 2em;
    text-decoration: underline;
    line-height: 36px;
}

HTML文档：（加上链接，不用写样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</body>
</html>

注意：外部样式表是开发中最常见的样式表，完全实现结构与样式相分离。

5.4 小结

图片

6. chorme调试

  1. 按下F12或者在空白处右键+检查，就可以调出调试界面
  2. 点击Element，其左边为HTML结构，右边为CSS样式（可改动数值）
  3. 点击结构中的某一行，右边样式会自动跳转到相应的类中
  4. 左上角小黑箭头，就可以点击页面的元素，查看这个元素的结构代码和样式代码
  5. 当程序出现bug的时候，样式代码左边会出现一个小黄警示牌，最右边有报错的代码行数，根据位置修改我们的源码
  6. ctrl+0 就可以恢复页面的原始样子

图片

7. Emmet 语法 !!!

7.1 HTML快速生成标签

  • 直接输入标签名，然后按tab就可以生成一串标签

例：输入div，然后加上tab：

    <div></div>
  • 想要生成多个标签，只需要输入标签名*number，然后按下tab就可以了

例：输入div*3，按下标签：

    <div></div>
    <div></div>
    <div></div>
  • 如果有父子级的标签，可以用>表示

例：ul和li是父子级的关系，可以输入ul>li，再按下tab，就可以生成一串代码，中间没有空格

<ul>
    <li></li>
</ul>
  • 如果有兄弟关系的代码，直接用+表示就可以了，中间没有空格

例：span和p是兄弟关系，输入span+p，再按下tab，就可以生成相应代码：

<span></span>
<p></p>
  • 如果想要生成带类名的标签，用.类名，然后加上tab键就可以了

例：输入.ziti，然后按下tab，就可以生成如下效果：（默认生成div）

<div class="ziti"></div>

或者输入span.ziti按下空格键，就可以生成相应的带有类的标签：

<span class="ziti"></span>
  • 自增符号$，*当需要同时生成多个标签时，常常需要对其进行*依次命名

例：输入.yangshi$*5 ：生成5个div标签并排序

<div class="yangshi1"></div>
<div class="yangshi2"></div>
<div class="yangshi3"></div>
<div class="yangshi4"></div>
<div class="yangshi5"></div>
  • 要生成的标签里默认带文字：在后面加上{ },在里面加入文字``

例：输入div{我真不错}*3 ：生成3个div标签加文字

<div>我真不错</div>
<div>我真不错</div>
<div>我真不错</div>

7.2 CSS快速生成样式

  • W200 按tab生成 width：200px;
  • Ih26 按tab生成 line-height：26px;
  • tac 按tab生成 text-align：center;
  • ti2em 按tab生成 text-indent：2em;
  • w 按tab生成 width：;
  • TDN 按tab生成 text-decoration：none ;

8 CSS复合选择器

复合选择器：基础选择器的组合（标签、ID、类、通配符）

常用的复合选择器包括：后代选择器（空格）子选择器（>）、并集选择器(,)、伪类选择器(:)、交集选择器（标签.类选择器）等等

8.1 后代选择器 ul li {}

后代选择器（包含选择器）：可以改父元素里所有子元素样式

语法: 标签1 标签2 { 属性：属性值; }

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="#">链接</a></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

修改ul中的a：

<style>
    ul li a {
        color: rgb(201, 65, 160);
    }
</style>

注意：

  • ul li a {}和 ul a {}效果相同，只作用在最后一个选择器a
  • ul li {}只会改变li的样式，不会改变li下面的a样式
  • 后代选择器只能使用在有层级关系的标签上
  • 后代选择器中间需要用空格隔开

8.2 子选择器 div > a{}

子元素选择器（子选择器）：只能改父元素里最近一级子元素样式

语法: 标签1> 标签2 { 属性:属性值; }

<body>
    <div class="nav">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
        <a href="#">链接3</a>
    </div>
</body>
<style>
    .nav>a {
      color: brown;
    }
</style>

子选择器：div>a，选择div最近层的a，也就是链接1和链接3

后代选择器：div a，会把所有a全部选上

8.3 并集选择器 div,p {}

并集选择器：给多个不同标签同时修改样式

语法: 标签1 , 标签2 , 标签3 { 属性:属性值; }

<body>
    <div>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul>
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
    </div>
</body>

把熊大和熊二改为粉色：

<style>
    div, 
    p {
        color: pink;
    }
</style>

注意：逗号连接的选择器不论样式，可以连接任意的选择器，如：

<style>
        div,
        p,
        div ul li {
            color: brown;
        }
</style>

注意：并集选择器最后一位后面没有逗号

交集选择器

同时满足多个选择器要求的一类标签。类.类/标签.类

8.4 伪类选择器

伪类选择器：向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素

书写：用冒号:表示，比如:hover、:first-child

包括：链接伪类（常用）、结构伪类等

8.4.1 链接伪类选择器 a：hover{}

链接伪类选择器：交互后链接文字会有特殊效果

图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
       <!-- 未访问过的元素，其字体变为灰色，去掉下划线 -->
       a:link {    
        color: #333;
        text-decoration: none;
       }

        <!-- 访问过的元素，其字体变为橘色 -->
        a:visited {   
        color: orange;
        }

        <!-- 鼠标从链接上经过，其字体变为天蓝色 -->
        a:hover {    
        color: skyblue;
        }

        <!--  鼠标正在按下还没有弹起鼠标的链接，其字体变为黄色 -->
        a:active {  
  color: yellow;
  }
    </style>

</head>

<body>
   <a href="#">小猪佩奇</a>
</body>

</html>

注意点:

  • 伪类链接选择器的顺序必须为LVHA ，依次为：link ：visited ：hover ：active

  • 实际工程中我们通常只使用：link和hover，当鼠标经过时变换颜色加个下划线就可以了

8.4.2 fcous伪类选择器 input：focus{}

fcous伪类选择器：处理表单元素的，当表单的光标在那个表单元素上，就显示被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        input:focus {
            background-color: pink;
            color: blue;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

生成了3个表单元素，当光标在哪个表单元素上时，就将背景变为粉色，光标颜色变为蓝色

图片

8.5 小结

图片