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> < ...
随机推荐
- electron中使用adm-zip将多个excel文件压缩进文件夹，使用XLSX以及XLSXStyle生成带样式excel文件
需求:electron环境下想要实现根据多个表生成多个Excel文件,打包存入文件夹内并压缩下载到本地.(实际场景描述:界面中有软件工程一班学生信息.软件工程二班学生信息.软件工程三班学生信息,上方有 ...
- Python实验报告（第5章）
实验5:字符串及正则表达式 一.实验目的和要求 学会使用字符串的常用操作方法和正确应用正则表达式 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 1.实例01:使用字符串拼 ...
- Rust-01 启航
安装 所谓工欲善其事必先利其器,我们学习Rust当然需要安装Rust.我们可以从Rust官网下载rustup工具进行rust的安装.安装完成后,我们在命令行中输入rustc --version便可以查 ...
- Ventoy制作启动盘和使用VMware测试启动盘（论文版）
- 1 Ventoy 1.1 Ventoy是什么 Ventoy是可用于制作启动U盘的开源工具,在占用少量引导分区容量后,其他空间依旧可以正常当一般的U盘读写文件.它的最大特点是只要将iso.win. ...
- 从log4j切换到logback后项目无法启动
1.背景 有个旧项目之前使用的是log4j2来打印日志的,因为某些原因,同事想换成logback. 换成logback改动也很简单,大致就一下2步: 删除log4j2.xml配置,新增logback. ...
- dfs 返回值用bool相对void会快一点
力扣 剑指 Offer 12. 矩阵中的路径 超时代码 dfs返回值是void,用类内的全局变量flag表示找到或没找到. class Solution { public: bool flag; in ...
- JVM是如何解决跨代引用问题的？
本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 CSDN: 码农BookSea 不知道自己的无知,乃是双倍的无知.--柏拉图 目录 跨代引用问题 记忆集 卡表 写屏障 ...
- 如何优化 Vue.js 应用程序
单页面应用(SPAs)当处理实时.异步数据时,可以提供丰富的.可交互的用户体验.但它们也可能很重,很臃肿,而且性能很差.在这篇文章中,我们将介绍一些前端优化技巧,以保持我们的Vue应用程序相对精简,并 ...
- JavaScript字符串的常用方法
一.操作方法 我们也可将字符串常用的操作方法归纳为增.删.改.查,需要知道字符串的特点是一旦创建了,就不可变 增 这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作 除了常用+以及 ...
- Centos7系统编译Hadoop3.3.4
1.背景 最近在学习hadoop,此篇文章简单记录一下通过源码来编译hadoop.为什么要重新编译hadoop源码,是因为为了匹配不同操作系统的本地库环境. 2.编译源码 2.1 下载并解压源码 [r ...