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> < ...
随机推荐
- MS17-010漏洞复现（永恒之蓝）
0x01:温馨提示 微软已于2017 年 发布MS17-010补丁,修复了"永恒之蓝"攻击的系统漏洞,一定要及时更新Windows系统补丁. 本次只是简易的复现MS17-010,成 ...
- 真正“搞”懂HTTP协议07之队头阻塞真的很烦人
这一篇文章,我们核心要聊的事情就是HTTP的对头阻塞问题,因为HTTP的核心改进其实就是在解决HTTP的队头阻塞.所以,我们会讲的理论多一些,而实践其实很少,要学习的头字段也只有一个,我会在最开始就讲 ...
- 真正“搞”懂HTTP协议08之重定向
我们知道,用来传输页面的协议就是HTTP协议,全称是超文本传输协议,而浏览器展示的页面则是用HTML编写的,HTML的全称则是超文本标记语言.你看,都叫做超文本,我在第一篇文章的时候也详细的聊过,超文 ...
- angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件
首先来说屏幕自适应 HTML <div class="container right_table"> <nz-table #basicTable nzBorder ...
- ng-alain创建组件添加路由导航菜单项基础步骤详解
首先呢~ 我们要在需要创建模块的路径例如AAA目录下,在终端打开(就是和在shell窗口打开一样的) 然后 ng g ng-alain:module XXXmodule 好了,创建了一个模块 接下来会 ...
- 安装nginx并配置nginxscript(njs)实现请求头验证或者分流
本文以centos为例 nginx+nginxscript 源码安装nginx 安装必要环境 安装gcc环境 sudo yum -y install gcc gcc-c++ 安装 pcre,让ngin ...
- FAQ docker进程启动失败处理案例分享
docker进程启动失败处理 背景 有同学反馈在启动docker的时候遇到了如下问题:docker启动报错 [root@wuxianfeng ~]# systemctl start docker Jo ...
- Spacemacs换源无效果
我改了发现没用,找了好久问题,才发现变量名改了,以前修改源是configuration-layer–elpa-archives这个变量,现在改为configuration-layer-elpa-arc ...
- .net NPOI Excel导入：时间格式2022/5/26导入变成26-5月-2022
1.问题由来 在做一个导入的需求时,测试导入模板,无论导入模板里的日期设置成何种日期格式到代码中都会提示有不正确的格式化数据,加断点调试发现,导入的日期如:Excel表格中是2022/5/26,断点看 ...
- ubuntu18.04下联想电脑不能打开wifi
一.问题描述: 本人使用联想拯救者14IFI笔记本在安装Ubuntu系统时会出现无线硬件开关关闭的问题,当然也就无法连网(Wi-Fi). (最好先使用 sudo rfkill unblock all) ...