美文网首页
CSS基础选择器

CSS基础选择器

作者: 霖风_ | 来源:发表于2018-08-08 10:31 被阅读0次

    CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在 CSS 文件中
    多个样式定义可层叠为一

    通过上面的定义可以知道,CSS就是一层一层的将HTML的进行一个装饰,样式通常存储在样式表里,外部样式表,也就是对应微信小程序中的wxss中的内容,能够极大的提高效率。

    2.css中class定义:类选择器;在css中使用.来命名。

    比方说: 这就是一个最为简单的写法

    且可以重复的使用这个。以及通常直接命名为类也可。

    结合微信小程序中的应用就是:在wxml中使用类来定义格式,在wxss中来定义这个类。

    在这里面使用到各种各样的类
    在wxss中使用 .class来对类进行一个定义

    以及这里有一个css的专业的教程,可以通过这个来深入的学习CSS 。http://www.w3school.com.cn/css/css_selector_class.asp

    现在通过brackets,以及实验楼平台来学习CSS:

    1.首先介绍一下CSS基础语法:由选择器和声明组成--选择器通常是想要改变的元素的名称,声明就是能够修改元素的样式颜色等等 简单例子
    动手实践,建立一个css目录,并在该目录下建立一个index.html Mycss.css文件

    2.CSS高级语法:

    1.选择器的分组 image.png
    2.继承:子元素将继承高级元素

    3.派生选择器:通过元素的上下关系来定义位置


    image.png

    4.id选择器:可以为标有ID的HTML元素指定特定的样式,同时在CSS中以#来定义;目前常用的ID选择器常用语派生选择器之下。


    image.png 5.类选择器: image.png 6.属性选择器:为一个字段内的内容选择不同的属性 image.png
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="Mycss.css" type="text/css">
        </head>
        <body>
    <!--        通过不同的标签选择颜色,以及字体大小,以及能够看到继承关系-->
            <h1>hello world</h1>
            <a>book</a>
            <h2>h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <li><strong>red</strong></li>
    <!--    ID标签    -->
            <p id = "pid">hello css<a href = "www.shiyanlou.com">shiyanlou</a></p>
            <div id = "divid">this is div</div>
        </body>
    </html>
    
    
    color:red;font-size:50px;
    }
    body{
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("man.png")}
    h4{color:green;}
    
    li strong{
        color:red;
    }
    
    /*id 就是指在该文件下是唯一的*/
    #pid a {
        color: aqua;
    }
    #divid{
        color: aquamarine;
    }
    

    相关文章

      网友评论

          本文标题:CSS基础选择器

          本文链接:https://www.haomeiwen.com/subject/gqstbftx.html