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
望名知意
HTML元素关系与CSS初步了解的更多相关文章
- Html/Css 初步认识笔记
1.什么是 HTML ? HTML(HyperText Markup Language) 的学名是超文本标记语言. 标记用来表示网页内容要如何显示,自身不显示 .<我就是标记> 标记成对出 ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- CSS初步学习
1.选择器: 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 ...
- CSS初步了解
CSS 概述 个人理解为对html的扩展,对html关键字进行功能添加. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表 ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- selenium元素定位之css选择器
在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- HTML/CSS初步了解
一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...
- 通过id设置的css属性和通过元素设置的css属性冲突了，优先级哪个高？
---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>div test</title> < ...
随机推荐
- 【爬虫+数据分析+数据可视化】python数据分析全流程《2021胡润百富榜》榜单数据！
目录 一.爬虫 1.1 爬取目标 1.2 分析页面 1.3 爬虫代码 1.4 结果数据 二.数据分析 2.1 导入库 2.2 数据概况 2.3 可视化分析 2.3.1 财富分布 2.3.2 年龄分布 ...
- 用Dockerfile制作一个java应用镜像，ubuntu基础篇
内容介绍: (1) 本章目的,将一个自行开发的java程序webpay-api,制作为docker自定义镜像,并且进行部署. (2) 实验环境: 物理机:VMware 虚拟机 + CentOS 7.8 ...
- 学习ASP.NET Core Blazor编程系列十九——文件上传（下）
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
- 初探富文本之OT协同算法
初探富文本之OT协同算法 OT的英文全称是Operational Transformation,是一种处理协同编辑的算法.当前OT算法用的比较多的地方就是富文本编辑器领域了,常用于作为实现文档协同的底 ...
- [cocos2d-x]关于菜单项
菜单项的分类 MenuItem:菜单项类,它是一个虚基类,因此必须实现它的子类,再把子类对象赋给父类指针. MenuItemFont:字体菜单项. MenuItemAtlasFont:字体菜单项,和第 ...
- 最新编程语言排名Python、C、Java 和 C++ 已形成四足鼎立之势
引言 技术的千变万化,都是有迹可循的,随着最新的 TIOBE 十月编程语言榜单重磅发布,不同开发语言的排名和发展趋势也随之揭晓! 四大编程语言不断增强其主导地位 曾几何时,编程语言界中 Java.C. ...
- RISC-V 平台移植 RTOS
ARM 上移植实时操作系统大家可能比较熟悉,且例程较多,对于 RISC-V 内核的 MCU,可能相对比较陌生.下面结合 WCH 的 CH32V103 和 CH32V307 两款芯片来详细说下针 ...
- 12月21日内容总结——forms组件渲染标签、展示信息、校验数据的一些补充，forms组件参数和源码剖析，modelform组件，Django中间件
目录 一.forms组件渲染标签 二.forms组件展示信息 三.forms组件校验补充 四.forms组件参数补充 五.forms组件源码剖析 六.modelform组件 什么是modelform组 ...
- ES6块级作用域let声明和const声明以及与var之间的区别
一.ES6块级作用域 let 声明 块级声明用于声明在指定作用域之外无法访问的变量,存在于: ①函数内部 ②块内(字符{和}之间的区域) 禁止重声明 (1)如果在作用域由已经存在某个标识,再用let声 ...
- Django中需要修改配置
Django需要修改配置 1.修改templates中的路径配置: TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.Django ...