元素之间的关系

1.父子关系

父子关系就是在一个双标签内嵌套其他元素，那么嵌套在其中的元素就相当于“子”，其外层元素相当于“父”。

<body>
    <div>
    <!-- <div>是<body>的子元素 ，<body>是父元素，<body>和<div>是父子关系-->
    </div>
</body>

2.兄弟关系

弟关系就是在“父标签”内有多个并列的元素，这些并列的元素之间就是兄弟关系。

<body>
    <div>
        <h1>这是后代元素1</h1>
        <p>这是后代元素2，和后代元素1是兄弟关系，并且互为兄弟元素</p>
    </div>
    <div>
        <h1>这是后代元素a</h1>
        <p>这是后代元素b，和后代元素a是兄弟关系，并且互为兄弟元素</p>
    </div>
</body>

后代元素1与后代元素a不存在父子关系或兄弟关系

元素分类

1.块级元素

常见块状元素：div,p,h1-h6,header,nav,aside,article,section等

块状元素特点：

  1. 以块的形式显示为一个矩形区域；
  2. 块状元素独占一行，自上而下排列；
  3. 块状元素可以定义自己的宽度和高度；
  4. 块状元素可以作为一个容器包含其他的块状元素或行内元素。

2.行内元素

常见行内元素：a,strong,b,img等

行内元素特点：

  1. 行内元素在一行逐个进行显示；
  2. 行内元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；

语义化标签

与DIV没有本质区别，只是它拥有语义

优点：每块区域含义清晰、有利于SEO、帮助特殊设备

header：用于表示页面或者某个区域的头部

nav：用于表示导航栏

aside：用于表示跟周围主题相关的附加信息

article：用于表示文章或其他可独立页面存在的内容

section：用于表示一个整体的一部分主题

footer：用于表示页面的底部

css

规则：选择器+声明块

p{color: yellow;}

color:字体颜色

font-size：字体大小

text-align：水平对齐方式

background-color：背景颜色

width：宽

height：高

text-indent：首行缩进

line-height：行高

html引入css

  1. 外部样式表在head里面通过link标签引入
  2. 内部样式表 在head里面通过style标签书写CSS样式
  3. 内嵌样式表 在元素开始标记里面通过style属性直接书写

当三种引入方式都存在时，就近原则，谁进就采用谁的

选择器

元素选择器元素名{属性：属性值}选中页面上所有对应的元素

p{
    color: yellow;
    font-size: 80px;
    text-align: center;
}

类选择器一个元素可以有多个类名.类名{属性：属性值}选中页面上所有有该类名的元素

html：<p class="text size">选择器</p>
css：
.text{
    background-color: aqua;
    font-size: 40px;
}
.size{
    width:100px;
    height:200px;
}

id选择器同类选择器相同#id名{属性：属性值}id选择器是唯一的，不能重复命名，一个元素只能有一个id名

html：<p id="text">选择器</p>
css：
#text{
    background-color: aqua;
    font-size: 40px;
    width:100px;
    height:200px;
}

子级选择器父元素>子元素{属性：属性值}只能一层一层的去选

div>p{
    font-size: 40px;
    width:100px;
    height:200px;
}

取类名

  1. 区分大小写
  2. 不能用纯数字或数字开头
  3. 不能加其他符号
    驼峰命名法 leftTop （第二个单词首字母大写）
    蛇形命名法left_top
    连字符left-top
  4. 望名知意