【HTML】CSS简介及使用说明

CSS简介

CSS 是一种描述 HTML 文档样式的语言。层叠样式表的简称，也是一种标记语言
CSS 描述应该如何显示 HTML 元素。网页的美容师，字体、颜色、版面布局。Html主要做结构，显示元素内容。

css语法规范
选择器，一条或多条声明
h1{
color:red;
font-size: 25px;
}
1.基础选择器-标签选择器
2.类选择器+多类名
3.id选择器以#号定义，只能调用一次
语法：

id名{

属性1：属性值;
}

4.通配符选择器 *

[tabs]
[tab name=”代码案例” active=”true”]

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css语法规范</title>
    <style>
    /*修改p标签内文字及颜色*/
        p{
            color: red;
            font-size: 12px;
        }
        div {
            color: green;
        }
        .blue {
            color: blue;
        }
        .font35 {
            font-size: 35px;
        }
        #chocolate  {
            color: chocolate ;
        }
    </style>
</head>
<body>
    <!-- 基础选择器-标签选择器 -->
    <p>梦溪分享</p>
    <div>梦溪分享</div>
    <!-- 类选择器+多类名 -->
    <ul>
        <li class="blue font35">人生自古谁无死</li>
        <li class="blue">留取丹心照汗青</li>
        <li>我自横刀向天笑</li>
        <li>去留肝胆两昆仑</li>
    </ul>
    <div class="blue">我也是蓝色</div>
    <!-- id选择器  以#号定义 -->
    <div id="chocolate">何妨吟啸且徐行</div>

</body>
</html>

梦溪分享|效果图

[/tab]
[tab name=”css案例-画盒子”]

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css画盒子</title>
    <style>
        .red {
            width:100px;
            height: 100px;
            background-color: red;
        }
        .blue {
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>


</body>
</html>

梦溪分享|画盒子