CSS学习笔记1

CSS学习笔记1

**CSS规则由两个主要的部分构成:选择器以及一条或多条声明。选择器是用于指定CSS样式的HTML标签,**花括号内是对该对象设置的具体样式

CSS选择器

选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。

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

标签选择器

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

标签选择器可以把某一类标签全部选择岀来,比如所有的<div>标签和所有的<span>标签。

但标签选择器不能单选只能全选

类选择器

类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“."号显示。类选择器可以差异化选择，同时也是运用最多的选择器。

.red {
	color: red;
}
<div class='red'>变红色</div>

类的命名要有意义,尽量使别人一眼就知道这个类名的目的。

类选择器的多类名

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

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

各个类名中间用空格隔开。

ID选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

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

#nav {
	color: red;
}

id属性只能在每个HTML文档中出现一次（id就类似人的身份证，是唯一的）

通配符选择器

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

通配符选择器不需要调用，自动就给所有的元素使用样式

* {
	属性1:属性值1;
	...
}

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列，大小，粗细，和文字样式(如斜体)。

• 字体系列

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

p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft YaHei","微软雅黑";}

• 字体大小

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

p {
	font-size: 20px;
}

• 字体粗细

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

p {
	font-weight: bold;
}

• 字体样式

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

p {
	font-style: normal;
}

• 字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码:

body {
	font: font-style font-weight font-size/line-height font-family;
}

1. 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开。
2. 不需要设置的属性可以省略(取默认值),但必须保留font-size和font- family属性,否则font属性将不起作用。

CSS文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。

• 文本颜色

color属性用于定义文本的颜色。

• 对齐文本

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

div {
	text-align: center;
}

• 装饰文本

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

• 文本缩进

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

p {
	text-indent: 2em;
}

em代表一个字符大小。

• 行间距

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

p {
	line-height: 26px;
}

CSS的三种样式表

1. 行内样式表(行内式)
2. 内部样式表(嵌入式)
3. 外部样式表(链接式)

• 内部样式表

内部样式表(内嵌样式表)是写到html页面内部是将所有的CSS代码抽取出来,单独放到一个<style>标签中

• 行内样式表

  111

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

• 外部样式表

实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.

引入外部样式表分为两步

1. 新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。

2. 在HTML页面中,使用<link>标签引入这个文件。

Emmet语法

快速生成HTML结构语法

1. 生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>
2. 如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div
3. 如果有父子级关系的标签,可以用>比如ul>li就可以了
4. 如果有兄弟关系的标签,用+就可以了比如div+p
5. 如果生成带有类名或者id名字的,直接写.demo或者# two tab键就可以了
6. 如果生成的dv类名是有顺序的,可以用自增符号$
7. 如果想要在生成的标签内部写内容可以用{}表示

快速生成CSS样式语法

CSS基本采取简写形式即可

1. 比如w200按tab可以生成width: 200px
2. 比如lh26按tab可以生成line-height: 26px