Web前端入门笔记 CSS 第一天

参考https://www.bilibili.com/video/BV1pE411q7FU?p=87

• 什么是CSS
• 能够使用CSS基础选择器
• 能够设置文本样式
• 能够说出CSS的三种引入方式
• 能够使用Chrome调试用具调试样式

1. CSS简介

1.1 HTML局限性

HTML只关注语义，不关注 好看度

1.2 CSS（Cascading Style Sheets)

层叠样式表，级联样式表，CSS样式表

也是一门标记语言，主要用于设置 文本内容，图片外形，版面布局和外观显示样式

1.3 CSS语法规范

CSS由两部分构成：

• 选择器
• 一条或多条声明

选择器就是HTML标签，花括号内是对该对象设置的具体样式

属性和属性值以“键值对”的形式出现

属性和属性值之间用:分开

每个属性用;分开

1.4 CSS代码风格

1.4.1 样式格式书写

1. 紧凑格式

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

2. 展开格式⭐️更加直观，推荐使用​

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

1.4.2 样式大小写

强烈推荐选择器，属性名，属性值关键字全部使用小写字母

1.4.3 空格规范

1. 键值对中间留一个空格
2. 选择器和大括号中间保留空格

2. CSS基础选择器

2.1 CSS选择器的作用

选择器是用来选择标签的

1. 找到所有的xx标签，选择指定的标签（选对人
2. 设置标签的样式，比如颜色为红色（做对事

2.2 CSS选择器的分类

分为 基础选择器 和 复合选择器

• 基础选择器是由单个选择器组成的，包括

  标签选择器

  类选择器

  id选择器

  通配符选择器

2.3 CSS 标签选择器

用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一CSS样式

标签名 { 
    属性1: 属性值1; 
    属性2: 属性值2; 
    属性3: 属性值3; 
}

优点：可以为所有标签设置统一样式

缺点：不能设计差异化样式，只能选择全部的当前标签

2.4 类选择器

.类名{
	属性1: 属性值1; 
    属性2: 属性值2; 
    属性3: 属性值3; 
}

需要在标签中 使用class属性

注意

1. 类选择器使用.(英文小数点) 进行标识，后面跟着 自定义的类名
2. 为标签起了不同的名字
3. 长名称或自粗可以使用短横线为选择器命名
4. 不要使用纯数字，中文命名
5. 命名一定要有意义

类选择器-多类名

给一个标签指定 多个类名， 从而达到更多的选择目的

1. 多类名使用方式

   <div class="red font20">亚瑟</div> 
   class 中写多个类名
   多个类名中间用`空格`分开
   

2. 多类名使用场景

   把上一个做的盒子，提取出了盒子的大小样式，修改起来更加简单

2.5 id选择器

#id名 {
    属性1: 属性值1; 
    属性2: 属性值2; 
}

id是唯一的，别人不能再次使用

id和类选择器的区别

1. 类可以被多个人使用，好比 名字
2. id只能被一个人使用，好比 身份证号码
3. 开发类最多，id一般用于唯一性的元素上

2.6 通配符选择器

通配符选择器使用“*”定义，它表示选取页面中所有元素

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

• 通配符选择器会把所有的元素都用于该样式

• 特殊情况下才会使用（比如清除所有元素标签的内外边距，后期会讲

  * {
      margin: 0;
      padding: 0;
  }
  

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

3. CSS字体属性

定义字体的大小粗细样式

3.1 字体系列

p { font-family: “微软雅黑”}

推荐使用字体英文名

font-family:'Microsoft YaHei'，Arial，Helvetica,sans-serif;

• 各个字体之间必须用英文状态下的逗号隔开
• 有空格的字体一定要 用引号包裹起来
• 尽量使用默认字体，保证任何用户的浏览器中都能正确显示

多个字体：按照顺序查找字体，如果你电脑装了这个，那就用这个显示，没装的话，就切换到下一个字体。全都没有的话，用默认字体显示

3.2 字体大小

p {
    font-size: 20px;
}

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

3.3 字体粗细

查看DHTMLET文档，其中number表示字体大小，通常开发中都会用数字来进行css设计

属性值	描述
normal	默认值 不加粗
bold	加粗
100-900	400等同于normal，而700等同于bold注意这个数字后面不跟单位

通过normal，可以将标题变成正常字体

3.4 文字样式

使用font-style属性设置文本的分割

p {
font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

平常我们很少给文字加斜体，反而我们要给斜体标签改成不倾斜的文字

3.5 字体复合属性

为了节约代码，可以将上述的字体样式综合来写，这样可以节约代码

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

• 不能更换顺序，每个属性之间以空格隔开
• 必须保留font-size和font-family属性

属性	表示	注意点
font-size	字号	我们通常用的单位是 px 一定要在数字后面带上这个单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	加粗是700或者bold 不加粗是normal或者400 数字不要跟着单位
font-style	字体样式	倾斜是italic 不倾斜是normal 工作中常用normal
font	字体连写	字体连写是有顺序的，不能随意换位置 字号和字体必须同时出现

4. CSS文本属性

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

4.1 文本颜色 color

color属性用来定义文本的颜色

div {
    color: red;
}

表示	属性值
预定义的颜色值	red, greed, blue等等
十六进制	#FF0000, ##FF6600等等
RGB代码	rgb(255,0,0)等等

开发中最常用的是十六进制

4.2 文本对齐 text-align

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

div {
    text-align: center;
}

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

4.3 文本装饰 text-decoration

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

属性值	解释
none	默认 没有装饰线（最常用
underline	下划线，链接a自带下划线（常用
overline	上划线，几乎不用
line-through	删除线（不常用

4.4 文本缩进 tetx-indent

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

 div {  
   text-indent: 10px; 
}

 p {  
   text-indent: 2em; 
 }

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。

4.5 行间距 line-height

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

p {  
   line-height: 26px; 
 }

4.6 文本属性总结

属性	表示	注意点
color	文本颜色	最常用十六进制
text-align	文本对齐	可以设置文字水平的对齐方式
text-indent	文本缩进	通常在段落首行缩进两个字的距离text-indent: 2em
text-decoration	文本修饰	重要的是 添加下划线：underline 和 取消下划线none
text-height	文本修饰	控制行与行之间的距离

5. CSS引入方式

5.1 内部样式表

内部样式表是写道html页面内部，将所有的CSS代码都抽出来，单独放到一个style标签中

<style>
div {
    color: red;
    font-size: 12px;
}
</style>

• <style>标签理论上可以在HTML文档的任何地方，但我们一般放在head标签中
• 通过这种方式，可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰，但也灭有实现结构和样式完全分离
• 内部样式表也被称作 嵌入式引入，是练习时常用的方式

5.2 行内样式表

在元素标签内部的style属性中设置CSS样式。适合于修改简单样式

 <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 

• style 其实就是标签的属性
• 在双引号中间，写法要符合 CSS 规范
• 可以控制当前的标签设置样式
• 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
• 使用行内样式表设定 CSS，通常也被称为行内式引入

5.3 外部样式表

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

引入外部样式表分为两步

1. 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
2. 在HTML页面中，使用<link>标签引入文件

<link rel="stylesheet"  href="css文件路径"> 

属性	作用
rel	定义当前文档与被链接文档之间的关系，这里需要指定为stylesheet, 表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL， 可以是相对路径，也可以是绝对路径

使用外部样式表设定CSS，通常也被成为 外链式 或者 链接式引入。这种方式是开发中最常用的方式。

5.4 CSS引入方式总结

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