[散修弟子]CSS-8599|2020年03月01日的日报-技能树.IT修真院

发表于： 2020-03-01 21:27:49

1 1333

今天完成的事情：

一、学习css基础语法：css语法结构分为选择器和声明，其中声明包含属性和值。若值为多个单词一定要加双引号，定义多个声明时要用分号，每一行只有一个声明（只描述一个属性）可增加可读性。css对空格和大小写不敏感（与xhtml不同），除非涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。（class 和 id 名称是什么）

二、学习css高级语法：

1.选择器的分组：被分组的选择器可使用同一声明，选择器用逗号隔开

2.继承：所有子元素一般情况下会继承最高级元素的属性，子元素的子元素也一样。但是Netscape 4 和IE6及之前版本会忽略继承，因此需要用冗余法则：对后续选择器分组重复一次该声明即可。如果不想继承怎么办？对该选择器重新进行新的声明即可

3.派生选择器又叫上下文选择器：根据元素的上下文关系，用于指定（或改变）某元素的样式

三、为之前的html添加css样式

<!DOCTYPE html>
<html>
<head>
    <title>知识之树</title>
    <meta charset="UTF-8">
    <meta name="Keywords" content="厉害，666">
    <meta name="Description" content="技能树">
<style type="text/css">
    body{background-color:thistle}
    h1{background-color:aliceblue}

    </style>
</head>

<body>
    <h1>技能树</h1>
<a href="https://www.jnshu.com/home"><img src="p/timg.jpg"></a>.
</body>

</html>

四、学习资料--《浮动——float详解》

css浮动属性可以使图片、文本等内容脱离文本流自由浮动。看懂float属性的两种应用实例：带标题的图像浮动于右侧、使段落的首字母浮动于左侧

五、为html标签添加样式，使其成为黄色正方形，添加样式获得九宫格

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

<head>

    <title>九宫格</title>
    <style type="text/css">
        * {padding: 0;
            margin: 0;}

        body {width: 100%;}

        .a {display: inline-block;
            width: 30%;
            padding-top: 30%;
            background-color: orange;
            margin: 1%;}
    </style>
</head>

<body>
<div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
</div>
</body>