学习前端第三天之css

最新推荐文章于 2024-09-13 23:32:49 发布

小肖同学小

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量1.3k

点赞数 49

文章标签：前端学习 css

本文链接：https://blog.csdn.net/2401_85473013/article/details/139782591

版权

1.样式的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

行内样式的级别比内部样式还有外部样式的级别要高，内部样式和外部样式的级别一样。要注意的是他两者的级别一样所以后面的样式会覆盖前面的样式。

特殊规则：

1. 行内样式权重大于所有选择器。

2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

2.css选择器

1、通配选择器

作用：可以选中所有的 HTML 元素

语法如下：

 *{
            color: red;
            font—size:20px;


        }

2、元素选择器

作用：为页面中某种元素统一设置样式。

语法如下：

标签名{

属性名：属性值；

}

例如：

<style>
       h2{
            color: aquamarine;
        }
        p{
            color: azure;
        }
</style>

效果：

3、类选择器

作用：根据元素的 class 值，来选中某些元素

语法如下：

.类名{

属性名：属性值；

}

举例：

    <style>   
 /* 
        class标签不能是纯数字，不能是中文，里面可以有多值，但是不能有多个class
        元素的class不带点，但是css的时候带点
         */
 .speak{
            color: blueviolet;
        }
        .answer{
            color: darksalmon;
        }
</style>

效果：

4、ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

语法：

#id至{

属性名：属性值；

}

举例：

 <style>
        #earthy{
            color: aquamarine;
        }
        #turn-earthy{
            color: blue;
        }
 
    </style>

效果：

3.复合选择器

1、交集选择器

作用：选中同时符合多个条件的元素。

语法：选择器1选择器2选择器3...选择器n {}

举例：


    <style>
        .rich{
            color: darkgoldenrod;
        }
        .beauty{
            color: brown;
        }

        p.beauty#rich{
            color: bisque;
        }

    </style>

2、并集选择器

作用：选中多个选择器对应的元素

语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

多个选择器通过 , 连接，此处 , 的含义就是：或。

举例：

 <style>
     .rich {
        color: darkgoldenrod;
      
    }
    .beauty {
        color: brown;
    }
    .dog {
        color: black;
    }
    .pig {
        color: pink;

    }
    .rich,
    .beauty,
    .dog,
    .pig{
        font-size: 30px;
        background-color: aqua;
        width: 180px;
    }

3、后代选择器

作用：选中指定元素中，符合要求的后代元素、

语法：选择器1 选择器2 选择器3 ...... 选择器n {}

举例：

<style>
    ul li{
        color: burlywood;
    }
    ol li{
        color: brown;
    }
    ul li a{
        color: red;
    }
    ol li a{
        color: green;
    }
</style>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>
            <a href="#">打豆豆</a>
        </li>
    </ul>
    <hr>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>
            <a href="#">王五</a>
        </li>
    </ol>
</body>

4、子代选择器

作用：选中指定元素中，符合要求的子元素

语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

举例：

 <style>
        div>a{
            color: cadetblue;
        }
        div>p>a{
            color: chocolate;
        }
    </style>

    <!--  -->
   <div>
    <a href="#">打豆豆</a>
    <a href="#">打豆豆</a>
    <a href="#">打豆豆</a>
    <p>
        
        <a href="#">王五</a>
        <a href="#">王五</a>
        <a href="#">王五</a>
     
    </p>
   </div>

5、兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。

语法：选择器1+选择器2 {} 。

举例：

    <style>
        /* 选中div后紧紧相邻的p元素 用+号链接*/
        div+p{
            color: aqua;
        }
        /* 选中div后所有的p元素 用~号链接*/
        div~p{
            color: aquamarine;
        }
    </style>

<body>
    <div>前端</div>
        <p>后端</p>
        <p>大数据</p>
        <p>数据分析</p>
        <p></p>
    
</body>

6、属性选择器

作用：选中属性值符合一定要求的元素。

语法：
1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

   <style>
        /* 选中具有title属性的元素 */
        [title]{
            color: aliceblue;
        } 
        /* =:选中具有title属性的元素，且属性值为xuexi1的元素 */
         [title="xuexi1"]{
            color: blue;
        } 
         /* ^=:选中具有title属性的元素 ，且属性值开头为x的元素*/
         [title^="x"] {
            color: aqua;
        } 
         /* $=:选中具有title属性的元素 ，且属性值以e结尾的元素*/
            [title$="e"]{
                color: brown;
            } 
         /* 选中具有title属性的元素 ，且属性值包含字母i的元素*/
         [title*="e"]{
                color: brown;
            }
    </style>

<body>
    <div title="xuexi">学习好</div>
    <div title="xuexi1">好学习</div>
    <div title="xuexi2">好好学</div>
    <div title="xuue">天天学</div>
</body>

7、伪类选择器

作用：选中特殊状态的元素。

常用的伪类选择器：

一、动态伪类：

1. :link 超链接未被访问的状态。

2. :visited 超链接访问过的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状.

5.:focus 获取焦点的元素。

二、结构伪类

常用的：

1. :first-child 所有兄弟元素中的第一个。

2. :last-child 所有兄弟元素中的最后一个。

3. :nth-child(n) 所有兄弟元素中的第 n 个。

4. :first-of-type 所有同类型兄弟元素中的第一个。

5. :last-of-type 所有同类型兄弟元素中的最后一个。

6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。

三、否定伪类：

1:not(选择器) 排除满足括号中条件的元素。

四、UI伪类：

1. :checked 被选中的复选框或单选按钮。

2. :enable 可用的表单元素（没有 disabled 属性）。

3. :disabled 不可用的表单元素（有 disabled 属性）。

8、伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

1::first-letter 选中元素中的第一个文字。

2::first-line 选中元素中的第一行文字。

3::selection 选中被鼠标选中的内容。

4::placeholder 选中输入框的提示文字。

5::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

6::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

4.css的字体属性

1、字体大小

属性名： font-size

作用：控制字体的大小。

语法：

div {

font-size:40px;

}

2、字体族

属性名：font-family

作用：控制字体类型。

语法：

div {

font-family:"黑体";

}

举例：

   <style>
        /* 字体用英文兼容性更好 */
        .study1{
            font-size: 50px;
            font-family: "宋体";
        }
        .study2{
            font-size: 50px;
            font-family: "黑体";
        }
        .study3{
            font-size: 50px;
            font-family: "华文彩宋";
        }
        .study4{
            font-size: 50px;
            font-family: "翩翩体-简";
        }
    </style>

<body>
    <div class="study1">好好学习</div>
    <div class="study2">好好学习</div>
    <div class="study3">好好学习</div>
    <div class="study4">好好学习</div>
</body>

效果：

3、字体风格

属性名：font-style

作用：控制字体是否为斜体。

语法：

div {

font-style：normal；

}

举例：

    <style>
        /* 字体用英文兼容性更好 */
        .study1{
            font-size: 50px;
            font-family: "宋体";
            font-style: normal;
        }
        .study2{
            font-size: 50px;
            font-family: "宋体";
            font-style:italic;
        }
     
    </style>

<body>
    <div class="study1">好好学习</div>
    <div class="study2">好好学习</div>
    <div class="study3">好好学习</div>
    <div class="study4">好好学习</div>
</body>

4、字体粗细

属性名：font-weight；

作用：控制字体的粗细。

语法：

div {

font-weight：400px;

}

举例：

  <style>
        /* 字体用英文兼容性更好 */
        .study1{
            /* font-size: 50px;
            font-family: "宋体";
            font-style: normal; */
            font-weight: lighter;
        }
        .study2{
            /* font-size: 50px;
            font-family: "宋体";
            font-style:italic; */
            font-weight: normal;
        }
        .study3{
            /* font-size: 50px;
            font-family: "宋体";
            font-style:italic; */
            font-weight: bold
        }

     
    </style>

<body>
    <div class="study1">好好学习</div>
    <div class="study2">好好学习</div>
    <div class="study3">好好学习</div>
    <div class="study4">好好学习</div>
</body>

5、复合属性

属性名： font ，可以把上述字体样式合并成一个属性。

作用：将上述所有字体相关的属性复合在一起编写。

编写规则：

1. 字体大小、字体族必须都写上。

2. 字体族必须是最后一位、字体大小必须是倒数第二位。

3. 各个属性间用空格隔开。

实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-

size 属性。

举例：

<style>
 
.study1{
           font:  bold italic 300px "华文彩云";
        }
</style>

5.文本属性

1、文本颜色

属性名： color

作用：控制文字的颜色。

可选值：1. 颜色名

2. rgb 或 rgba

3. HEX 或 HEXA （十六进制）

4. HSL 或 HSLA

开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。

举例：

<style>
div {
color: rgb(112,45,78);

} 
</style>

2、文本间距

字母间距： letter-spacing

单词间距： word-spacing （通过空格识别词）

属性值为像素（ px ），正值让间距增大，负值让间距缩小。

举例：

    <style>
       
         /* 字母之间的间距 */
        .study2{
            letter-spacing: 2px;
            font-size: 50px;
            font-family: "宋体"; 
        }
        /* 单词之间的间距 */
        .study3{
            word-spacing: 20px;
        }
     
    </style>

<body>
    <div class="study1">好好学习</div>
    <div class="study2">好好学习</div>
    <div class="study3">good good study,好好学习</div>
    <div class="study4">好好学习</div>
</body>

3、文本修饰

属性名： text-decoration

作用：控制文本的各种装饰线。

可选值：

1. none ：无装饰线（常用）
2. underline ：下划线（常用）
3. overline ：上划线
4. line-through ：删除线

可搭配如下值使用：

1. dotted ：虚线
2. wavy ：波浪线
3. 也可以指定颜色

  <style>
        /* 字体用英文兼容性更好 */
        div{
            font-size: 50px;
        }
        /* 上划线 */
        .study1{
           text-decoration: overline dotted;
        }
        /* 下滑线 */
        .study2{
           text-decoration: underline wavy red;
            
        }
        /* 删除线 */
        .study3{
            text-decoration: line-through;
        }
     
    </style>

<body>
    <div class="study1">好好学习</div>
    <div class="study2">好好学习</div>
    <div class="study3">好好学习</div>
    <div class="study4">好好学习</div>
</body>

4、文本缩进

属性名： text-indent 。

作用：控制文本首字母的缩进。

属性值： css 中的长度单位，例如： px

举例：

    <style>
        div{
            font-size: 50px;
            text-indent: 100px;
        }
  
     
    </style>

<body>
    <div class="study1">亲爱的毕业生们，离校日期渐近，许多同学已经落实了毕业去向，并通过全国高校毕业生网上签约与毕业去向登记平台（以下简称“网签平台”）签订了三方协议、登记了毕业去向，但仍有部分落实去向的同学未在网签平台进行去向登记，还有一些同学正在求职过程中，等待最终的录取结果。无论你属于哪种情况，在离校后仍可继续使用网签平台签订三方协议、登记去向。下面小编就带着大家再重温一下网签平台的相关操作流程：</div>
    
</body>

5、文本对齐

属性名： text-align

作用：控制文本的水平对齐方式。

常用值：

1. left ：左对齐（默认值）
2. right ：右对齐
3. center ：居中对齐

举例：

<style>
    div{
        font-size: 20px;
        color: aqua;
        text-align: center;
    }
</style>
<body>
    <div>学习</div>
</body>

6、行高

属性名： line-height

作用：控制一行文字的高度。

可选值：

1. normal ：由浏览器根据文字大小决定的一个默认值。
2. 像素( px )。
3. 数字：参考自身 font-size 的倍数（很常用）。
4. 百分比：参考自身 font-size 的百分比。

举例：

<style>
    div{
        text-indent: 40px;
        font-size: 20px;
        /*第一种写法像素 */
        line-height: 50px 
        /* 第二种写法 */
         line-height: normal; 
        /* 第三种写法 数值*/
       line-height: 1.5; 
        /* 第四种 百分比 */
        line-height: 150%;

    }
</style>
<body>
    <div>亲爱的毕业生们，离校日期渐近，许多同学已经落实了毕业去向，并通过全国高校毕业生网上签约与毕业去向登记平台（以下简称“网签平台”）签订了三方协议、登记了毕业去向，但仍有部分落实去向的同学未在网签平台进行去向登记，还有一些同学正在求职过程中，等待最终的录取结果。无论你属于哪种情况，在离校后仍可继续使用网签平台签订三方协议、登记去向。下面小编就带着大家再重温一下网签平台的相关操作流程：</div>
    <span>学</span>
</body>