【笔记-JAVE_WEB】 CSS

行内样式

直接在标记对加属性

红色宋体30px居中显示

内嵌式

style标记对中定义

定义ｐ标记对内容颜色为红色

<style>

p{color:Red;}

</style>

链接式

一般写在head中

css文件

h1,h2

{

color:Blue;

font-size:small;

}

color:Red;

}

选择器
1. class选择器

class在同一页面可以重复使用

.a{color:Red;}

.b{color:Blue;}

两个ｐ使用不同样式

xxxx

yyyy

1. id选择器

id在同一页面不能重复使用

#first{color:Red;}

#second{color:Blue}

iｄ不能使用数字

xxxx

yyyy

1. 多级选择

对于id为div1的区域中，选择p标签进行设置

#div1 p{
color: aqua;
}

对于div标签，选择id为content_1进行设置

div#content_1{
color: aqua;
}

布局
1. Div布局

<body>
 <div id = "content">
 <div id = "content_head">标题</div>
 <div id = "content_1">板块1</div>
 <div id = "content_2">板块2</div>
 <div id = "content_bottom">底部</div>
 </div>
</body>

Float让content_1和content_2从左开开始效果，最后clear属性取消浮动

Css中可以不声明div标签

body{
    margin: 0px;
}
div#content{
    width: 100%;
    height: 800px;
    background-color: grey;
}
div#content_head
{
    width: 100%;
    height: 10%;
    background-color: antiquewhite;
}
div#content_1
{
    width: 30%;
    height: 80%;
    background-color: blueviolet;
    float: left;
}
div#content_2
{
    width: 70%;
    height: 80%;
    background-color: aqua;
    float: left;
}
div#content_bottom {
    width: 100%;
    height: 10%;
    background-color: red;
    clear: both;
}

1. Table布局

<body marginheight="0px" marginwidth="0px">
<table width="100%" height="900px" style="background-color: gray">
 <tr>
 <td colspan="2" width="100%" height="10%" bgcolor="antiquewhite">标题</td>
 </tr>
 <tr>
 <td width="30%" height="80%" bgcolor= "blueviolet">板块1</td>
 <td width="70%" height="80%" bgcolor="aqua">板块2</td>
 </tr>
 <tr>
 <td colspan="2" width="100%" height="10%" bgcolor="red">底部</td>
 </tr>
</table>
</body>

【笔记-JAVE_WEB】 CSS

猜你喜欢