CSS笔记

最新推荐文章于 2020-11-18 00:43:35 发布

机智的九五二七

最新推荐文章于 2020-11-18 00:43:35 发布

阅读量143

点赞数

本文链接：https://blog.youkuaiyun.com/qq_34966446/article/details/105060177

版权

CSS（cascading style sheets）：层叠样式表

优势:

1)节约50%以上的文件尺寸

2)缩短改版时间，降低维护费用

3)强大的字体控制和排版能力。

4)刚开始非常容易编写

5)一次设计，随处发布

6)表现和结构、内容相分离

7)方便搜索引擎的搜索

8)更好的控制页面布局

三种插入样式方式：

内联样式：在标签内部使用style属性设置样式<p style="color:sienna;margin-left:20px">这是一个段落。</p>

内部样式表：在head标签中设置style标签，通过选择器，选择到相对应的元素设置样式<style>hr {color:sienna;}p {margin- left:20px;}</style>

外部样式表：通过link标签导入外部css资源<link rel="stylesheet" type="text/css" href="test.css">

注意：如果使用多重样式要遵循优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        css层叠样式表：控制页面布局
        样式表格式：
            样式名:样式值;
        多个样式表同时使用
        使用方式：
        1.内联样式：在标签内部使用style属性设置样式
        2.内部样式：在head标签中设置style标签，通过选择器，选择到相对应的元素设置样式
        3.外部样式：通过link标签导入外部css资源

    -->
    <link rel="stylesheet" href="../css/test.css">
    <style>
        div{
            background-color: #00d66c;
        }
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;border: 1px solid black;"></div>
</body>
</html>

选择器：根据规则选择页面中的元素
4个基本选择器
标签选择器：标签名{样式表}
id选择器：#id{样式表}
类选择器：.类名{样式表}
全部选择器：*{样式表}

组合选择器：选择器1,选择器2...{样式表}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        选择器：根据规则选择页面中的元素
        4个基本选择器
        标签选择器：标签名{样式表}
        id选择器：#id{样式表}
        类选择器：.类名{样式表}
        全部选择器：*{样式表}

        组合选择器：选择器1,选择器2...{样式表}
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: #2a8dcd;
        }
        #d1{
            background-color: red;
        }
        .divC{
            background-color: green;
        }
        *{
            background-color: #ecff08;
        }
        #d1,.divC{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="d1">div1</div>
    <div name="divN">div2</div>
    <div class="divC">div3</div>
</body>
</html>

常用样式：

宽高：

display block inline-block

width : 10px; height : 10px;

背景：

background-img : url(相对路径)

background-repeate : no-repeate;图片不重复

background-size : cover;平铺

background-color : red;背景颜色

字体：

font-size : 10px;

font-family : "宋体";