CSS01-CSS基础

1.CSS介绍

书写位置：</head>标签中添加</style>标签，</style>标签里面书写 CSS 代码。

示例代码：

<title>CSS</title>
<style>
/* css选择器 */
  p {
    color: red;/* css属性 */
  }
</style>

<p>你好，前端</p>

css中的属性以键值对的形式出现

2.CSS引入方式

1. 内部样式表:
   直接在HTML文档中使用</style>标签；这种方式有利于快速修改样式，但不利于维护和复用。

2. 外部样式表:
   将样式规则保存在独立的.css文件中，然后在HTML文档中在</head>里通过<link>标签引用；这种方式可以提高代码的可读性和可维护性，同时可以减少页面加载时间，因为浏览器会缓存CSS文件。

<link rel="stylesheet" href="./text.css">

3. 内联样式/行内样式:
   HTML元素的style属性中直接定义CSS规则，一般配合JavaScript使用。

<div style="color: red; font-size:20px;">你好，css</div>

3.CSS选择器

3.1 元素选择器

直接使用标签名作为选择器

<style>
  p {
    color: red;
  }
</style>

3.2 类选择器

1. 标签添加属性：class="类名"
2. 类选择器： .类名

<style>
  /* 定义类选择器 */
  .red {
    color: red;
  }
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

• 一个类选择器可以供多个标签使用
• 一个标签可以使用多个类名

3.3 ID选择器

1. 标签添加属性：id="id名"
2. 类选择器： #id名

<style>
  /* 定义 id 选择器 */
  #red {
    color: red;
  }
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

• 同一个 id 选择器在一个页面只能使用一次。
• ID代表了一个元素的唯一标识符。

3.4 通配符选择器

查找页面所有标签，设置相同样式。

通配符选择器；*

* {
  color: red;
}

通配符选择器一般用于清除浏览器默认样式带来的差异，例如，将所有元素的外边距和内边距设为零。

4.盒子尺寸和背景色

示例代码：

<title>CSS</title>
<style>
    .div1{
        width: 100px;
        height: 125px;
        background-color: red;
    }
    .div2{
         width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>

效果演示：

5.文字控制属性

5.1 字体大小font-size

属性名：font-size

属性值：px

谷歌浏览器默认字号是16px。

5.2 字体样式（是否倾斜） font-style

属性名：font-style

属性值

1. 正常（不倾斜）：normal
2. 倾斜：italic

5.3 行高line-height

属性名：line-height

属性值

1. 数字 + px
2. 数字（当前标签font-size属性值的倍数）

单行文字垂直居中技巧：行高属性值等于盒子高度属性值

5.4 字体族font-family

属性名：font-family

属性值：字体名

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找,电脑中有哪个就用哪个。

5.5 复合属性font

复合属性：设置多个属性的简写方式，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字体大小/行高 字体（必须按顺序书写）

注意：字号和字体族必须书写，否则 font 属性不生效 。

div {
  font: italic 700 30px/2 楷体;
}

5.6 文本缩进text-indent

属性名：text-indent

属性值：

1. 数字 + px
2. 数字 + em（推荐：1em = 当前标签的字体大小）

5.7 文本对齐方式text-align

作用：控制内容水平对齐方式

属性名：text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

5.8 文本修饰线text-decoration

属性名：text-decoration

5.9文字颜色color

只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。