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> < ...
随机推荐
- 【Azure 云服务】为Azure云服务配置上自签名的SSL证书步骤
问题描述 在使用Azure Cloud Service(云服务),默认的情况下都是使用的 HTTP 服务,通过 Visual Studio 2022 创建的默认 Cloud Service项目中,在S ...
- 使用nodejs编写api接口并部署到服务器上
一.用node.js编写api接口 1.安装node环境,没有就去下载nodejs, 下载地址 2.创建一个node项目, 新建一个目录文件,例node_proxy 3.在新建的node项目执行npm ...
- [常用工具] cvat安装与使用指北
cvat是一个非常好用的标注工具,但是也是非常难以安装的标注工具,所以本文简单讲一讲如何安装与使用cvat.cvat最好在ubuntu18.04安装,windows平台安装难度很大,然后在其他平台使用 ...
- Qt界面设计--侧边栏隐藏和滑出
在日常项目中,界面布局上经常使用到侧边栏的方式,在侧边栏放置控件进行复合使用,可以实现子功能界面的隐藏和滑出,效果展示如下: 界面控件很简单,主界面QWidget,侧边栏也用一个QWidget和一个按 ...
- 一类(One-Class)分类器
本文摘自博客和论文,参考文献请看文末. 一类分类技术概念 与传统的分类技术不同,一类分类技术仅采用隶属于一个类别的样本来训练分类器,其通常被用于某种极端场景,即训练样本仅包含正常样本,而异常样本不可得 ...
- RealWorld CTF 5th ShellFind 分析
前言 RealWorld CTF 5th 里的一道iot-pwn,根据真实设备固件改编而成,觉得题目贴近iot实战且很有意思,故在此记录一下复现过程. 题目分析 题目描述 Hello Hacker. ...
- Java微服务随机掉线排查思路
背景 我们的业务共使用11台(阿里云)服务器,使用SpringcloudAlibaba构建微服务集群,共计60个微服务,全部注册在同一个Nacos集群 流量转发路径: nginx->spring ...
- day01-SpringMVC基本介绍-01
SpringMVC介绍-01 1.离线文档 解压 spring-5.3.8-dist.zip文件. 位置:spring-framework-5.3.8/docs/reference/html/web. ...
- 11月15日内容总结——软件开发架构、网络编程介绍和OSI七层协议介绍
目录 一.软件开发架构 1.什么是软件开发架构 2.软件开发架构 架构方式一:c/s架构 架构方式二:b/s架构 架构优劣势 二.架构总结 三.网络编程前戏 1.什么是网络编程 2.学习网络编程的目的 ...
- Selenium CHANGELOG[最新版本4.8.0 计划中]
Selenium CHANGELOG[持续更新] 源文件 https://github.com/SeleniumHQ/selenium/blob/trunk/py/CHANGES 搬运工 对重点版本做 ...