黑马程序员CSS知识点干货版(上)

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

提示：属性名和属性值成对出现 → 键值对 。

选择器 {属性名: 属性值;}

                <title>CSS 初体验</title> 

                <style> 

                   p { 

                        color: red; 

                        } 

                   </style>

CSS引入方式

内部样式表： 学习使用

        CSS 代码写在 style 标签里面 

外部样式表： 开发使用

        CSS 代码写在单独的 CSS 文件中（ .css ） 

在 HTML 使用 link 标签引入

        行内样式： 配合 JavaScript 使用 

        CSS 写在标签的 style 属性值里 

CSS 引入方式

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

<div style="color: red; font-size:20px;"> 这是 div 标签 </div>

选择器

作用： 查找标签 ，设置样式。

        基础选择器 

                • 标签选择器 

                • 类选择器 

                • id 选择器 

                • 通配符选择器

标签选择器

标签选择器：使用 标签名 作为选择器 → 选中 同名标签 设置 相同的样式 。

例如：p, h1, div, a, img......

注意：标签选择器 无法差异化 同名标签的显示效果。

< style >

p {

color : red;

}

</ style >

类选择器

作用：查找标签， 差异化 设置标签的显示效果。

步骤：

• 定义类选择器 → .类名

• 使用类选择器 → 标签添加 class="类名“

注意：

• 类名自定义， 不要用纯数字或中文 ，尽量用英文命名

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

• 一个标签可以使用 多个 类名，类名之间用 空格 隔开

开发习惯：类名 见名知意 ，多个单词可以用 - 连接，例如： news-hd

例：

< style >

/* 定义类选择器 */

.red {

color : red;

}

</ style >

<!-- 使用类选择器 -->

< div class = "red" > 这是 div 标签 </ div >

id选择器

作用：查找标签， 差异化 设置标签的显示效果。

场景：id 选择器一般 配合 JavaScript 使用 ，很少用来设置 CSS 样式

步骤：

•

定义 id 选择器 → #id名

• 使用 id 选择器 → 标签添加 id= "id名"

规则：

• 同一个 id 选择器在一个页面只能使用一次

例：

< style >

/* 定义 id 选择器 */

#red {

color : red;

}

</ style >

<!-- 使用 id 选择器 -->

< div id = "red" > 这是 div 标签 </ div >

通配符选择器

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

通配符选择器： * ， 不需要调用 ，浏览器 自动 查找页面 所有 标签，设置相同的样式

例：

* {

color : red;

}

经验：

• 通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

* {

margin : 0;

padding：0；

}

宽高背景色

文字控制属性

字体大小

属性名： font-size

属性值： 文字尺寸 ，PC 端网页最常用的单位 px

经验：谷歌浏览器默认字号是16px

字体大小

p {

font-size : 30 px ;

}

字体粗细

属性名： font-weight

属性值

• 数字（开发使用）

• 关键字

/* 不加粗 */

font-weight : 400 ;

/* 加粗 */

font-weight : 700 ;

字体样式（是否倾斜）

作用： 清除文字默认的倾斜效果

属性名： font-style

属性值

• 正常（不倾斜）：normal

• 倾斜：italic

行高

作用：设置 多行文本的间距

属性名： line-height

属性值

• 数字 + px

• 数字 （当前标签 font-size 属性值的 倍数 ）

line-height : 30px ;

/* 当前标签字体大小为 16px */

line-height : 2 ;

行高的测量方法 ：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

1. 如何书写 line-height 属性值？

数字 + px

数字 （当前标签 font-size 值的 倍数

行高-垂直居中

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

注意：该技巧适用于单行文字垂直居中效果

字体族

属性名： font-family

属性值：字体名

font-family : 楷体 ;

font-family : Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif ;

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用 逗号 隔开，执行顺序是 从左向右 依次查找

• font-family 属性 最后 设置一个 字体族名 ，网页开发建议使用 无衬线字体

属性值：字体名1, 字体名2…., 字体族名（ 可以只写一个字体名 ）

执行顺序： 从左向右 依次查找

font 复合属性

使用场景：设置网页文字公共样式

div {

/* 文字倾斜 */

font-style : italic;

/* 文字加粗 */

font-weight : 700 ;

/* 字体大小是 30px */

font-size : 30 px ;

/* 行高为字号的 2 倍 */

line-height : 2 ;

/* 字体是楷体 */

font-family : 楷体 ;

}

div {

/* font: 是否倾斜 是否加粗 字号 / 行高 字体 ; */

font : italic 700 30 px / 2 楷体