css语法规范

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

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

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以键值对的形式出现，属性和属性值之间用英文冒号:分开
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
多个键值对之间用英文分号;进行区分
所有的样式，都包含在<style>标签内，表示是样式表。<style> 一般写到 </head> 上方。

<head>

	 <style>

		 h4 {

			 color: blue;

			 font-size: 100px;

		 }

	 </style>

</head>

css代码风格

以下代码书写风格不是强制规则，而是符合实际开发的书写规范，增加阅读性

格式书写

① 紧凑格式

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

② 展开格式

h3 {

 color: pink;

 font-size: 20px;

}

推荐使用展开格式，即一个键值对占一行

CSS 代码风格

大小写

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

空格规范

① 属性值前面，冒号后面，保留一个空格

② 选择器（标签）和大括号中间保留空格

选择器

基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

语法

标签名 {

 属性1: 属性值1;

 属性2: 属性值2;

 属性3: 属性值3;

 ...

}

注意

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
能快速为页面中同类型的标签统一设置样式。不能设计差异化样式，只能选择全部的标签，要改就全改

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法

标签需要定义class属性，样式书写格式.属性名

<div class="red"> 变红色 </div>

.red {

    color: red;

}

注意：

类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义）
可以理解为给这个标签起了一个名字
长名称或词组可以使用中横线来为选择器命名。不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选中这个标签。简单理解就是一个标签有多个名字。

<div class="red font20">亚瑟</div>

(1) 在标签class 属性中写多个类名

(2) 多个类名中间必须用空格分开

id选择器

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以# 来定义。

<div id="id名"></div>

#id名 {

	属性: 属性值；

}

id名不能重复

id 选择器和类选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）。

语法

* {

 属性1: 属性值1;

 ...

}

基础选择器总结

复合选择器

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法： 元素1 元素2 { 样式声明 } 表示选择元素 1 里面的所有元素 2 (后代元素)。

例：

ul li { 样式声明 } 	/* 选择 ul 里面所有的 li标签元素 */

注意：

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 不一定是元素，也可以是基础选择器，只要能定位到标签元素即可

子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

语法：元素1 > 元素2 { 样式声明 } 表示选择元素1 里面的所有直接后代(子元素) 元素2。

例：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用大于号> 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管。也可以称作亲儿子选择器

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

并集选择器是各选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1,元素2 { 样式声明 }

例：

div,

span {

    color: red;

}

注意：

约定的规范，并集选择器标签一般竖着写
最后一个标签后不能加逗号

伪类选择器

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号:表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

/* a 是标签选择器 所有的链接 */

a {

	color: gray;

    text-decoration: none;

}

/* :hover 是链接伪类选择器 鼠标经过 */

a:hover {

	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */

    text-decoration: underline;

}

注意：

因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
为了确保生效，请按照 LVHA 的循顺序声明，即 :link－:visited－:hover－:active

表单伪类选择器

:focus

/*当光标在输入框时背景变成粉色*/

input: focus {

    background: pink;

}

总结

字体

字体样式

CSS 使用 font-family 属性定义文本的字体系列。

p { font-family:"微软雅黑";}

div {font-family: Arial，"Microsoft Yahei"， "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

CSS 使用 font-size 属性定义字体大小。

p {

 font-size: 20px;

}

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小
可以给 body 指定整个页面文字的大小

smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

**CSS 使用 font-weight 属性设置文本字体的粗细。 **

p {

 font-weight: bold;

}

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗，实际开发时，我们更喜欢用数字表示粗细

CSS 使用 font-style 属性设置文本的风格

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体

总结

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

文本

文本颜色

颜色属性被用来设置文字的颜色。

body {

    color:red;

}

h1 {

    color:#00ff00;

}

p {

    color:rgb(0,0,255);

}

值	描述	实例
颜色的名称	颜色的名称，比如red, blue, brown, lightseagreen等，不区分大小写。	`color: red;`
*十进制	十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。	`#f03 #F03 #ff0033 #FF0033`
RGB，红-绿-蓝（red-green-blue (RGB)）	规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。	`rgb(255,0,51) rgb(100%,0%,20%)`

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div {

 	text-align: center;

}

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {

 text-decoration：underline；

}

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元

素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p {

 line-height: 26px;

}

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

总结