元素之间的关系

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. 望名知意

HTML元素关系与CSS初步了解的更多相关文章

  1. Html/Css 初步认识笔记

    1.什么是 HTML ? HTML(HyperText Markup Language) 的学名是超文本标记语言. 标记用来表示网页内容要如何显示,自身不显示 .<我就是标记> 标记成对出 ...

  2. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  3. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  4. CSS初步学习

    1.选择器: 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 ...

  5. CSS初步了解

    CSS 概述 个人理解为对html的扩展,对html关键字进行功能添加. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表 ...

  6. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  7. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  8. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  9. HTML/CSS初步了解

    一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...

  10. 通过id设置的css属性和通过元素设置的css属性冲突了，优先级哪个高？

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>div test</title> < ...

随机推荐

  1. [OpenCV实战]41 嵌入式计算机视觉设备选择

    文章目录 1 简介 1.1 深度学习与传统计算机视觉 1.2 性能考量 1.3 社区支持 2 结论 3 参考 在计算机视觉领域中,不同的场景不同的应用程序需要不同的解决方案.在本文中,我们将快速回顾可 ...

  2. 《Kubernetes Operator 开发进阶》- 作者絮絮叨

    目录 今天聊啥 本书读者 推荐序 推荐序1 - 邓洪超 推荐序2 - 任晶磊 推荐语 推荐语1 - 张磊 推荐语2 - 宋净超 推荐语3 - 王泽锋 推荐语4 - 周鹏飞 推荐语5 - 郑东旭 本书简 ...

  3. vue 中安装并使用echart

    本文为博主原创,转载请注明出处: 1.安装echart 依赖: 安装命令: npm install echarts --save 在vscode 的终端窗口进行执行,如图所示: 执行完之后,查看 项目 ...

  4. python进阶之路5之流程控制（垃圾回收机制）

    垃圾回收机制 """ 有一些语言,内存空间的申请和释放都需要程序员自己写代码才可以完成 但是python却不需要 通过垃圾回收机制自动管理 ""&qu ...

  5. 为测试管理正名，华为云CodeArts TestPlan的守护之道

    摘要:华为云CodeArts TestPlan既有公有云版本,也有下沉到私有云的版本. 本文分享自华为云社区<为测试管理正名,华为云CodeArts TestPlan的守护之道>,作者:云 ...

  6. centos7.6安装本地yum源

    centos7.6安装本地yum源 前言:文章内容可能会因环境不同而有所差异,所谓集思广益说不定灵感就来了呢; 文章初衷旨在交流学习.记录个人成长,如果能帮助到您,那就点个赞噢. 环境说明: 1.本实 ...

  7. 发布并部署NCF站点的那些事

    简介 开工第一天,祝大家2023年钱兔无量,技术兔飞猛进 为更加方便大家一站式打通所有使用NCF的环节,在新年开工的第一天给大家带来如何发布最新版本的站点 无论你的网站在开发环境做的多么的炫酷,实用, ...

  8. BBS登录与注册功能的总结

    BBS登录与注册功能的总结 一.表设计:表名 外键字段 表名 models.py from django.db import models from django.contrib.auth.model ...

  9. KEIL5、STM32CubeMX、STM32CubeIDE 下载、安装

    一.资源下载 Keil5下载链接: https://www.keil.com/download/product/ STM32 标准库芯片包下载链接: https://www.keil.com/dd2/ ...

  10. linux-基础及相关软件安装

    1.linux常见岗位 自动化运维.容器运维.DBA ps:会的越多给的就越多!!! """ IDC运维:机房运维员 不要做!!! """ ...