一、css的引入方式
- 行内样式
- 内接样式
- 外接样式(链接式、导入式)
CSS介绍
现在互联网前端的组成：
- HTML：超文本标记语言。从语义的角度描述页面结构，好比人的骨骼。
- CSS：层叠样式表。从审美的角度负责页面样式，好比人的衣服
- JS：JavaScript。从交互的角度描述页面行为，好比人的奔跑、跳跃等运动。
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。白话：CSS将网页内容和显示样式进行分离，提高了显示功能。
css最新版本是css3，目前我们学习的版本是**css2.1**为什么要学习CSS
HTML的缺陷：
1.不能够适应多种设备
2.要求浏览器必须智能化且足够庞大
3.数据和显示没有分开
4.功能不够强大CSS 优点
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了（分布式开发，一人负责写html，一人负责css）举个栗子：有个样式需要在一百个页面上显示，如果用html来实现，要写一百遍，用css，只需要写一遍。有了css，html只需要提供数据和一些控件，各种各样的样式则完全交由css来提供。
行内样式
<div>
<p style="color: red">我的名字叫段落</p>
</div>内接样式
下面的代码需要写在<title>标签下面
<style type="text/css">
/*css代码*/
span{
color:blue;
}
</style>举栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p {
color:red;
font-size:20px;
}
</style>
</head>
<body>
<div>
<p>我的名字叫段落</p>
</div>
</body>
</html>执行输出：
外接样式-链接式
下面的代码需要写在<title>标签下面
举栗：
新建一个文件index.css和1.html
index.css：
/* index.css */
p {
color:blue；
font-size:20px;
}1.html：
/* 1.html */
<!DOTCYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<p>我的名字叫段落</p>
</div>
</body>
</html>执行输出：
外接样式-导入式
下面的代码需要写在<title>标签下面
<style type="text/css">
@import url('./index.css');
</style>举栗：
index.css不变，修改html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 导入式 */
@import url('./index.css');
/* 第二种写法 */
/*@import "index.css";*/
</style>
</head>
<body>
<div>
<p>我的名字叫段落</p>
</div>
</body>
</html>导入式有2种写法，见上面代码！任选其一即可。
在这三种样式中，行内样式优先级最高。
内接样式和外接样式，根据代码从上到下执行顺序。针对同一属性，最下面的会生效。
这叫样式重叠现象。
CSS选择器
css的选择器：1.基本选择器 2.高级选择器
基本选择器包含：标签选择器、id选择器、class选择器、*通配符选择器
1. 标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li，p等等，不管标签藏得多深，都能选中，选中的是所有的，而不是某一个，所以说"共性"而不是"特性"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 标签选择器 */
span {
color: red;
}
</head>
<body>
<div>
<div>
<div>
<span>内容</span>
</div>
<span>另一个内容</span>
</div>
</div>
</body>
</html>网页显示效果如下：
注意：在<style>标签中，注释使用/* */,不能使用<!-- -->,否则标签样式不生效！ ##
标签选择器2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签选择器 */
span {
color: red;
}
a {
/* 字体大小*/
font-size:12px;
color: #666;
/* 去除默认样式*/
text-decoration:none;
/* 光标显示为指示链接的指针(鼠标悬停为一只手)*/
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div>
<div>
<span>内容</span>
<a href="">呀呀</a>
</div>
<span>另一个内容</span>
<a href="">呀呀</a>
</div>
</div>
</body>
</html>2. id选择器
#选中id
同一个页面中id不能重复
任何的标签都可以设置id
id命名规范 必须要以字母a-z或A-Z开头 可以有数字 下划线 大小写严格区分 aa和AA是两个不一样的属性值
id选择器一般不会设置样式，通常与js配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* id选择器 */
#p1 {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p id="p1">叫我段落</p>
</div>
</body>
</html>网页效果：
3. 类选择器
3.1 类选择器也就是class选择器 class与id非常相似 任何的标签都可以加 不同的是
类可以重复，属于归类的概念
3.2 同一个标签中可以携带多个类，用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*类选择器*/
.w {
width: 50%;
height: 50px;
/*底色*/
background-color: #2ae0c8;
/*边框1像素，加粗，红色显示*/
border: 1px solid red;
/*div居中显示*/
margin: 0 auto;
}
.t{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="w t">
</div>
<div class="w">
</div>
<div class="w">
</div>
</body>
</html>网页效果：
类的使用，能够解决前端工程师的css到底有多牛逼？
答案： 一定要有" 公共类"的概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 类选择器 */
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration:underline;
}
</style>
</head>
<body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="big line">段落3</p>
</div>
</body>
</html>网页效果:
总结：
- 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽量可能的小，有公共的概念，能够让更多标签使用
玩好了类就相当于玩好了css中的1/2
到底使用id还是class？
答案：尽可能的使用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说js是通过id来获取到标签。
未完待续。。。。