正式进入css阶段

正式进入css阶段

css 引入的几种方式：

1、行内式

冗余代码多，代码量大
不利于维护和修改
优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用
```
<div style="color:deeppink;">你们都很棒！</div>
```
```javascript <!DOCTYPE html>

<a name="bzdHE"></a>
### 2、内嵌式：在head里面通过style标签来写，如下
```javascript
<style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
</style>

3、外链式，在head里面通过link标签把样式表给链接过来。

<link rel="stylesheet" href="index.css">

4、导入式

<style>
        @import "index.css";
</style>

清除默认样式

1、清除页面中元素默认自带的margin值和padding值

*是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，把页面中所有元素默认自带的margin值和padding值都归为0.

*{
  margin:0;
  padding:0;
}

2、清除列表前面默认的样式

ul,ol{
    list-style: none;
}

3、清除a标签下划线

a{
    text-decoration: none;
}

2、基础样式的设置：

1、文本颜色的设置（color）

color属性: 设置文字颜色（可以继承的）
① 可以直接设置颜色的名字（开发中很少使用，因为不精确）

red
green
yellow
pink
blue
grey
purple
orange
lightblue
lightgreen
greenyellow
yellowgreen
………

② 设置为三原色 红r 绿g 蓝b

所有颜色都是由这三种颜色调制出来的
每一个颜色的值都是 0-255之间
rgb(30,120,200)
颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)

③ 颜色还可以设置为十六进制（不能设置透明度）

#加上16进制的颜色值 6位
#112233—> 11代表red的十六进制值 22代表green颜色的十六进制值 33代表blue颜色十六进制值
十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候可以每一位简写一个#112233—>#123 #aabb11—>#ab1 #000000—>#000 #111222—>#111222
2、关于a标签颜色的继承

a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
所以在开发中给a标签设置颜色，需要直接对a标签进行设置

3、font-family：设置字体(可以继承)
常见中文字体：”Microsoft YaHei”、”SimHei”、”SimSun”
但是我们设置的字体用户可能没有，我们需要设置备用字体在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体
如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号 ```javascript <!DOCTYPE html>
哈哈哈哈笑个鬼

<a name="FXe2R"></a>
### 4、font-size

1. 常用的单位是px、em、rem
1. 可以设置小数（低版本ie不支持）
1. 字号最好不要设置为奇数
1. 浏览器都有自己的默认字号大小和最小字号，谷歌浏览器默认字号大小是16px，谷歌浏览器支持的最小字号多数是12px如果设置12以下，字体不支持，但是如果设置字号为0 那么文字高度为0，消失！
<a name="aexhH"></a>
### 5、字体风格：font-style（可以继承）

- normal：正常多数元素的默认值对于默认倾斜或斜体的元素 i  em 可以调整成正常非倾斜样式
- italic 让元素呈现斜体 一般指的是一个字体在字体设计的过程中，会对一个文字设计** 正常体 斜体 粗体** 等状态而italic只是选择让使用斜体显示
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
    <style>
        em,i{
            font-style: normal;
        }
        .outer{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>
        <em>em啊</em>
        <i>i啊</i>
    </div>
    <div class="outer">
        outer中
              <!-- 继承斜体的样式 -->
        <span>span里</span>
    </div>
</body>
</html>

6、font-weight:(继承)

用来定义字体的粗细其实目前浏览器只支持3个级别细正常粗

normal：正常粗细可以将默认加粗的字体进行改变为正常比如 b strong
bold：加粗
100-900 整除100的整数：因为浏览器只支持细粗正常3个所以100-300 是细，400-500 正常，600-900 加粗 ```javascript <!DOCTYPE html>

我是小b 我是小s

我是一个box 我是一个span 我是em

我是con

<a name="laNSQ"></a>
### 7、line-height：(继承)

1. 值：(不支持负值)
   - normal：执行浏览器默认值，在各个浏览器中不同，并且还受字体的影响
   - 数字：没有单位，比如1.5 就是当前元素文字大小的1.5倍
   - 百分比：也是相对于当前元素的文字大小计算的，很少使用
   - 长度：带单位，直接设置行高
2. 使用line-height对单行文字（也可以是内联元素）做垂直居中

**将line-height的值设置为和height值一样即可**<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1638245915565-ba6582eb-7017-4c7b-91ad-d90d155f892e.png#clientId=uddfa3c94-b4a5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=74&id=ucc1194a3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=69&originWidth=342&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7274&status=done&style=none&taskId=ubdbcbf2d-01e8-49d6-9e68-cb2a2c81e8d&title=&width=369)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1638245938041-852f0b65-e2c6-421c-b30d-554e03d25f48.png#clientId=uddfa3c94-b4a5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=305&id=u9da66624&margin=%5Bobject%20Object%5D&name=image.png&originHeight=260&originWidth=584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=45947&status=done&style=none&taskId=u18bd9510-0c8c-498e-bcc0-4c23d646ee1&title=&width=686)
<a name="uHzYD"></a>
### 8、text-indent首行文本缩进

1. 单位是px 缩进的像素
1. em单位 em是一个相对单位，1em=当前文字的字号大小 如果缩进两个文字 那么2em
1. 只针对块级元素生效
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.text-indent首行文本缩进</title>
    <style>
        p{
            width: 200px;
            background-color: yellow;
            font-size:16px;
            /*text-indent: 32px;*/
            text-indent: 2em;
        }
        span{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
        <br>
        <span>
            真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊
        </span>
    </p>
</body>
</html>

9、text-align:(继承)

规定行内的内容如何相对于它的块级父元素水平方向对齐
并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐
- left：默认左对齐
- center：居中
- right：右对齐 ```javascript <!DOCTYPE html>
  
  hello world span

<a name="Gep73"></a>
### 10、表示背景颜色：background-color

- 背景颜色设置：background-color:颜色值（和color的颜色一致 十六进制 rgba  颜色单词）
<a name="NDMsl"></a>
### 11、text-decoration：文本修饰（不继承）
虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围

- none：取消下划线
- underline:下划线
- overline:上划线
- line-through：删除线
<a name="KqKXU"></a>
### 12、一个元素的宽度（width） 表示高度（height）
```javascript
<style>
     div{
         width:200px;
         height:200px;
         background-color:red;
     }
</style>

13、让块级元素水平居中：margin:0 auto;

div{
  width:100px;
  height:100px;
  background:green;
  margin:0 auto;
}

14、边框：border

<style>
  div{
    width:200px;
    height:200px;
    /* border:2px solid darkturquoise; */
    border:2px dashed darkturquoise; 
  }
</style>

15、border 是简写属性，设置所有的边框属性。

可以按顺序设置如下属性：

border-width
border-style
border-color

border-style可能的值：
课后作业：
珠峰案例
http://www.zhufengpeixun.cn/

默写：
1.css导入的几种方式
2.清除默认样式（你所学的）
3.文字颜色的值有几种
4.font-weight的值可以是哪些
5.单词

2022-03HTML CSS

day03