CSS基础选择器

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

02-CSS基础选择器
基础知识--css
css选择器
CSS基础语法(一)
CSS 学习总结
CSS相关---复合选择器
css美化网页元素
CSS的选择器
2022-02-02 CSS 第一天
css大纲

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;
}