CSS学习日记

关于样式表的基础

• 大部分标签都有 id 属性，同一个 html 文件中，id 必须唯一
• 大部分标签都有 class 属性，同一个文件中，class 可以重复
• 大部分标签都有一个 style 属性

样式表的三种写法

1. 行内样式

<strong style="font-size: 40px; color: aqua; ">我是行内样式</strong> 

2. 内部样式

body 中

<!-- 形式二 -->
  <center>
   <strong id="c1">我是内部样式</strong>
   <hr >
  </center>

head 中

<!-- 内部样式 -->
  <style type="text/css">
   #c1{
    /* 字体大小 */
    font-size: 40px;
    /* 字体类型 */
    font-family: "楷体";
    /* 字体颜色 */
    color: red;
   }
  </style>

3. 外部样式

（id 用 ‘#’ 号，class 用 ‘.’）
body 中

<!-- 外部样式 -->
  <center id="c2">
   我是外部样式
  </center>

head 中

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

CSS 文件中

#c2{
 font-size: 50px;
 font-family: "新宋体";
 color: blueviolet;
}

外部样式的基础使用：

1. 有多个class 时

body 中

  <ul style="align-items: center;">
   <li class="waste1">抽烟</li>
   <li class="waste2">喝酒</li>
   <li class="waste3">烫头</li>
   <li class="waste4">蹦迪</li>
  </ul>

CSS文件中

.waste1,.waste2,.waste3{
 color: brown;
}

2. 找子标签时

Body 中

  <ul style="align-items: center;">
   <li class="waste1">抽烟</li>
   <li class="waste2">喝酒</li>
   <li class="waste3">烫头</li>
   <li class="waste4">蹦迪</li>
  </ul>

CSS 文件中

ul>li{
 color: gray;
}