世外桃源

非淡泊无以明志————非宁静无以致远——

前端开发之——CSS

一、css的引入方式

  1. 行内样式
  2. 内接样式
  3. 外接样式(链接式、导入式)

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来获取到标签。

二.高级选择器

高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器

后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.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{
	width: 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>

网页效果：

注意：属性选择器仅限于在表单控制中

未完待续。。。。

posted on 2018-10-10 22:28  蛛丝_马迹  阅读(202)  评论(0)  编辑  收藏  举报

导航