CSS 知识点速记1

内部样式表

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

外部样式表
CSS 代码写在单独的 CSS 文件中（.css） 在 HTML 使用 link 标签引入

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

//link 放在title下

//rel 关系，样式表

行内样式

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

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

类选择器差异化设置标签，可以给多个不同标签使用
一个标签可以使用多个类名，类名之间用空格隔开

定义类选择器 → .类名（可以用-）
使用类选择器 → 标签添加 class="类名"

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

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= "id名"

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

通配符选择器 页面所有标签，设置相同样式。   *，不需要调用

开发初期使用，取消默认样式，作为提醒是否已经设置样式

如 内外边距

盒子（样式加三个属性而已）

.redbox{
        width:1000px;
        height:100px:
        background-color:brown;
}

 

文字

宽高size必须有单位，否则不生效

粗细：

 

 行高（=上间距+文字+下间距，便于测量本行最高处到下一行最高处）

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

字体族

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

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

各个属性值之间用空格隔开，字号和字体值必须书写，否则 font 属性不生效 。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

 

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

文本修饰线
属性名： text-decoration

调试工具