Html和Css学习笔记-html进阶-div与span

简介: Html和Css学习笔记-html进阶-div与span 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。

Html和Css学习笔记-html进阶-div与span

此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。

这里所介绍的html和css的版本为html5与css3

Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言

Css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

Html和Css验证工具的地址:http://validator.w3.org/

一.div元素

就相当于一个容器,可以把元素一同放在这个容器里,这个容器也可以成为逻辑区,div可以嵌套使用,并配合使用id属性,例子如下:
<div id="id属性名字">

逻辑区的内容

</div>

书语:在页面中要使用

,但不要滥用。如果这样做有助于你将页面分解为逻辑区,从而保证结构清晰并便于指定样式,那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加
,就只会让页面复杂,而没有任何实际好处

二.span元素

元素允许你为块级内容创建逻辑划分,元素则采用类似的方式建立内联内容的逻辑分组,使用方式,举例如下:
<span class="类的名字">xxxx</span>

三.新增css属性

1.width:xxxx;设置元素内容区的宽度

2.float:xxx;定义元素在哪个方向浮动

3.clear:xxxx;定义了元素的哪边上不允许出现浮动元素

4.position:xxxx;属性规定元素的定位类型。

四.css中如何选择子元素

所谓子元素就是元素中的元素,具体指定方法举例如下:

第一种,未使用id元素

父元素名字 子元素名字{

}

第二种 使用id元素

#id属性名字 子元素:
"

五.a元素的css配置方法 

a元素在前面的博文中提到过,是设置链接的,链接不点击是为蓝色有下划线,点击后是红色有下划线,悬停会显示链接内容,那这部分内容的css样式更改方式如下:、

第一种方法

复制代码
a:link{
这是选择器应用于处于未访问状态的链接
}
a:visited{
这是选择器应用于已访问的链接
}
a:hover{
悬停在一个链接上时会应用这个选择器
}
复制代码

第二种方法,运用伪类

复制代码
#类的名字 a:link{
这是选择器应用于处于未访问状态的链接
}
#类的名字 a:visited{
这是选择器应用于已访问的链接
}
#类的名字 a:hover{
悬停在一个链接上时会应用这个选择器
}
复制代码
相关文章
|
9天前
|
前端开发
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
|
9天前
|
前端开发 JavaScript
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
|
9天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
3天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
9天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
9天前
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
|
9天前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
9天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
9天前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
下一篇
云函数