HTML元素关系与CSS初步了解
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等
块状元素特点：
-
以块的形式显示为一个矩形区域；
-
块状元素独占一行，自上而下排列；
-
块状元素可以定义自己的宽度和高度；
-
块状元素可以作为一个容器包含其他的块状元素或行内元素。
2.行内元素
常见行内元素：a,strong,b,img等
行内元素特点：
-
行内元素在一行逐个进行显示；
-
行内元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；
语义化标签
与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
-
外部样式表 在head里面通过link标签引入
-
内部样式表 在head里面通过style标签书写CSS样式
-
内嵌样式表 在元素开始标记里面通过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;
}
取类名
-
区分大小写
-
不能用纯数字或数字开头
-
不能加其他符号
驼峰命名法 leftTop （第二个单词首字母大写）
蛇形命名法 left_top
连字符 left-top
-
望名知意
