前端-基础CSS总结常用

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

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

<p>体验 CSS</p>

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

行内写法，配合js:<div style="color: red; font-size:20px;">这是 div 标签</div>

颜色：color:

字号：font-size:30px;

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

3.类选择器   作用：查找标签，差异化设置标签的显示效果。

• 定义类选择器 → .类名

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

• .red {}                <div class="red">这是 div 标签</div>

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

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

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

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

• 定义 id 选择器 → #id名

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

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

5. 通配符选择器

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

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

* {
  color: red;
}

用于清除标签的默认样式，例如：标签默认的外边距、内边距: 

*{

     margin:0;

     padding:0;

}

6.宽度：width:100px;

   高度：height:100px;

   背景色：background-color

   字体大小：font-size

   字体倾斜：font-style

   字体粗细：font-weight

   行高：line-height    

• 数字 + px

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

• 单行文字垂直居中：line-height: 100px;

• 字体族：font-family

• 字体复合属性：font

• 文本缩进：text-indent

• 文本对齐：text-align

• 修饰线：text-decoration

• 颜色：color