CSS 简介
1. CSS是什么
- CSS 指层叠样式表 (Cascading Style Sheets);
- 样式定义如何显示 HTML 元素;
- 样式通常存储在样式表中;
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题;
- 外部样式表可以极大提高工作效率;
- 外部样式表通常存储在 CSS 文件中;
- 多个样式定义可层叠为一。
2. CSS的存在意义
- 它解决了样式和内容分离的问题,使开发更加灵活。
3. CSS基础语法
- css语法主要由两方面构成:选择器selector、声明declaration;
- 选择器通常是我们想要控制html样式的标签,比如h1等;
- 所有声明放入到一个大括号里,单个声明采用key:value方式,不同声明用;隔开,且声明最后要以;结尾;
- 声明中不要在属性值(key)与单位(value)之间留有空格;
- 注释语法:” /*…*/ “
CSS 引用
我们在css中可以自定义样式,在html元素中引用自定义样式需要利用id/class。
1. id选择器
- id选择器的定义用”#”来声明;
- id选择器直接通过id来引用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style type="text/css">
#myP{color: blue; font-size: 16px}
</style>
</head>
<body>
<p id="myP">哈哈</p>
<div id="log" name="log"></div>
</body>
</html>
2. class选择器
- class选择器的功能和id选择器的功能相同,只是它们作用范围不同;
- id选择器对应的以个为单位的标签,而class对应一类标签;
- class选择器以”.”开始声明.xxx,标签可以通过class=”xxx”来调用;
- class选择器还可以为某一类标签声明,比如p.xxx,选择器属性只对p类标签生效。
.myClass{color: yellow; font-size: 22px}
p.pClass{color: blue; font-size: 22px}
<body>
<p class="myClass">p_myClass</p> <!-- 显示为myClass样式 -->
<p class="pClass">p_pClass</p> <!-- 显示为pClass样式 -->
<h1 class="pClass">haha</h1> <!-- pClass样式不生效 -->
</body>
CSS 创建
- 我们在学习html基础的时候讲到过css样式总共分为三种,温习一下
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
- 当样式需要应用在很多地方时,外部样式表是最佳选择。每个html文件利用<link>标签链接到样式表中。
- 外部样式表其实就是以.css结尾的文件。
<head>
<link rel="stylesheet" type="text/css" href="路径/myCss.css">
</head>
内部样式表
- 当单个html需要特殊样式时,最好利用内部样式表;
- 将内部样式表声明在head中的style标签之中。
内联样式
- 内联样式需要将内容和表现放到一起设置,这样会丧失css的优势导致代码混乱,慎用此类模式。
- 它一般只实用在单个html文档中单个标签的特殊样式,不过为了保持良好的习惯,此类情况应该利用内部样式表来实现;
- 例子中一个典型的内联样式。
<p style="color:blue;font-size:18px">haha</p>