css01

CSS

1.CSS简介

css主要使用场景就是没花网页，布局页面
1.HTML的局限性： 只关注内容的语义。HTML主要做结构，显示元素内容
2.css是层叠样式表的简称，是一种标记语言。
css最大价值：html负责结构，css负责样式
3.css的语法规范
css是由两个主要部分构成：选择器以及一条或多条声明。
h1{color：red；font-size：25px；}
h1是选择器，选择哪个对象来修改。color是属性，修改为什么颜色。red是值。
1).选择器是用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式。
2).属性和属性值之间以键值对的形式书写。
3).属性是对指定对象设置的样式属性。
4).属性和属性值之间用英文:分开。
5).多个键值对之间用英文;进行区分。
4.代码风格
1).样式格式
紧凑格式：h1{color：red；font-size：25px；}
展开格式：

 p {
​      color: red;
​      font-size: 12px;
​    }

2).样式大小写：建议小写。
3).空格规范：属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号之间保留一个空格。

2.css基础选择器

1.css选择器的作用：选择标签使用
2.选择器分为基础选择器和复合选择器
基础选择器：是单个选择器。包括：标签选择器、类选择器、id选择器、通配选择器

2.1标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式
语法：
标签名 {
​ 属性1: 属性值1;
​ 属性2: 属性值2;
​ 属性3: 属性值3;
}
作用：标签选择器可以把某一类标签全部选择出来。

2.2类选择器

类选择器可以差异化选择不同的标签，单独选一个或某几个标签。以.号显示
语法：
.类名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
…
}

.red{
  color: red;
}

结构需要用class属性来调用class类的意思
<div class='red'>变红色</div>
注意： 1.类选择器使用.(英文点号)进行标识，后面紧跟类名。

2.2.1类选择器-多类名

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。（简单理解就是一个标签有多个名字）
1.多类名使用方式:<div class="red font20">亚瑟</div>
注意： 在标签class属性中写多个类名；多个类名中间必须用空格分开；这个标签可以分别具有这些类名的样式。

使用场景： 可以把一些标签元素相同的样式（公共部分）放到一个类里面；这些标签都可以调用这个公告的类，然后再调用自己独有的类；从而节省css代码，统一修改非常方便。

2.3id选择器

id选择器可以为标有特特定id的HTML元素指定的样式。HTML元素以id属性来设置id选择器，css中的id选择器以#来定义。

语法：
#id名 {
属性1: 属性值;
…
}
例如将id为nav元素中的内容设置为红色

#nav {
  color: red;
}

id选择器的口诀：样式#定义，结构id调用，只能调用一次，别的标签不能使用
id选择器和类选择器的区别
1.类选择器（class）好比人的名字，一个人可以由多个名字，同时一个名字也可以被多个人使用
2.id选择器好比身份证号码，全国唯一，不得重复
3.id选择器和类选择器最大的不同在于使用次数上
4.类选择器在修改样式中的作用最多，id选择器一般用于页面唯一的元素上，经常和js搭配使用

2.4通配符选择器

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

* { 属性1: 属性值1; ... }
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景（以下是清楚多有的元素标签的内外边距）

* {
margin: 0;
padding: 0;
}

2.5基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出相同的标签，比如p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常的	.nav {color: red;}
id选择器	一次只能选择1个标签	id属性只能在每个HTML在文档中出现一次	一般搭配js	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color: red;}

3.css字体属性

3.1字体系列

css使用font-family属性定义文本的字体系列。
p { font-family: “微软雅黑”;}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体
• 最常见的字体：body { font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";}

3.2字体大小

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

p {
  font-size: 20px;
}

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

3.3字体粗细

css使用font-weight属性设置文档

p {
  font-weight: bold;
}

normal:默认值不加粗=400。bold：定义粗体加粗=700注意数字后面不加单位

3.4字体样式

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

p {
  font-style: normal;
}

normal:正常字体样式，italic:倾斜字体。

3.5字体的符合属性

字体属性可以把上述字体样式综合来写，这也节省代码

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

• 不可颠倒顺序，各个属性用空格隔开
• 不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用

3.6字体属性总结

属性	表示	注意点
font-size	字号	单位是px
font-family	字体	按照团队约定来写字体
font-weight	字体粗细	加粗是700/bold不加粗是400/normal
font-style	字体样式	倾斜是itailc不倾斜是normal
font	字体连写	字体连写有顺序，不能随意换位置；字体和字号必须同时出现

4.css文本属性

4.1文本颜色

color属性用于定义文本颜色

表示	属性值
预定义的颜色值	red,blue,green
十六进制	#FF0000,#FF6600,#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2对齐文本

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

div {
  text-align: center;
}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

4.3装饰文本

text-decoration属性规定添加文本的修饰，删除线、上划线、下化线

div {
  text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线
underline	下划线。链接a自带下划线
overline	上划线。
line-through	删除线

4.4文本缩进

text-indent指文本第一行缩进

4.5行间距

line-height属性用于设置行间距，控制文本行与行的距离

p {
  linr-height: 26px;
}

4.6文本属性总结

属性	表示	注意点
color	文本颜色	十六进制和rgb形式
text-align	文本对齐	设置文字水平的对齐方式
text-indent	文本缩进	首行缩进两个字的距离text-indent: 2em;
text-decoration	文本修饰	下划线underline 取消下划线none
linr-height	行高	控制行与行之间的距离

css引入方式

5.1css的三种样式表

1.内部样式表（内嵌样式表）：就是在html页面内部写样式，但是单独卸载style标签部分。

• 理论上，style可以放在html的任何地方，但通常都会放在head内

• 通过这种方式，可以方便控制当前整个页面中的元素样式设置

• 代码结构清晰，但并没有完全实现结构和样式的分离
  2.行内样式表
  在元素标签内部的style属性中设定css样式，适合于简答修改
  eg：给我一个<p style="color: pink;">粉红色回忆</p>

• style其实就是标签属性

• 在双引号之间，写法要符合规范

• 可以控制当前的标签设置样式

• 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  3.外部样式表
  样式单独写在css文件中，之后把css文件引入到html页面中使用

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

• 在html页面中，使用标签引入css文件
  <link rel="stylesheet" href="css文件路径">
  rel—定义当前文档与被链接文档之间的关系，在这里需要被指定为“stylesheet”，表示被链接的文档是一个样式表文件

  href—定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混乱	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，吐血推荐	控制多个页面

chrome调试工具