标签：HTML 样式 标签 笔记 初识 样式表 CSS 属性
学习目标
- 理解
- css的目的作用
- css的三种引入方式
- 应用
- css三种引用方式的书写
- 通过样式规则给标签添加简单的样式
HTML的局限性
说起HTML，只关注网页中内容的语义，比如<h1>表明这是一个大标题，用<p> 表明这是一个段落，用<img> 表明这儿有一个图片， 用<a> 表示此处有链接。
很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： 丑。这个是早期的亚马逊网站，以及淘宝的变迁历史
如果使用HTML去改变标签属性的话，会出现下面的情况：例如要改变下高度或者变一个颜色，就需要大量重复操作，如下图所示：
总结：
- HTML满足不了设计者的需求
- 操作HTML属性不方便
- HTML里面添加样式带来的是无尽的臃肿和繁琐
CSS 网页的美容师
- CSS让我们的网页更加丰富多彩，布局更加灵活自如。
- CSS的最大贡献就是：让HTML从样式中脱离，专注于网页结构的定义，而表现样式交给CSS。
网页设计最理想的状态： 结构(HTML)与样式(CSS)相分离
认识CSS
概念
- CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用
- 主要用于设置 HTML页面中的文本内容的表现形式（如字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表（书写位置）
1. 行内式（内联样式）
概念
- 称行内样式、行间样式，是通过标签的style属性来设置元素的样式。
语法格式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
任何HTML标签都拥有style属性，用来设置行内式。
案例
<div style="color: red; font-size: 12px;">少壮不努力，老大徒伤悲</div>
注意
style其实就是标签的属性- 样式属性和值中间是
: - 多组属性值之间用
;隔开
缺点
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
- 没有实现样式和结构相分离
2. 内部样式表（内嵌样式表）
概念
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
语法格式
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
案例
<style>
div {
color: red;
font-size: 12px;
}
</style>
注意
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css"在html5中可以省略。- 只能控制当前的页面
缺点
- 没有彻底分离
综合案例
<style>
/*选择器{属性:值；}*/
p {
color:#06C;
font-size:14px;
} /*文字的颜色是 蓝色*/
h4 {
color:#900;
}
h1 {
color:#090;
font-size:16px;
}
body {
background:url(bg2.jpg);
}
</style>
思考
- 如何实现结构与样式完全分离？
- 如何实现css样式共享？
3. 外部样式表（外链式）
概念
又称链入式，是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
语法格式
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意
link是个单标签link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表，可以省略 |
href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
4. 三种样式表总结（位置）
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
控制整个站点
书写习惯
样式书写
- 一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;}
- 一种是展开格式（推荐）
h3 {
color: deeppink;
font-size: 20px;
}
选择器、属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
h3{
color: pink;
}
/* 不推荐 */
H3{
COLOR: PINK;
}
总结CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，
具体格式如下：
总结：
- 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文
:连接。 - 多个“键值对”之间用英文
;进行区分。
@拓展阅读
标签：HTML,样式,标签,笔记,初识,样式表,CSS,属性 来源： https://blog.csdn.net/qiaoxinwei/article/details/120550232
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。