前端基础-CSS样式

前端基础-CSS样式

1. CSS样式常用的三种引用方式：

#CSS样式分为3种:
#优先级：行内样式>内嵌样式>外部样式
1.行内样式：
<div style="width: 300px;height: 300px;background: green">
</div>

2.内嵌样式
head中间添加样式：
<style>
        div{
            width: 200px;
            height: 200px;
            background: green;
        }
</style>
3.外部样式
lesson.css样式文件：
div {
    width: 200px;
    height: 200px;
    background: green;
}
#引用方式：
<link rel="stylesheet" href="lesson.css">

扩展：修改页面页签的图标：
<link rel="shortcut icon" href="image/test1.ico">

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

2.选择器

#1.通配符选择器
* {
    margin: 0;
}

#2.标签（tagName）选择器
div {
   width: 100px;
   height: 100px;
   background: red;
}
#3.class选择器，一般给具有相同属性的元素设置同一个class
.box {
     background: blue;
}
#4.id选择器，id具有唯一性

#box{
     background: gray;
}
#5. +是相邻选择器，操作的对象是该元素后的同级元素，只会针对一个元素
 div + p+p {
    background: blue;
}
#6.群组选择器，对几个相同熟悉的选择器进行样式设置，div和p都生效
        div, p {
            width: 100px;
            height: 100px;
            background: red;
        }
#7. ~ 是兄弟选择器：div后所有同级p元素生效
        div ~ p {
            background: green;
        }
#8.>子代选择器 :div所有子元素p生效，变成蓝色
        div > p {
            background: blue;
        }
#9.后代选择器：可以指定某一层级子元素生效，div的下面所有li元素样式生效
        div li {
            width: 50px;
            height: 50px;
            background: red;
        }
#10.伪选择器
       #a标签：
        a:link { /*未被点击的链接*/
            color: red;
        }

        a:visited { /*已被点击的链接*/
            color: green;
        }

        a:hover { /*鼠标悬浮的颜色*/
            color: aqua;
        }

        a:active { /*鼠标按下的颜色*/
            color: black;
        }

       #div标签：
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        div:hover { /*改变元素本身*/
            /*
                default 默认箭头
                pointer 手指
                wait 显示正忙
                help 显示帮助
            */
            cursor: pointer;
            background: blue;
        }

        div:hover p { /*改变元素下面的p标签*/
            width: 100px;
            height: 20px;
            background: green;
        }


#11.通用选择器的优先级：
选择器优先级：
(*)<tagName<(.)class类选择器<（#）id选择器
级别相同的选择器，后面的样式会覆盖前面的
复杂后代选择器：
1.先比id 再比class 再比tagName
2.id选择器个数不相等，id越多，优先级越高
3.id选择器相同，则比class，在比tagName

# 快捷键：
ul>li*5   + TABL  快捷输出5个li标签