CSS样式

2018-01-24 本文已影响0人陶宁

样式表
样式表写在head里面 body前面

<style type = "text/css">
body{
background: yellow
}
</style>

给table赋予属性

table{
height:200px;width:300px;background: black;
}

border 表格边线属性
solid 实线

属性就近原则：
元素的属性以就近的属性为显示
属性会被离元素更近的属性所覆盖

<head>
<style type = "text/css">
body{
background: yellow
}
</head>
<body style="background-color: red">
</body>

标签选择器在bead里面选择body内所有td 赋予属性
适用于全局

td {
    style ="height: 20%;
    width: 100%;
    background: blue;"
}

id选择器
适用于页面上的某一个元素属性设置

#yellow {
    style ="background-color: yellow;
    width: 100%;
    height: 20px;"
}

类选择器
适用于全局有很多重复的元素但是要指定某些元素的属性

.divv{
    style ="background-color: blue;
    width: 100%;
    height: 20px;
}

<div class="divv"></div>
<div id=black></div>

复合定位 #id1 div指的是 id1内部的div

id1 {

background-color: bule;
width: 100%;
height: 200px

}

background-color: yellow;
width: 100%;
height: 50px

}

页面的断点调试最好以google浏览器调试
页面按F12 拖动调试按钮
可以在调试页面上取消显示元素

可以在样式上通过动态调整数据观察结果

外部引用样式表