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

<div id="id属性名字">

逻辑区的内容

</div>

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

二.span元素

<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{
悬停在一个链接上时会应用这个选择器
}
复制代码
相关文章
|
8天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0
|
2天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
35 0
|
2天前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
7 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
3天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
11天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
N..
|
24天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
27天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
前端开发
精通CSS+DIV网页样式与布局--滤镜的使用
        在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来说说滤镜的使用,首先,小编来简单的介绍一下滤镜的概念,CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。
1037 0