CSS简介

• CSS 指的是层叠样式表 (Cascading Style Sheets)
• CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
• CSS 节省了大量工作。它可以同时控制多张网页的布局
• 外部样式表存储在 CSS 文件中

简单的css实例

body{
    background:darkgrey;
}
h1{
   font-family: 幼圆;
}
p{
    font-size: 50px;
    color: salmon;
}

效果图

CSS解决的问题

HTML的目的是描述网页的内容，并且在HTML里面用标签和color属性给大型网站的页面添加字体和颜色样式是一个漫长且昂贵的过程。
而CSS从HTML页面中删除了样式格式。样式定义通常保存在外部.css文件中。
通过使用外部样式表文件，就可以改变整个网站的外观。

CSS语法

CSS由选择器和声明块组成，如图所示：

1.选择器：需要设置的HTML元素
2.声明块：包含一条或多条用分号分隔的声明
3.每条声明块都包含一个CSS属性名称和一个值，用冒号分隔
4.多条CSS声明用分号分隔
5.声明块用花括号括起来

实例
将文本中的内容字体设置为50像素，颜色设置为salmon。

p{
    font-size: 50px;
    color: salmon;
}

代码分析：
p是css中的选择器
font-size是属性，red是属性值
color是属性，salmon是属性值

CSS选择器

CSS选择器用于查找（或选取）要设置样式的HTML元素

此网站讲解了最基本的 CSS 选择器CSS选择器详解

CSS伪类

定义：伪类用于定义元素的特殊状态

语法：

selector:pseudo-class {
	property: value;
}

实例：链接以不同的方式显示

/*未访问的样式*/
a:link{
	color: black;
}
/*已访问的样式*/
a:visited{
    color: cadetblue;
}
/*鼠标悬停的样式*/
a:hover{
    color: red;
}

效果：



注：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。伪类名称对大小写不敏感。

CSS 3D转换

通过CSStransform属性，使用以下3D转换方法：

• rotateX()
• rotateY()
• rotateZ()

实例：

div {
	width: 300px;
	height: 100px;
	background-color: yellow;
	border: 1px solid black;
}
#myDiv {
	transform: rotateX(150deg);
	transform: rotateY(150deg);
	transform: rotateZ(150deg);
}

效果：