零基础学习HTML之CSS篇内联内部外部样式表和类型选择符
myzbx 2024-12-07 15:17 14 浏览
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 制作一个博客网站
相关推荐
- HTML5学习笔记-绘制变形图形之组合效果
-
绘制组合效果的图形将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制...
- 安卓自定义 View 进阶:贝塞尔曲线(上)
-
在上一篇文章Path之基本图形中我们了解了Path的基本使用方法，本次了解Path中非常非常非常重要的内容-贝塞尔曲线。一.Path常用方法表为了兼容性(偷懒)本表格中去除了在API21(即安卓...
- 使用Python绘制迷人的二维心形曲线和三维马鞍面
-
Python是一个功能强大的编程语言，不仅可以处理数据分析和机器学习任务，还能够创建美观的图形和图像。在这篇博客中，我们将学习如何使用Python的matplotlib库和PyQt5框架来绘制二维心形...
- 年度最爱的朋友圈封面，太好玩了吧
-
哈喽~大家早上好呀！不知道大家有没有这种想法：我可以不发朋友圈，但我会换上自己喜欢又好看的朋友圈封面、头像或者签名。而最近我就发现了一个超火的涂鸦玩法，简直实现了朋友圈创作自由~再也不用去网上找这些有...
- 两英寸中的沿途风景（两英寸有多高?）
-
画家DinaBrodsky将这个项目命名为“小人国自行车旅行指南”，她把自己长达10年的骑行所见记忆，几乎全部浓缩在仅有两英寸直径的圆形画布上。这些作品中的景致都是真实存在的，而且完全是一个骑行者眼...
- 小白也能学会的Q萌插画头像教程，再也不怕撞头像了
-
你有没有这样的烦恼呢？想学插画，买了iPad，安装了Procreate，结果找不到教程，不会画，连最简单的头像也画不出来，这可咋办？别慌！今天同年美术就来教大家用Procreate画超简单的Q萌头像。...
- 篮球元素创意logo设计（篮球元素创意logo设计理念）
-
在三维空间与二维平面交汇处，篮球标志设计演绎着独特的视觉辩证法。这项运动特有的力学轨迹、集体意志与文化基因，在圆形画布上构建出超越图形本身的能量场域。当设计师的思维触角穿透表象的运动符号，触及篮球运动...
- 高颜来袭!假如井盖会说话，假如墙壁有生命
-
一群人在地上、墙上涂涂画画，竟然是在上课？没错！一直以来，东北林业大学的手绘创作与文化课以其独特趣味性和实践性深受大家喜爱，可谓一课难求。在这门课上，同学们化身“神笔马良”，用画笔勾勒世界，将粉墨挥洒...
- 画布上的玉色缪斯:詹姆斯·桑特笔尖的永恒柔光
-
詹姆斯·桑特（JamesSant），一位在英国维多利亚时代享有盛誉的肖像画家，他的艺术生涯跨越了19世纪的大部分时间，从1820年出生至1916年离世，见证了英国艺术史的辉煌篇章。桑特不仅以其精湛的...
- 可变数据打印软件如何制作圆形标签序列号
-
今天给小伙伴们分享一下在可变数据打印软件中是如何制作圆形标签序列号的具体制作步骤的哦。在可变数据打印软件中制作标签的大致步骤是先设置标签纸张大小，在绘制标签内容，标签制作完成，点击软件打印预览，预览没...
- 伞上绘梦:小艺术家们的创意绽放——阜阳阜南三小手绘伞主题活动
-
运营总监：鲍安常LJ0072025年4月7日整理操场上，彩笔沙沙学生们围坐，笑语喧哗透明雨伞静静躺下等一场春天的魔法画笔不停，梦想在挥洒伞面成了春天的家待雨落下，撑起它让春天，在伞中开遍天涯在阜南三小...
- 《photoshop教程》ps设计圆形色彩相位图效果图
-
本文教大家用PS画色轮图，色轮图就是色彩相位图，它完整表现了色相环360度的全部颜色，PS的色相/饱和度命令依据色轮图而设计，不过在色相/饱和度命令中，你看到的不是色轮，而是色轮的另一种形式--色条，...
- 揭秘!餐盘上那个小圆坑，99%的人用错了?
-
餐盘中的小圆形区域，常让人在用餐时产生好奇——这个既不像分隔格又不像装饰的凹陷，究竟有何用途？通过梳理设计历史、功能演变与大众解读，我们可以发现，这一设计不仅是实用主义的产物，更承载了饮食文化与生活智...
- 图片四个角怎么能做成圆弧角?这几种制作方法操作起来很简单!
-
图片四个角怎么能做成圆弧角？在当今这个视觉内容爆炸的时代，图像不仅仅是信息的载体，更是情感交流的桥梁，深刻地渗透进我们的日常生活，然而，一个微妙却常被边缘化的观察是，传统图片那尖锐的直角边缘，在不经意...
- 标签制作软件如何快速制作圆形合格证标签
-
今天给小伙伴们分享一下标签制作软件中如何快速制作圆形合格证标签的具体操作步骤。这个合格证标签是一个小小的圆形，标签是带颜色的，这种标签在进行制作的时候应该怎么制作呢？接下来就一起来看下吧。我们可以看到...
- 一周热门
- 最近发表
- 标签列表
-
- 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 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)