web前端学习日记——DAY02（CSS样式表的使用）

今天学习的内容是css样式表的使用：

1.css基本语法类似于面向对象的思想，给出对应的选择器（类），然后设置响应的属性，再在body部分进行使用就可以呈现出想要的效果；

2.选择器分类：

按照操作的对象来看可以分为：

（1）HTML标签选择器

（2）类选择器

（3）id选择器

html 复制代码

<!--标签选择器-->
<style>
    p{
        font-size: 30px;
        color:red;
    }
    h3{
        color:blue;
    }   
</style>
<!--类选择器-->
<style>
    .class1{
        font-size:30px;
        color:yellow;
    }
    .class2{
        font: size 30px;
        color:aqua;
    }
</style>
<!--id选择器-->
<style>
    #id1{
        font:size 30px;
        color:pink;
    }
    #id2{
        font:size 40px;
        color:brown;
    }
</style>

按照关系型的对象可以分为：

（1）后代选择器

（2）交集选择器

（3）并集选择器

html 复制代码

<!--复合选择器-->
<!--后代选择器-->
<style>
    h3{
        color:red;
    }
    i{
        color:blue;
    }
    h3 i{
        color:yellow
    }
</style>
<!--交集选择器-->
<style>
    p.class1{
        color:chartreuse;
    }
</style>
<!--并集选择器-->
<style>
    p,h3{
        color:black;
    }
</style>

3.CSS引入方式：

行内样式表：将style的内容写在行内；

内部样式表：将style的内容写在head中；

外部样式表：将style的内容写在专门准备的css文件中，通过<link rel="stylesheet" href="web.css">；

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href ="css/mycss.css" type="text/css">
    <style>
        .inner{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <p style="font: size 30px;color:brown">测试行内样式</p>
    <p class="x">测试外部样式</p>
    <p class="inner">测试内部样式</p>
</body>
</html>

4.类选择器的优先级：

ID选择器>类选择器>HTML标签选择器

对于一些特殊情况，某些样式需要特殊的优先级。可以使用!important

行内引入优先级最大，外部和内部引入取决于谁写的靠后，靠后的优先级高；

5.字体样式属性：

font-size:用于设置字体大小；

font-style:用于设置字体风格；

font-weight:用于设置字体轻重；

font-family:设置字体类型；

font:可以按照风格 +轻重+大小+类型的顺序一次性进行设置；

6.文本样式属性：

color：设置文本的字体颜色；

text-align:设置文本水平对齐方式；

text-indent:设置文本头部的缩进；

line-height:设置文本行距；

text-decoration：设置文本装饰；

7.伪类：

当处于某一状态时，会显示特定的样子，离开这个特殊状态时又回到原来的样子

hover：鼠标悬停的状态

html 复制代码

<style>
a{
color:#454545;
text-decoration: none;
line-height: 30px;
}
a:hover{
color:rgb(199, 13, 13);
text-decoration: underline;
}
</style>

8.背景样式

background-color:设置背景颜色

background-image：设置背景图片

background-repeat：设置图片是否需要重复，以至于覆盖区域

background-position：设置背景定位

9.列表样式：

list-style:可以选择有没有序号或图案，也可以通过url来指定；