zoukankan      html  css  js  c++  java
  • 前端-CSS-2-选择器

    基本选择器

    首先来说一下,什么是选择器。在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,

    某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为

    它们设置样式了。 选择器为样式规则指定一个作用范围。

    基础选择器包括:

    • 标签选择器
    • 类选择器
    • ID选择器
    • 通用选择器

    标签选择器

    ID选择器

    类选择器

    通用选择器

     总结:

    <!-- 
            css的选择器:1.基本选择器  2.高级选择器
    
            1.标签选择器
                标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等
                不管标签藏的多深,都能选中
                选中的是所有的,而不是某一个,所以说 "共性"  而不是 ”特性“
    
            2.id选择器
                # 选中id
    
                同一个页面中id不能重复。
                任何的标签都可以设置id  
                id命名规范 要以字母 可以有数字 下划线 -  大小写严格区分  aa和AA
    
    
            3.类选择器
    
            1.所谓类 就是class  . class与id非常相似 任何的标签都可以加类
            但是类是可以重复    归类
    
            2.同一个标签中可以携带多个类 用空格隔开
    
    
            类的使用 能够决定前端工程师的css水平到底有多牛逼?
    
            一定要有”公共类“的概念
    
    
            总结:
    
            1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
            2.每个类要尽可能的小,有公共的概念,能够让更多的标签使用
    
            玩好了类 就等于玩好了css中的1/2
    
            到底使用id还是用class?
            答案:尽可能的用class。除非一些特殊情况可以用id
    
            原因:id一般是用在js的。也就是说  js是通过id来获取到标签
    
         -->

    小练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小练习myself</title>
            <style type="text/css">
            /*.lv{*/
                /*color: #4cae4c;font-size: 20px;*/
            /*}*/
            /*.lv2{*/
                /*color: #2aabd2;*/
            /*}*/
            /*.lv3{*/
                /*color: #c7254e;*/
                /*text-decoration: underline;*/
            /*}*/
    
                /*设置公共的 下面直接调用*/
            .big{
                color: #4cae4c;font-size: 20px;
            }
            .lv{
                color: #2aabd2;
            }
            .line{
    
                text-decoration: underline;
            }
    
    
            </style>
    </head>
    <body>
        <div>
            <!--<p class="lv">The best revenge is massive success. </p>-->
            <!--<p class="lv2">The best revenge is massive success. </p>-->
            <!--<p class="lv3">The best revenge is massive success. </p>-->
    
            <!--直接调用上面公共的定义的class接口-->
            <!--2.同一个标签中可以携带多个类 用空格隔开-->
            <p class="lv big">The best revenge is massive success. </p>
            <p class="lv">The best revenge is massive success. </p>
            <p class="lv big line">The best revenge is massive success. </p>
    
        </div>
        <div></div>
        <div></div>
    </body>
    </html>
  • 相关阅读:
    动态演示面动成体:圆柱、圆锥、圆台、球——GeoGebra制作教程
    修改图形颜色
    圆柱面的指令生成之一--------参数方程
    使用 EPPlus 封装的 excel 表格导入功能 (二) delegate 委托 --永远滴神
    使用 EPPlus 封装的 excel 表格导入功能 Func--小试牛刀
    markdown画图
    redis cluster集群搭建
    IQueryable的简单封装
    为 linux 换源
    解决dotnet-Angular的跨域(cors)问题
  • 原文地址:https://www.cnblogs.com/foremostxl/p/9822965.html
Copyright © 2011-2022 走看看