0

0

网页制作(html)的基本知识(三)html+css

零下一度

零下一度

发布时间:2017-05-06 13:40:19

|

1561人浏览过

|

来源于php中文网

原创

1.1HTML CS

css选择器

不同的样式定义有不同的应用方式,与之对应的样式名也有区别,所以样式名称为选择器应该容易理解不同应用方式的样式。

1.类选择器

名称是以点“.”开始的一串字符组合,这类样式必须通过标签中的class属性使用。这种样式必须通过标签中的class属性应用。

例:

立即学习前端免费学习笔记(深入)”;

.wenzi{font-size:20px;}

类选择器样式

2.标签选择器:

名称与html标签名一致,在页面中所有定义样式的标签,在标签中若无类选择器样式应用,此标签内容将按标签选择器样式显示。这种样式只要定义同名标签就会自动应用。

例:

立即学习前端免费学习笔记(深入)”;

p{font-color:#6ec;}

则页面中

标签将以#6ec这个颜色显示。

ID选择器

名称是以“#”与一串字符组合,这儿“#”是ID选择器的标志,当某一个标签中ID属性的值与“#”后边的字符一致时,则此标签应用这个样式。这种样式应用于ID属性值与#后字符中相同的标签。

例:

立即学习前端免费学习笔记(深入)”;

#idname{font-size:26px;}

ID样式

不建议同一个页面文档中的任意两个标签具有相同的ID属性值,所以在符合web标准的网页文档中,ID样式仅仅对应一个标签。如果有多个标签将使用的样式与这个样式相同的话,那么定义样式时选用类选择器而不用ID选择器定义样式。

3.级别选择器:

(这个在教材上被称之为派生选择器,级别选择器是我自己的叫法)

这种样式相应的标签会自动应用。

命名方式查看后边的例子。

为了更容易理解把以下标签的嵌套用以下的形式写出:

@@##@@ a b c

这些标签是嵌套在一起的,p标签中嵌入了img和span标签,在span标签中又嵌入了strong标签,其中img标签、span标签、strong标签可以称作为p标签的下级标签,img标签、span标签可以称之为p标签的子标签,strong标签是span标签的子标签,反之是上级标签或父标签。注意strong标签不是p的子标签,但是p标签的下级标签。

然后再来看两个例子来说明这种选择器:

例1:

@@##@@abc

p span{font-color:#038;}

这样的选择器是指嵌在p标签的下级标签span标签的样式。

p strong{font-color:#865;}

这样的选择器是指嵌在p标签的下级标签strong标签的样式

TSCMS内容管理系统2.1 bulid20140504
TSCMS内容管理系统2.1 bulid20140504

TSCMS是遂宁唐氏兄弟网络技术服务有限公司独立研发的一套基于PHP+MySQL平台,采用MVC构架开发的网站建设系统,系统具有速度快,SEO友好,界操作简洁明了,模块扩展方便,二次开发简单等特点。系统支持模块标签数据调用,伪静态配置简单更有利于搜索引擎收录。您只需了解简单的HTML知识便能快速制作出专业的网站。

下载

p span strong{font-color:#921;}

这样是指标签p的下级标签span标签的下级标签strong的样式。

注:只要是下级标签都可以用这种方式定义。如此例所示,如果文档中还有其它的span标签,但并不是p标签的下级标签则不会应用此样式。下同。

例2:

@@##@@abc

还可以这样来定义:

.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}

这是指应用了样式abc的标签的下级标签的样式。

例3:

#abc{}

@@##@@abc

如果定义了id样式,并且有标签id使用了这个属性值,还可以这样定义:

#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}

伪类:只介绍超级链接的几种状态伪属性的样式定义方法。

这种样式会自动应用于伪属性之前的标签a。

a:link{}超级链接未访问时的样式。

a:active{}鼠标左键在超级链接上按下未松开时的样式。

a:hover{}鼠标经过超级链接上方时的样式。

a:visited{}超级链接访问过后的样式。

*选择器:

这种选择器样式定义的名称只是一个通配符“*”,指所有的标签,换句话即所有的标签都会自动应用这个样式。

*{}

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

ead>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

网页制作(html)的基本知识(三)html+css网页制作(html)的基本知识(三)html+css网页制作(html)的基本知识(三)html+css网页制作(html)的基本知识(三)html+css

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 10万人学习

Vue 教程
Vue 教程

共42课时 | 7.6万人学习

Django 教程
Django 教程

共28课时 | 3.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号