CSS基础

（according to B站黑马程序员课程）

---

CSS引入方式

内嵌式：CSS写在style标签中。通常约定写在head标签中

外联式：CSS写在单独的.css文件里

行内式：CSS写在标签的style属性中。配合js使用

外联式

行内式

基础选择器

1. 标签选择器：标签名 {css属性名：属性值；}

                          特点： 选中的所有标签都生效此css

2. 类选择器： .类名 {css属性名：属性值；}

                     

需要定义再使用才能生效

 同时多个类名，空格隔开

3. id选择器： #id属性值 {css属性名：属性值；}

                    一般配合js选择标签做动态效果使用。

 id选择器要求较为严格，是为了后续js不出错

 4. 通配符选择器 ： * {css属性名：属性值；}

 通配符选择器可以选中所有标签，使用频率的少。

例如 *{margin：0； padding：0；}  可以清除所有标签的默认边距。

字体和文本样式

一、字体样式

属性：font-size  

取值：数字+px（必须写px）

          谷歌浏览器默认文字大小是16px

属性：font-weight 

取值：normal对应400；bold对应700.

        

属性：font-style (控制字体是否倾斜)  

取值：正常值——normal （默认）

             倾斜 ——italic

属性：font-family (字体)  

取值：

 最后效果会显示蓝色。因为blue覆盖了red。

属性：font （复合属性）简写方式

取值：font ：style weight size family;  (属性之间空格隔开) 

  

 

二、文本样式

文本缩进：有两种属性取值

· 数字+px

· 数字+em（1em是当前字号的大小）

文本水平对齐：有三种属性值——left；center；right 。默认left

*center能让以下元素水平居中

· 文本

· span标签、a标签

· input标签、img标签

设置居中时需要给以上元素的父元素设置居中。

文本修饰：四种属性值

underline（下划线）/ line-through (删除线) / overline（上划线）/none （无装饰，常用）

none用于清除<a>默认的下划线：a {text-decoration：none；}

三、line-height行高

属性值：数字+px 或 倍数 （当前font-size的倍数）

如果同时设置行高与font连写，需要注意覆盖问题。

font：style weight size/line-height family；

四、Chrome调试工具

空白页面右击点检查或者快捷键F12（+Fn）：

删除线：此行代码未生效或手动注释掉

黄色感叹号：css语法有问题

css代码区域可以调试，但是需要在源代码上改后才能真正生效

五、颜色取值

 六、标签居中

 

 还没完 等我整理好继续编辑