CSS基础（1）

css引用方式（内联式）
css引用方式（内嵌式）
css引用方式（外链式）
css基础选择器
css基础字体样式
css外观属性

css引用方式（内联式）

内联式也称行内样式、行间样式。是通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是：
多组属性值之间用；隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

css引用方式（内嵌式）

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

style标签一般位于head标签中
只能控制当前的页面

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

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

css引用方式（外链式）

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

link 是个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

这里写图片描述

css基础选择器

1. 标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签,能快速为页面中同类型的标签统一样式,但不能设计差异化样式。

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

2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签。长名称或词组可以使用中横线来为选择器命名，不要纯数字、中文等命名，尽量使用英文字母来表示。

可以给标签指定多个类名，从而达到更多的选择目的，各个类名中间用空格隔开。

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

<p class='类名'></p>

3.ID选择器
id选择器使用#进行标识，后面紧跟id名，元素的id值是唯一的，只能对应于文档中某一个具体的元素，用法基本和类选择器相同。

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

<p id="id名"></p>

4.通配符选择器
通配符选择器用*号表示,就是选择所有的标签,他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
通配符选择器会匹配页面所有的元素，降低页面响应速度，不建议随便使用。

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

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

css基础字体样式

1.font-size:大小
font-size属性用于设置字号,可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。谷歌浏览器默认的文字大小为16px，但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。

p {  
    font-size:20px; 
}

这里写图片描述
2.font-family:字体
font-family属性用于设置哪一种字体,网页中常用的字体有宋体、微软雅黑、黑体等。可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。

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

各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.font-weight:字体粗细
在html中如何将字体加粗我们可以用标签来实现，使用 b 和 strong 标签是文本加粗。可以使用CSS 来实现，但是CSS 是没有语义的。
这里写图片描述
4.font-style:字体风格
在html中如何将字体倾斜我们可以用标签来实现，字体倾斜除了用 i 和 em 标签，font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。

5. font:综合设置字体样式
使用font属性时，必须按下面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

这里写图片描述

css外观属性

1.color:文本颜色
color属性用于定义文本的颜色
这里写图片描述
2.text-align:文本水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
是让盒子里面的内容水平居中，而不是让盒子居中对齐

3.line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%

line-height: 24px;

4.text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

5.text-decoration 文本的装饰
text-decoration 通常用于给链接修改装饰效果
这里写图片描述
总结：

Web前端——CSS（1）