Css入门-1

一：论怎么理解CSS

1.怎么理解CSS：html是躯干，CSS就是装饰，JS就是特技；CSS就是你拿在手里的易容术

2.装饰就要选躯干的位置-------四大选择器

     2.1 标签选择器

     2.2 类选择器/伪类选择器

     2.3 id选择器（类选择器可以有多个。ID唯一）

     2.4 通配符选择器

3.不同的装饰遵循一定的特质-- 三大特性

                     3.1 层叠性

                     3.2 继承性

                     3.3 优先级

二：

1.Font字体相关：

    1.1 设置字体：

P标签中的字体，浏览器会首选新罗马，若没有，就找到times，还没，就找serif；还没有，就是使用系统默认字体

<style>
      
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;

         /* 标题标签比较特殊,需要单独指定文字大小 */
        font-size:16px

            /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
        font-weight:700;


       font-style: italic;
    /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
     }



复合属性
 /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';（像素和字体是必写）
       }

</style>

   1.2 使用CSS设置文本样式

1.设置文本颜色：color，三种中设置方式

<style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>


2.设置文本对齐：text-align
<style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
             /* text-align: left; */
            text-align: right;
        }
    </style>


3.设置文本装饰：
  <style>
       div {
           /* 下划线 */
           /* text-decoration: underline;   */
         /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;

       }
       a {
           /* 取消a默认的下划线 */
           text-decoration: none;
           color: #333;
       }
    </style>



4.设置文本缩进：
div { 
        text-indent：20px；
    }
    div { 
        text-indent：2em；
    }
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。


5.设置行间距：
 行高的文本分为 上间距  文本高度 下间距 = 行间距
    p { 
        line-height: 26px;
    }

1.3CSS样式表：

行内样式表（行内式）

内部样式表（嵌入式）

外部样式表（链接式）

<link rel="stylesheet" href="css文件路径">