css复合器

css事项

一个标签可以有多个类选择器

例如

<div class="ss sd" >我的</div

CSS通配符选择器使用*定义，它表示选取页面中所有元素（标签）。不需要调用，会自动给所有元素样式。

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出多个标签 不能差异化选择 较多 p
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav
id选择器 一次只能选择一个标签 id属性只能在每个html文档中出现1次 一般和js搭配 #nav
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 *

font复合属性

font : font-style || font-variant || font-weight || font-size || line-height || font-family 

xiaomi字体   font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

text-indent:20px 文本首行缩进20ox

内部样式表 就是在html界面内部写样式，卸载style标签内部

行内样式表

<p style="color: yellowgreen;font-style: italic;">我们是css高阶</p>

外部样式表

 <link rel="stylesheet" href="style.css">

css引入方式总结

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 结构样式婚鞋 较少 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多 控制多个页面 
有序列表  
<ol>
    <li>一等奖</li>
    <li>二等奖</li>
    <li>三等奖</li>
</ol>
无序列表
<ul>
    <li>其他奖项等奖</li>
    <li>其他奖项等奖</li>
    <li>其他奖项等奖</li>
</ul>

快速格式化代码 vscode中 搜索emmet.include; 找到setting.json中

{
    "editor.fontSize": 16,
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify",
        "editor.formatOnType":true,
        "editor.formatOnSave":true
    },
    "emmet.syntaxProfiles": {

    },
    "emmet.excludeLanguages": [
    
        "markdown"
    ]
}

css复合器 分为两种 基础选择器和复合选择器

常用复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器

  ol li {
            color: pink;
        }


   <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>

子选择器

只能选择作为某元素的最近一级子元素，也叫做亲儿子 下面的 div离a最近，故选择a nav>a{}
<style>
        .nav>a {
            color: red;
        }
    </style>
<div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

并集选择器

  /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
   <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个第n个元素，伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover、:first-child
链接伪类 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
        
        
       /* 开发中的写法*/
          a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }

focus伪类选择器

   /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }

 <input type="text">

复合选择器

选择器 作用 特征 使用情况 隔开符合及用法
后代选择器 用来选择后代元素 子孙代 较多 符合是空格 .nav a
子代选择器 选择最近的一级元素 只选亲儿子 较少 符合是大于 .nav>a
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符合是逗号 .nav,header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a()和a:hover()
focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus

HTML元素一般分为块元素、行内元素两种类型

块元素

常见的块元素：

~

、

、

、
posted @ 2021-08-21 00:29  Gurad-your-heart  阅读(57)  评论(0)    收藏  举报