初学CSS_1

今天的内容:

CSS可以更灵活的修改HTML页面的样式

语法：属性:值; 不同属性的定义要用分号分开.

使用style属性修改, 示例：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <div style="border: 10px; color: brown;">This is brown</div>
</body>
</html>
复制代码

使用style标签修改:

通过id选择器( 各个标签的id不能相同)  示例:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
         #test{ /*在指定的id前加#号即可进行id定位*/
        border:10px;
        color:brown;
    }
    </style>
</head>
<body>
    <div id="test">This is brown</div>
</body>
</html>
复制代码

通过class选择器修改:(class可以相同)  示例:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
         .test{ /*在指定的class前加 . 号即可进行id定位*/
        border:10px;
        color:brown;
    }
    </style>
</head>
<body>
    <div class="test">This is brown</div> <!--此处要定义相应class属性的值-->
</body>
</html>
复制代码

通过link标签引入CSS文件:

CSS文件:

复制代码
/* 此处定义了一个名为test的class */
.test{
    color: rebeccapurple;
    text-align: center;
    border: 10px;
    border-style: solid;
}
复制代码

HTML文件:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!-- 此处要定义type属性为text/css href属性为css所在的地方-->
    <link rel="stylesheet" type="text/css" href="./hello.css">
</head>
<body>
    <div class="test">This is brown</div> <!--此处要定义相应class属性的值-->
</body>
</html>
复制代码

明天的打算:  写Java例题

问题:  无

posted @   假装有知识  阅读(121)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示