CSS学习:基础+进阶（一）标签 input、textarea，默认在鼠标点击的时候是有边框亮色的效果的。如果统一去除

预备知识

浏览器组成：shell(类似于外壳) + 内核

全球最大浏览器厂商(拥有自己的内核的)所对应的浏览器：

浏览器	内核名称

chrome	webkit/blink
safari	webkit
ie	trident
firefox	gecko
opera	presto

内核: 渲染rendering引擎/js引擎

css

CSS: cascading(层叠) stlye shee —>层叠样式表

基本样式

样式的基本语法

选择器 {
 属性名: 属性值;
}

三种样式

内联样式(行间样式): 在body中- >


//或
<body>
  <div style="width: 100px; height: 20px"></div>

</body>

1. 内部样式表 -》放在header中

<head>
     <style type="text/css">
         div {
             width: 100px;
             height: 100px;
         }
     </style>
</head>

1. 外部样式表：外部的.css 文件,在header中引入

 <head>
     <link rel="stylesheet" type="text/css" ref="css/index.css" />
</head>

三种样式优先级(权重)：内联样式 > 内部样式表 > 外部样式表。如果要强行改变优先级，使用 !important关键字,但是如何你的样式需要用到!important关键字，那就要思考你的样式书写是否合理了

选择器

id 选择器

<style>
   #box {
   width: 100px;
   height
   backgroud-clolor: black;
   }
</style>

<div id="box">123</div>

类选择器

一般用于同一类的标签统一一种样式

<style>
   .box {
   width: 100px;
   backgroud-clolor: black;
   }
</style>

<div class="box"></div>

标签选择器

一般用于标签的初始设置

<style>
   div {
   width: 100px;
   backgroud-clolor: black;
   }
</style>

<div class="box"></div>

* 通配符选择器

配置在这个页面的所有的标签的样式，一般很少用

<style>
  * {
   margin: 0;
  }
</style>

属性选择器

针对某种属性进行选择

<style>
   [id="box"] { //带有id属性值为box的，设置这个样式
   width: 100px;
   height
   backgroud-clolor: black;
   }

   [id] { //带有id属性的都设置这个样式
   width: 100px;
   height
   backgroud-clolor: black;
   }
</style>

<div id="box">123</div>

一般用于input表单的区别：eg

<style>
   [type="text"] { 
   width: 100px;
   
   }

   [type="password"] {
   width: 30px;
   }
</style>

<input type="text" />
<input type="password" />

分组选择器

标签 input、textarea，默认在鼠标点击的时候是有边框亮色的效果的。如果统一去除呢？分组选择器。 eg

<style>
         /* 分组选择器 注意一版上下写，用逗号分开，不要写在同一行 */
         input,
         textarea {
             outline: none;
         }
</style>


<input type="text" />
<!-- //分割线 -->
<br />
<textarea name="" id="" cols="30" rows="10"></textarea>

CSS权重值

class、id、属性、标签这几种选择器优先级：id > class | 属性 > 标签
选择器优先级： !important > id > class | 属性 > 标签 > *(通配符)

选择器	权重值
*	0
标签，伪类	1
class、属性、伪类	10
id	100
内联样式	1000
!important	正无穷

注意以上权重值是256(256 + 1进一位)进制的

数学中：正无穷 = 正无穷 + 1；计算机中：正无穷 < 正无穷 + 1

样式类的封装

在开发中，经常会去封装一些样式，那如何去定义？使用基类+子类+并集选择器。eg:

文本提示样式类

success 成功 green
warning 警告 orange
error 失败 red

<style>
        /* 有一个基本的类，做一些基础配置 */
        .tip {
            width: 300px;
            font-weight: blod; //粗体
        }
        /* 使用并集选择器 */
         .tip.tip-success {
             background-color: green;
         }

         .tip.tip-warn {
            background-color: orange;
         }

         .tip.tip-error {
            background-color: red;
         }
 </style>

//使用
<p class="tip tip-success">成功</p>
<p class="tip tip-warn">警告</p>
<p class="tip tip-error">失败</p>

截屏2021-03-28 15.05.35.png

浏览器对父子选择器的匹配规则

思考下面例子: 浏览器是如何找到匹配的span？是从左到右，还是从右到左？

<style>
    div h1 span {
        color: red;
    }    
</style>

<div>
    <h1>
        <span>红色</span>
    </h1>
</div>

答案：从右到左去进行匹配的(dom即从下到上匹配)。原因：如果从从左到右，那就先找到div，然后遍历找到h1，再遍历找到span，这其中的计算将是巨大的，严重影响性能.

CSS学习:基础+进阶 （一）