CSS简介

什么是CSS

CSS 是 层叠样式表 的简称。

有时我们也会称之为 CSS样式表 或 级联样式表。

CSS 也是一种 标记语言。

CSS 主要用于设置 HTML 页面中的文本样式（字体、大小、颜色、对齐方式……）、图片样式（宽高、边框样式、边距……）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，同时让页面布局更简单。

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS用来设置网页中元素的样式

总结：

HTML 搭建结构，填入元素内容
CSS 美化 HTML，布局网页元素
CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即：结构与样式分离

CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。

CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明。

选择器 是用于选出需要设置 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性 和 属性值 以 “键值对” 的形式出现 属性: 属性值;
属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等
属性和属性值之间用英文 : 分开
多个 “键值对” 之间用英文 ; 进行区分（末尾的键值对可以不加 ;）

所有的样式，都包含在 <style> 标签内，表示是样式表。

<style> 一般写到 </head> 里。

<head>
    <style type="text/css">
        h4 {
            color: bule;
            font-size: 100px;
        }
    </style>
</head>

注意：<style> 标签可以写到其他标签内部并作用与该标签区域内，但是强烈不推荐这种写法！

type="text/css" 可以省略。

CSS代码风格

样式格式书写

紧凑格式（不推荐）

1	h3 { color: deeppink; font-size: 20px; }

展开格式（推荐）

h3 {
	color: deeppink;
	font-size: 20px;
}

强烈推荐第二种格式，因为更直观！不用担心占用空间，因为后期可以通过代码压缩工具来压缩代码。

样式大小书写

大写（不推荐）

1
2
3

H3 {
	COLOR: PINK;
}

小写（推荐）

1
2
3

h3 {
	color: pink;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

凡是你不确定是否用大写的都一律用小写就对了！

空格规范

1
2
3

h3 {
	color: pink;
}

属性值前面，冒号后面，保留一个空格
选择器（标签）和前花括号中间，保留一个空格

注释

css中的注释

只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 */

/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/

html中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾

<!-- html中的单行注释 -->

<!-- 
html中的多行注释
html中的多行注释
html中的多行注释
-->

JS(JavaScript)中的注释

单行注释使用//。多行注释使用/*和*/包裹，以结尾

/* JS(JavaScript)中的单行注释*/

/*
JS(JavaScript)中的多行注释
JS(JavaScript)中的多行注释
JS(JavaScript)中的多行注释
*/

基本语法

选择器 声明块

选择器

通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成，声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾

1
2
3

h1{
    color: green;
}

CSS 命名规范

页面外围控制整体布局宽度：wrapper、页头：header、页面主体：main、内容：content、页脚：footer、导航：nav、主导航：mainbav、子导航：subnav、顶导航：topnav、边导航：sidebar、左导航：leftsidebar、右导航：rightsidebar、菜单：menu、子菜单：submenu、搜索：search、栏目：column、侧栏：sidebar、功能区（商品模块）：shop、左右中：left right center、登录：login、登录条：loginbar、注册：regsiter、标志：logo、横幅广告：banner、热点：hot、新闻：news、按钮：btn、滚动：scroll、标签页：tab、文章列表：list、标题：title、摘要：summary、提示信息：msg、小技巧：tips、图标：icon、下载：download、加入我们：joinus、注释：note、指南：guild、服务：service、状态：status、投票：vote、合作伙伴：partner、链接：link、友情链接：friendlink、版权：copyright

CSS属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
	display: block;
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 10px;
	padding: 20px 0;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	color: #333;
	background: rgba(0,0,0,.5);
	border-radius: 10px;
}