css基础——使用说明

2020-05-08 本文已影响0人 LeslieFind

一、css作用：

给页面元素定义样式，比如字体大小，颜色，背景色，背景图，元素位置等

二、使用方法：

1、在标签内使用属性style：

<div style="background-color: aqua;color: red;">88</div>
注：
1、定义样式使用：冒号
2、不同样式以；分号分隔

2、在html的head中使用style标签：

（因为在标签内写可能会有多个标签但是样式相同的情况，所以为了减少代码量，把整体集合在style标签内，具体使用后面说）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{            
            color: chartreuse;            
            background-color: antiquewhite;            
        }
    </style>
</head>
<body>
    <div class="c1">adfsf</div>
</body>
</html>

注意：

1、在head中使用style标签
2、根据不同选择器（后面说）
3、样式依旧使用：冒号定义，；分号分隔

3、使用css文件

（因为有可能会有多个html使用相同的样式，所以把他提取出来，供大家一起使用）
common.css文件内容：

div{
    background-color: aqua;
    color: bisque;
}

在html文件中引用时需在head中加入：
<link rel="stylesheet" href="common.css"/>

注意：

1、这里不需要style标签
2、使用的是style标签内的，直接写样式就行
3、html文件使用时，必须要有link标签，rel属性值为stylesheet，href属性值为css文件

三、优先级：

当相同的元素既有标签内style属性的样式，又有head中style标签的样式，还有css文件的样式，且他们都不相同，则优先级为：

就近原则，越靠近元素的优先级越大
标签内style属性 > head中style标签 > css文件*