元素之间的关系

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. 【转载】SQL SERVER 表变量与临时表的优缺点

    什么情况下使用表变量?什么情况下使用临时表? -- 表变量: DECLARE @tb table(id int identity(1,1), name varchar(100)) INSERT @tb ...

  2. [编程基础] Python列表解析总结

    在本教程中,我们将学习使用Python列表解析(list comprehensions)相关知识 1 使用介绍 列表解析是一种基于现有列表创建列表的句法结构.列表解析提供了创建列表的简洁方法.通常需要 ...

  3. CentOS 7安装mysql5.7-单节点&主从

    一 下载 Mysql5.7下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads Mysql精细版本存档版本下载地址:https:/ ...

  4. BalticOI 2004 Sequence 题解

    题目链接在这里~ 对于序列\(\{a\}\),把每一个\(a_i\)减去一个\(i\),得到\(\{a'\}\)序列\(\{b\}\)同理. 因为\(b_1<b_2<...<b_n\ ...

  5. 题解CF893C Rumor

    思路 竟然朋友之间可以传递故事,那么,我们设两两有间接或直接的朋友关系的为一个友好集合,那么我们只要每一个友好集合买一次就好了. 那应该怎么买呢?由于题面让我们求的是[最少的价钱],那我们可以考虑每一 ...

  6. 优化if...else...语句

    写代码的时候经常遇到这样的场景:根据某个字段值来进行不同的逻辑处理.例如,不同的会员等级在购物时有不同的折扣力度.如果会员的等级很多,那么代码中与之相关的if...elseif...else...会特 ...

  7. 探究BrainSplit-集群脑裂

    本篇文章将会以redis集群为例,分享在主从集群中会导致数据丢失的一个问题:BrainSplit-集群脑裂 1.什么是集群脑裂 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而 ...

  8. 定时调度插件------Longbow.Tasks

    官网地址Longbow.Tasks 使用说明 dll引用 使用NuGet 搜索Longbow.Task可找到相关版本的dll 目前最新的为7.0.0版本,需net6.0+ 如果低版本用户可使用5.2. ...

  9. Blazor嵌套传递

    实现创建一个Blazor Server空的应用程序 创建一个Tab.razor 并且添加以下代码 <div> @Title </div> @code { [CascadingP ...

  10. Ubuntu下安装cURL库用于libcurl开发

    http://archive.ubuntu.com/ubuntu/pool/main/c/curl/curl_7.22.0.orig.tar.gz 不要问我为什么,根据cURL主页的下载向导给的就是这 ...