CSS样式引入策略与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/js_qh/article/details/132251910

css样式

css引入

引入方式

分类

行内样式内联样式外联样式

行内样式

将样式直接写在标签，需要使用style属性

<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>

优点:可以针对具体标签设置

缺点: 代码臃肿,不利于后期维护

内联样式

讲页面内容与表现形式进行分离，方便对样式进行统一管理

例如: div{ 设置属性 }

外联样式

对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可

例如: <link rel="stylesheet" type="text/css" href="css/01.css" />

或者 <style> @import url("css/01.css"); </style>

样式的优先级

就近原则

样式选择

三种样式引入方式，在实际开发过程中该如何选择

1.如果是通用样式，就选择外联样式

2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理

3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式

4.除了上面的几种情况，通常使用的都是内联样式

选择器

分类

基本选择器,属性选择器,层级选择器,组合选择器,伪类选择器

基本选择器

包含: 标签选择器,类选择器,id选择器

标签选择器

语法：标签名{}

例如: div{color:red;font-size:20px;}

类选择器

语法：.类名{}

例如：.div-cls{color:red;}

id选择器

语法：#id名{}

例如：#div-id{color:red;}

属性选择器

/*具有title属性的元素*/
[title]{
  font-size: 18px;
}
/* 以...开始 */
[href^="http"]{
  color: #008B8B;
}
/* 以...结束 */
[href$="cn"]{
  color: #483D8B;
}
/*href中包含有i*/
[href*='i']{
  color: #808080;
}

<button title="普通按钮">普通按钮</button>
<a href="http://www.baidu.com">百度链接</a>
<a href="www.sina.cn">新浪博客</a>
<a href="http://www.yunhe.cn">云和数据</a>

层级选择器

    <style>
        
        /* 层级选择器 */
        
        /* 祖宗后代 */
        div span{
            color: #008000;
        }
        /* 父子选择器 */
        div > span{
            color: red;
        }
        /* 兄弟选择器 */
        div ~ p{
            background-color: #FFC0CB;
        }
        /* 跟班选择器 */
        p + span {
            background-color: #008000;
        }
    </style>
</head>
<body>
    
    <!-- 在包裹关系中，样式有继承关系 -->
    <div>
        div中的不带标签的内容
        <p>
            <a href="">百度一下
                <span>你就知道  </span>
             </a>
        </p>
        <a href="">一燕一下</a>
        <span>后代选择器，注意很常用</span>
    </div>
    <!-- 所有的选择器默认是从body标签中进行查找元素的 -->
    <p>
        <span>p标签中的span标签</span>
    </p>
    
</body>

组合选择器

div span,p span{  逗号前后是平级的,也就是二者没什么关联
    color: #00BFFF;
}

<div> div中的不带标签的内容 <span>组合选择器，注意很常用</span> </div>

<p> <span>p标签中的span标签</span> </p>

<span>h4标签中的span标签</span>

伪类选择器

例如

span:nth-of-type(2n+1){
    color: #483D8B;
    font-size: 18px;
}
span:nth-of-type(2){
    color: #FF0000;
}


/* 访问之后的状态 */
a:visited{
  color: darkgoldenrod;
}

/* 鼠标悬浮时的状态 */
a:hover{
  color: aqua;
}

/* 处在活动状态 */
a:active{
  color: brown;
}

通配符

作用于所有的标签

*{
  color:red;
  font-size:20px;
}

选择器优先级

/* 
!important>行内样式>id选择器>类选择器>标签选择器
            1000    100     10      1
*/
/*1+100=101*/
div #span-id{
  color: darkcyan;
}
/*100*/
#span-id{
  color: blue;
}
/*10+10=20*/
.div-cls .span-cls{
  color: black;
}
/*10+1=11*/
.div-cls span{
  color: red;
}
/*1+10=11 如果权重值相同，从上往下执行，后面会覆盖上面样式*/
div .span-cls{
  color: #B8860B;
}
/*10*/
.span-cls{
  color: blueviolet;
}
/*1+1=2*/
div span{
  color: #A52A2A;
}
/*1*/
span{
  color: #7B68EE!important;
}