css样式表和选择器

cssday01

css是层叠样式表的简称，主要用于美化界面。

语法格式：选择器：{属性：属性值；属性：属性值；}

css引入方式

1. 行内样式表

   <div style="width: 300px;height: 400px;background-color:pink;"></div>
   

2. 内联样式表

   内联样式表：一般放在head标签对之间，也可以放在页面的任何位置。

   <style>
           .header{
               width: 280px;
               height: 30px;
               background-color: blueviolet;
               margin: 10px auto;
           }
   </style>
   

   <div class="header">
               <h1>欢迎你！</h1>
   </div>
   

3. 外链样式表

   外链样式表是将一个或者多个.css文件通过标签链接到HTML文件中。

<!-- 引入外部样式表-css文件 -->
    <link rel="stylesheet" href="css/01-style.css">

css基础选择器

css通过选择器为指定元素设置样式。

1. 标签选择器

   标签选择器也成为元素选择器，是通过HTML标签名来查找元素为指定的标签元素添加css样式

   标签名{属性1:属性值;属性1:属性值;}
   元素名{属性1:属性值;属性1:属性值;}
   

2. 类选择器

   类选择器是通过给某一元素添加类名，在通过类选择器给指定类名的元素添加css样式。

   注：类选择器命名格式：（“.”+类名） 可以重复调用

   /* 类选择器 */
           .item{
               font-size: 16px;
               color: white;
               background-color: brown;
           }
   /*
   .类名{属性1：属性值;属性2：属性值;}
   */
   

   <p class="item">我是一个段落</p>
   

3. id选择器

   id选择器是通过给某一元素添加类名，在通过id选择器给指定id名的元素添加css样式。

   注：id选择器的命名格式：（“#”+id名） id具有唯一性，不可以重复调用

   /* id选择器 */
           #active{
               background-color: black;
           }
   /* #id名{属性1：属性值;属性2：属性值;} */
   

   <ul>
            <li id="active">item1</li>
            <li class="item">item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
   </ul>
   

4. 后代选择器

   后代选择器是根据标签之间的关系（嵌套/并列）来进行元素的选择，为其设置css样式。后代选择器（选择器名称 选择器名称）可以跳级选择标签设置样式

   注：选择器名称可以是标签选择器，类选择器，id选择器

   /* 后代选择器 */
           .nav .nav-item a{
               color: black;
               text-decoration: none;
           }
   

   <div class="nav">
            <span class="nav-item">
                <a href="#">首页</a>
            </span>
        </div>
   

5. 父子选择器

   父子选择器是根据标签之间的关系（嵌套/并列）来进行元素的选择，为其设置css样式。父子选择器（选择器名称>选择器名称）必须一级一级（只能是父子，不能是爷孙）的查找标签设置样式

   /* 父子选择器 */
           .nav>.nav-item>a{
               font-size: 24px;
           }
   

    <div class="nav">
            <span class="nav-item">
                <a href="#">首页</a>
            </span>
        </div>
   

6. 通配符选择器

   通配符选择器：设置的样式对页面所有元素起作用，通常做初始化效果

   语法格式：*{属性1：属性值;属性2：属性值;}

   *{
       margin: 0;
       padding: 0;
   }
   

   选择器的权重

   css的优先级:是css选择器的权重，权重越大，优先级越高

   优先级排序：

   1. 行内样式的权重值：1，0，0，0，

   2. id选择器的权重值：0，1，0，0

   3. 类选择器|伪类选择器|属性的权重值：0，0，1，0

   4. 元素（标签）选择器的权重值：0，0，0，1

   5. ！important的权重值：无穷大

   总结：!important>行内样式>id>类>元素

   css外观属性

   字体属性

   ​ font-**

   ​ font-size:设置字体大小

   ​ font-weight:设置字体粗细 取值范围100-900 400-normal 700-bold

   ​ font-style:设置字体风格 italic 表示斜体 normal 表示正常

   ​ font:设置字体符合属性 必须按照一定顺序书写 不需要的属性可以省略 但需保留font-size和font-family;

   ​ 格式（font:font-style font-weight font-size|行高 font-family）

   文本属性

   ​ text-**

   ​ text-align:设置文本对齐方式 参数：left center right

   ​ text-indent:设置首行缩进

   ​ text-decoration:设置文本修饰线 参数：none underline line-through overline

   ​ text-transform:设置文本大小写转换

   ​ text-shadow:设置文本阴影 (参数1：x轴方向偏移量 参数2：y轴方向偏移量 参数3：模糊程度 参数4：颜色)