CSS3-04 样式 3_html/css_WEB-ITnose
程序员文章站
2022-05-20 15:26:10
...
前言 概述 链接指定了资源的位置,具有不同的状态。点击链接可以访问相应的资源。 链接的状态 selector:link:未访问的链接状态 selector:visited:已访问的链接状态 selector:hover:鼠标放在链接上的状态 selector:active:点击链接时的状态 设置链接状态的顺序规则 hover 状态必须在 link 和 visited 状态之后 active 状态必须在 hover 状态之后 示例 代码
列表 概述 在 HTML 中,我们可以使用列表标签(
示例 代码
表格 概述 CSS 赋予了表格更加多样的格式,使我们可以创造多种多样的表格。 可控制的表格样式 “包装样式” 边框(Border) 语法:border: 1px solid blue; 注意:表格默认情况下,单元格之间会有一个间距。所以,若你只设置了 border 属性,那么你看到的将是一个双边框的表格。需要使用 border-collapse 来控制是否取消单元格之间的边距,即显示单边框。 填充(Padding) 语法:padding: 5px; 尺寸(width/height) 语法: width: 5px; height: 5px; 文本样式 文本颜色(color) 语法: color: orange; 文本对齐(text-align) 水平(text-align) 语法:text-align: center; 垂直(vertical-align) 语法:vertical-align: bottom; 标题 语法:caption-side: bottom; 示例 代码
导航栏 概述 说到导航栏,大家可能比较陌生;但是到目前为止,说到列表,大家应该很熟悉了。导航栏并不是 HTML 中的元素,它是设置了样式的 HTML 列表,其列表元素的内容为一个链接。 导航栏的种类 垂直导航栏 垂直导航栏就是具备指定样式的 HTML 列表 水平导航栏 使用 内联 实现 如:display:inline; 使用 浮动 实现 如:float:left; 示例 代码
下拉菜单 概述 不知大家看到 “下拉菜单” 这四个字时,想到的是不是表单中的下拉菜单,是不是还苦思冥想了一小会儿:“这下拉菜单还能有什么样式?”。不满告诉你,我的第一反应就是这样。那么我现在告诉你,这里的下拉菜单就是一个包含多个条目的块级元素(
关于 HTML/CSS 的博客也写了几篇了。该系列博客主要介绍 HTML 和 CSS 的基础,尚未过多的涉及 HTML5 和 CSS3 (即 HTML/CSS 进阶)的内容。这些博客是按照一定的顺序写的,尽管你可以选择性的只看其中的某篇,但是若你刚开始接触 HTML 和 CSS,那么还是建议你浏览一下前面的文章。相信这样,你会更快理解并接受 HTML 和 CSS。以下是该系列博客的顺序列表:
1. HTML5-01 简介
2. HTML5-02 元素
3. CSS3-01 简介
4. HTML5-03 页面布局
5. CSS3-02 样式 1
6. CSS3-03 样式 2
HTML 文档
CSS3-04 样式 3
CSS 文件
div{ margin: 100px 100px; width: 120px; height: 26px; text-align: center; font-size: 24px; background-color:lightpink;}a:link {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: overline;}
效果图
- 、
- )的 type 属性来设置列表的标记类型。在 CSS 中我们可以更加灵活的控制列表的标记。
可控制的列表项标记样式
|属性|含义|
|list-style-type|列表项标记的类型|
|list-style-image|设置列表项的标记为图片|
|list-style-position|列表项标记的位置|
HTML 文档
CSS3-04 样式 3
- First item
- Second item
- Third item
- First item
- Second item
- Third item
CSS 文档
#normal{ list-style-type: square;}#image{ list-style-image: url("item_tag.png");}
效果图
HTML 文档
CSS3-04 样式 3
属性 | 含义 | 备注 |
---|---|---|
border | 边框 | 注意 border-collapse 属性 |
padding | 填充 | 随便玩 |
CSS 文件
table{ width: 450px; height: 200px;}table,th,td{ border: 2px solid pink; border-collapse: collapse;}th{ background-color: lightgray;}td{ padding-left: 30px;}.red { color: red; text-align: left; vertical-align: top;}caption{ margin-top: 10px; caption-side: bottom;}
效果图
HTML 文档
CSS3-04 样式 3
CSS 文件
ul { /*取消 HTML 列表的样式*/ list-style-type: none; margin: 0; padding: 0; /*设置 导航栏 的样式*/ background-color: rgba(0,0,255,0.5); } li { /*使用 浮动 实现横向导航栏*/ float: left; } a:link,a:visited { /*增加可点击区域*/ display: block; width: 150; /*设置文本样式*/ font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; color: orange; /*设置 填充宽度*/ padding: 7px; } a:hover,a:active { background-color: blue; }
效果图
),紧跟在要展示下拉菜单的元素后边,需要注意的是 展示下拉菜单的元素 和 下拉惨淡的内容需要位域一个
。下拉菜单默认情况下是隐藏,当鼠标移动到展示下拉菜单的元素上时,使下拉菜单显示出来即可。 创建下拉菜单的方法 创建元素 创建最外侧
,包含 展示下拉菜单的元素,和下拉菜单的内容 创建展示下拉菜单的元素 创建下拉菜单的内容 设置元素属性 隐藏下拉菜单内容 设置在 展示下拉菜单的元素的 hover 状态下,展示下拉菜单的内容 示例 代码
声明
HTML 文档
CSS3-04 样式 3
CSS 文件
ul{ /*取消 HTML 列表的样式*/ list-style-type: none; margin: 0; padding: 0;}li{ /*使用 浮动 实现横向导航栏*/ float: left; /*设置 导航栏 的样式*/ background-color: rgba(0,0,255,0.5);}a:link,a:visited{ /*增加可点击区域*/ display: block; width: 150; /*设置文本样式*/ font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; color: orange; /*设置 填充宽度*/ padding: 7px;}a:hover,a:active{ background-color: blue;}/*默认隐藏下拉菜单*/.dropdown-content { display: none; background-color: lightgray;}/*显示下拉菜单*/.dropdown:hover .dropdown-content{ display: block;}
效果图
关于 CSS 的介绍已经差不多了,但是总感觉还是很无力,还是不能随心所欲的控制 HTML 元素。是的,对于 HTML 元素的布局,我们还没涉及到,还不知道如何设置一个 HTML 元素的位置。还是不要着急的好,先回顾一下前几篇 Blog 中的知识,整理整理思路。在接下来的 Blog,我会介绍如何使用 CSS 布局 HTML 元素,敬请期待!Blog 中多有不足之处,望请大家多多指点。谢谢!
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
推荐阅读
-
css 样式用法的累积_html/css_WEB-ITnose
-
WEB样式设计图_html/css_WEB-ITnose
-
如何在导航栏添加hot样式图片_html/css_WEB-ITnose
-
相同样式,同个浏览器,效果不一样求解~_html/css_WEB-ITnose
-
【定义CSS样式问题】CSS伪类样式_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
dropdownmenu,网页另存为之后,CSS样式变的很丑,求高手指点_html/css_WEB-ITnose
-
css样式之背景图片_html/css_WEB-ITnose
-
请教:网站的这种样式怎么写出来的_html/css_WEB-ITnose
-
dropdownmenu,网页另存为之后,CSS样式变的很丑,求高手指点_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论