开始走进CSS世界

时间 2019-11-20

标签开始走进 css 世界栏目 CSS 繁體版

原文原文链接

一. 认识CSScss

1、CSS (Cascading Style Sheets) 层叠样式表 html

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增长了不少强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10之后也开始全面支持CSS3了。前端

不一样的浏览器可能须要不一样的前缀。它表示该CSS属性或规则还没有成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不须要前缀的，但为了更好的向前兼容前缀仍是少不了的。 web

前缀 chrome	浏览器浏览器
-webkit 布局	chrome和safari动画
-moz编码	firefoxspa
-ms	IE
-o	opera

2、CSS能作什么？

a. CSS把不少之前须要使用图片和脚原本实现的效果、甚至动画效果，只须要短短几行代码就能搞定。好比圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

b. CSS简化了前端开发工做人员的设计过程，更灵活的页面布局，更快的页面加载速度。

c. 能够将站点上全部的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的全部页面都会随之发生变更。

d. CSS能够支持多种设备,好比手机,PDA,打印机,电视机,游戏机等。

e. 目的：将表现与结构分离。

3、CSS语法结构

CSS 语法由三部分构成：选择符、属性和值

属性（property）是您但愿设置的样式属性（style attribute）。每一个属性有一个值。属性和值被冒号分开。

Selector { Property : Value; }

↓ ↓ ↓

选择符属性值

例：

1      <style type="text/css">
2         body { background-color:#cccccc;}
3      </style>

2、如何引入CSS

三种引入方式：

1.行内引用

行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。

注意这种方式的引入CSS，是不须要写选择器的。

例：

1　　 <body style="background-color:#ccccc;">
2     <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1>

2. 页内引用

页内引用做为页面中的一个单独部分，由<style></style>标签订位在<head></head>之中。

<head>
	<style type="text/css">
		body {
		       	background-color:#cccccc;
		      }
	</style>
</head>

3.外部样式表（经常使用的，体现分离思想）

外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独

放在一个外部文件中，再由网页进行调用。

如：

首先建立一个style.css 文件，里面编写：

body {
	       background-color:#cccccc;
　　　}

而后在同一个目录下建立一个index.html文件，里面编写：

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

3、三种引入方式的优先级对比

优先级依次是：就近原则

行内引用> 页内引用> 页外引用

4、CSS代码注释

css 代码注释，以 /* 开始 */ 结束

如：

/*注释页面头部*/
/*body{background-color: #ccc}*/
/*标签*/
h1{color: blue;text-align:center;}
/*段落*/
p{font-size: 24px;text-indent: 2em; color: red;}

5、CSS的选择符

1.通配选择符 *

* 号表示全部的对象

所谓通配选择符，就是指能够使用模糊指定的方式来对对象进行选择，指定样式。

例：

*{
		font-size: 20px;
		font-family: "微软雅黑";
		color:#000;
　}

2.元素选择符

所谓元素选择符，指以网页中已有的标签名做为名称的选择符。

例：

body{background-color: #ccc}
h1{color: blue;text-align:center;}
p{font-size: 24px;text-indent: 2em; color: red;}

3.群组选择符

除了能够对单个标签进行样式指定外，还能够对一组标签进行相同的样式定义。

例：

	h1,p{

		font-family: "微软雅黑";
		font-size: 30px;
		color:red;
	}

使用逗号对选择符进行分隔。对页面中须要使用相一样式的地方，只需写一次样式。

6、4.关系选择符

例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		h1 a{

			color: red;
			font-size: 50px;
			font-family:"微软雅黑";
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>
		<a href="#">我是h1中的a标签</a>
	</h1>
	<p>
		<a href="#">我是p标签中a标签</a>
	</p>
</body>
</html>

　此例子中CSS样式只对h1标签中的a标签起做用。　