笔记：CSS基础

印度阿三17 2019-09-23

展开全文

一、CSS(层叠式样式表)，决定页面怎么显示元素
　　1、引入方式：

行内样式，在当前标签元素中直接使用 style 的属性。
内嵌方式，在<head>中写样式；
外联式，<link>引入外部CSS文件；使用@import 在<haed></head> 之间引用。（需要XX.css）

　　2、优先级：行内模式>内嵌模式>外链式
二、CSS语法：
　　1、内嵌：
　　　　选择器{属性1：value1；属性2：value2；}
　　　　　　注释 /* */
　　　　选择器
　　　　第一种情况：标签名，影响其他同类型的标签；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
        color:red;
        text-align:center;
        }
    </style>
</head>
<body>
    <div>我是黑客</div>
</body>
</html>

　　　　第二种情况；id 选择器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hacker
        {
            color: green;
            text-align: center;
        }
    </style>

</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

　　　　第三种情况： class ，可以在不同的元素中去使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .test
        {
            color: red;
            text-align: center;
        }
    </style>

</head>
<body>
    <h1 class="test">这是一级标题</h1>
    <p class="test">这是段落</p>
</body>
</html>

　　2、外链

　　需要XX.css

　　　　例：mystyle.css

        #hacker{
            color: red;
            text-align: center;
        }

<link>：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

@import

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        @import url(css/mysql.css)
    </style>
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

三、常用样式：

后背景：backgroup-color backgroup=image
字体：color size text-align(对齐方式) text-indet(字体)
盒子模型：

　　　　Margin：外边框
　　　　Border：边框
　　　　Padding：内边框
　　　　Content：显示数据的地方（文本、图片等）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hacker{
            background-color: lightgrey;
            width: 300px;
            border: 20px solid red;
            padding: 10px;
            margin: 20px
        }
    </style>
</head>
<body>
    <div id="hacker">我是黑客</div>
</body>
</html>

效果图：