零基础学习HTML之CSS篇内联内部外部样式表和类型选择符
myzbx 2024-12-07 15:17 20 浏览
CSS简介
CSS (Cascading Style Sheets) 层叠样式表。
CSS能做些什么？
1.使用CSS样式可以有效地对页面进行布局。
2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。
3.可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。
4.CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等
5.将表现与结构分离。
CSS 语法由三部分构成：选择符、属性和值
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
Selector {Property:Value;}
Selector 选择符；Property 属性；Value 值
例如：body { background-color:#cccccc;}
将CSS应用到网页中
1.内联样式表
指将CSS样式编码写在HTML或XHTML标签之中。
如：
<body style="background-color:#ccccc;">
<h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1>
2.内部样式表
内部样式表作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。
如：
<head>
<style type="text/css">
body {background-color:#cccccc;}
</style>
</head>
说明：其中type="text/css"其实可以不用写的，因为现在浏览器默认就是它的。
3.外部样式表
外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。
如：
在style.css样式文件里写上如下：
body { background-color:#cccccc;}
在html文件“<head>”标签中如下：
<head>
<link rel="stylesheet" type="text/css" href="http://www.haook.cn/style.css" />
</head>
说明：href中的地址是指网站根目录下放置名为style.css的样式文件。
CSS选择符
1.类型选择符
所谓类型选择符，指以网页中已有的标签名作为名称的选择符。
如：body{} h1{} p{}
2.群组选择符
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。
如：
h1,h2, h3, p {font-size:12px;font-family:arial;}
使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。
3.包含选择符
当我们只打算对某个对象的子对象进行样式定义时，可以使用包含选择符。
如：
h1 span {font-weight:bold;} span: 它是做内容的补充。
4.id 及 class 选择符
id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
如：id 选择符
<p id="p1"> 这是一个段落 </p>
#p1{font-size:12px;font-weight:bold;}
如：class 选择符
<p class="p1"> 这是一个段落 </p>
.p1{font-size:12px;font-weight:bold;}
注意：在网页中，每个id名称中只能使用一次，不得重复。与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。
5.组合选择符
如：
h1 .p1 {}表示h1标签下的所有class为p1的标签。
#content h1 {}表示id为content的标签下的所有h1标签。
6.伪类选择符
伪类可以看做是一种特殊的类选择符，是非常常用的选择符之一，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
* 一定要按照a:link， a:visited， a:hover， a:active的顺序书写。
6.通配选择符 *
* 号表示所有的对象，所谓通配选择符，就是指可以使用模糊指定的方式来对对象进行选择，指定样式。
如：
*{color:blue;margin:0;padding:0;}
- 上一篇：html渲染优先级
- 下一篇：使用Wordpress 从0-1 制作一个博客网站
相关推荐
- 路痴的福音 谷歌地图AR实景导航Live View正式上线
-
2月份起，谷歌地图开始测试一项新功能，即是在行人导航功能中加入AR实景导航。用户可以通过设备屏幕，在实际的街道中见到路线指示，使导航功能不只在地图上，而是更融合在真实环境中。谷歌地图AR实景导航（图源...
- Google地图怎么设置中文 谷歌地图app设置语言为中文
-
Google地图是一款知名的地图导航客户端，这是一款很好用的地图软件，Google地图怎么设置中文呢，不少人可能不是很清楚，下面就和小编一起来看看吧!Google地图怎么设置中文方法1、点击打开谷歌地...
- 谷歌地图说这里能过
-
来源：日本沙雕日常谷歌地图说这里能过#微博新鲜事#
- 谷歌地图已可离线导航 仅安卓机可用
-
谷歌已经在今年的谷歌IO大会上确认了地图离线导航功能，如今该功能已经可以在安卓机上使用了。这对网络资源较为贫瘠且相对昂贵的国家来说可谓提供了便利。用户需要提前下载所需旅程的部分地图，虽然不能获得实时路...
- 谷歌地图测试速度更快的AR实时视图
-
上个月谷歌为了庆祝谷歌地图成立15周年，为谷歌地图推出了新的图标，并且重新设计了移动应用程序。谷歌还预览了一些即将推出的功能，现在正在测试地图导航之外更快的实时视图（LiveView）访问。谷歌之...
- 谷歌地图新功能 离线地图可导航和搜索
-
【中关村在线软件资讯】5月29日消息：在今天凌晨召开的GoogleI/O开发者大会上，谷歌公布了一些关于地图的新功能。谷歌地图离线模式新版谷歌地图有更好用的离线地图，可以在无网络的情况下搜索地点、查...
- 谷歌地图变这样，谁还花钱去旅游?
-
足不出户，在手机上能身临其境的游览世界各地。文章来源：创下一个新ID：cxygx1作者：创新君编辑：卝生话说在前天的GoogleI/O2022开发人员活动中，谷歌推出了一种全新的地图模式，可以...
- 新版谷歌地图将添新功能:知道你想去哪儿
-
据外媒TheVerge报道，谷歌即将为安卓版谷歌地图增加一些新的功能，从而使之变得更加智能，比如可以推算出用户的目的地等。新版谷歌地图将添新功能（图片来自TheVerge）报道称，升级后的谷歌地图将会...
- 谷歌地图安卓版获效率改进，11.136.x更新引入“表单风格”卡片
-
IT之家7月16日消息，谷歌在今年2月宣布将对自家地图应用进行大修，目前相关更新已经实装入谷歌地图11.136.x版本中，主要围绕UI进行效率改进。谷歌提到，现在用户在查找地址时，...
- 谷歌地图安卓/iOS版界面大修，超漂亮
-
IT之家（www.ithome.com）：谷歌地图安卓/iOS版界面大修，超漂亮IT之家报道，Android5.0已经正式到来，谷歌旗下的应用为了迎接安卓5.0都采用了全新的MaterialDes...
- 谷歌地图在美国启用“美国湾”称呼
-
参考消息网2月11日报道据法新社2月11日报道，美国总统特朗普10日对谷歌地图将墨西哥湾更名为“美国湾”表示欢迎，这符合他在1月底重返白宫后签署的法令之一。这一占超主导地位的地图服务现在为位于美国的用...
- 外交部回应谷歌地图涉南海标注:南海一直是国际社会公认通用地名，被广泛接受
-
【环球时报-环球网报道记者李萌】在4月15日外交部例行记者会上，有记者提问称，据报道，谷歌地图显示了“西菲律宾海”的名称，此前这里显示的是南海。有人称这有助于保护菲律宾的主权，请问中方对此有何评论？...
- 谷歌地图首曝数据:覆盖全球98%居住区，已拍千万英里街景
-
12月13日，谷歌透露了其街景车（StreetViewcar）等设备为绘制世界地图所做的工作。目前，谷歌已经捕获了超过1000万英里的街景图像，这个距离相当于绕地球400圈。旗下航空地图服务谷歌地...
- 美媒:谷歌称，当联邦地图作出更改时，谷歌地图将使用“迪纳利峰”及“墨西哥湾”新名称
-
来源：环球网【环球网报道】据美国全国广播公司（NBC）等媒体报道，美国谷歌公司27日称，当联邦地图作出更改时，谷歌地图将使用“迪纳利峰”和“墨西哥湾”的新名称，即“麦金利山”和“美国湾”。本月20日...
- 谷歌地图迎来15周年重大更新 界面重新设计 新增贴心功能
-
昨日，恰逢谷歌地图15周年生日，谷歌地图便迎来重大更新。不仅仅界面重新设计，还添加了许多贴心功能。名为“TransitAttributes”的新功能会根据过去用户共享的详细信息，向人们提供有关公共场...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)