【css的简单引入】——适合新人小白

css是什么???

css=层叠样式表 它是用来装饰body中的内容(博主认为 css可以比喻成“装修”)

一、引入方式

1 外部样式表 <link rel="stylesheet " href="css/style.css" />
2内部样式表 <style>...</style>
3行间样式 标签的style 属性<body style="background-color: #2AC845;">
4导入样式 @import url(01.css)

二、语法规则

中文版

选择器{
属性: 属性值;
属性2: 属性值2;
}
找到页面上的元素{
改变什么属性:改变成什么值;
}

对应代码
    div{
     color:red;  
    }
    .yellow{
     color: yellow;
    }

三、选择器

①元素选择器
命名规范
1 不能用中文或数字
2 以英文开头,不能以数字开头
3 要做到见名知意
4不能有空格
5驼峰命名法 如果是组合词 从第二个单词首字母大写

② ID选择器
页面只能出现一次
③类选择器
分类,同一个元素可以有多个,可以重复使用

接下来是一个具体实例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
    div{
     color:red;  
    }
    .yellow{
     color: yellow;
    }
    #bule{
     color: blue;
    }
  </style>
 </head>
 <body>
  <div class="yellow" id="bule">我是第一个div</div>
  <div>我是第二个div</div>
  </body>
</html>

运行结果如下图

在这里插入图片描述

重点来了

如果我做了一点点的改动,例如这样

<div class="yellow">我是第一个div</div>
在这里插入图片描述

再改动一点呢?
<div>我是第一个div</div>

在这里插入图片描述

优先级

根据这个例子,我们很容易发现他们的优先级

id> 类 >元素(权重: 100 10 1)

行间样式大于id
!important 比行间样式要高(权重最高,一般不要使用)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章