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 比行间样式要高(权重最高,一般不要使用)