一、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 {
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来获取到标签。
二.高级选择器
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
.container p{
color: red;
}
.container .item p{
color: yellow;
}
div里面的p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 后代选择器*/
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>内容</p>
</div>
<p>另一个内容</p>
</body>
</html>
网页效果：
class里面的p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 后代选择器 */
.father p{
color: red;
}
</style>
</head>
<body>
<div class="father">
<div>
<p>内容</p>
</div>
</div>
<p>另一个内容</p>
</body>
</html>
网页效果：
class里面的class里面的p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*后代选择器*/
.father .a p {
color: red;
}
.father p {
color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="item">
<div class="a">
<p>内容</p>
</div>
</div>
<p>内容</p>
</div>
<div class="a">
<p>另一个内容</p>
</div>
</body>
</html>
网页效果：
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代（不包括孙子...）元素p。
.container>p {
color:green;
}
举栗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*后代选择器*/
.father .a p {
color: red;
}
/*子代选择器*/
.father>p {
color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="item">
<div class="a">
<p>内容</p>
</div>
</div>
<p>内容</p>
</div>
<div class="a">
<p>另一个内容</p>
</div>
</body>
</html>
网页效果：
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面的多个标签。一些共性的元素，可以使用并集选择器
/*并集选择器*/
h3,a{
color: #008000;
text-decoration:none;
}
比如像百度首页一样使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin:0;
padding:0
}
/*使用此并集选择器选中页面所有标签，页面布局的时候会使用*/
统一样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p,a{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="item">
<div class="a">
<p>内容</p>
</div>
</div>
<p>内容</p>
</div>
<div class="a">
<p>另一个内容</p>
</div>
<a href="#">哈哈</a>
</body>
</html>
网页效果：
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class="active"></h4>这样的标签。
那么：
h4{
100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
它表示两者选中之后元素共有的特性。
举栗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*交集选择器*/
h4 {
background:green;
}
.active {
font-size:14px
}
h4.active {
color: red;
}
li.active {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
</ul>
<h4 class="active">我是一个4级标题</h4>
</body>
</html>
网页效果：
三、属性选择器
属性选择器，意思就是根据标签中的属性，选中当前的标签。
语法：
/*根据属性查找*/
/*[for]{
color: red;
}*/
/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/
/*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/**/
/*指定单词的属性*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
举栗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*属性选择器*/
[for]{
color: red;
}
[type]{
background-color: red;
}
</style>
</head>
<body>
<from action="">
<label for="username">用户名</label>
<input type="text">
<input type="password">
</from>
</body>
</html>
网页效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*属性选择器*/
label[for]{
color: red;
}
input[type='text']{
background-color: red;
}
</style>
</head>
<body>
<from action="">
<label for="username">用户名</label>
<input type="text">
<input type="password">
</from>
</body>
</html>
网页效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*属性选择器*/
label[for]{
color: red;
}
input[type='text']{
background-color: red;
}
label[for^='vi']{
color:blue;
}
</style>
</head>
<body>
<from action="">
<label for="username">用户名</label>
<label for="vip">vip</label>
<label for="vivp">vvip</label>
<input type="text">
<input type="password">
</from>
</body>
</html>
网页效果：
注意：属性选择器仅限于在表单控制中
未完待续。。。。