首页 > 代码库 > css基础

css基础

2024-10-17 18:06:01   212人阅读

1、css与html结合方式

1、style属性<div style="">
2、style标签<style type="text/css">div{}</style>
3、文件导入<style type="text/css">@import url(css.html)</style>
选择器：
1、标签选择器
<style type="text/css">div{}</style>
2、类选择器
<style type="text/css">div.class{}</style>
<style type="text/css">.class{}</style>
3、id属性选择器
<style type="text/css">#id值{}</style>

2、css简单布局

<html>
<head>
    <style type="text/css">
    body{
        margin:0px;
        }
        div{
            border:#09F solid 1px;
            height:100px;
            width:150px;
            }
            #div0{
                background-color:#2FC;
                width:500px;
                height:500px;
                }
            #div1{background-color:#F90;
                padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/
                margin:0px;/*外边距*/
                float:left;}
            #div2{background-color:#F50;
                padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/
                margin:0px;/*外边距*/
                float:left;}
            #div3{background-color:#3F0;
                padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/
                margin:0px;/*外边距*/
                float:left;}
    </style>
</head>
<body>
<div id="div0">
    <div id="div1">图片区域</div>
    <div id="div2">文字区域</div>
    <div id="div3">超链接区域</div>
</div>
</body>
</html>

 

css基础


联系
我们