css基础知识表格

css基础知识

WEB的三要素：

（1）Server（服务器）

（2）Client（客户端）

（3）HTTP（传输通信）

网页的组成部分：

（1）html--结构层：不是一种编程语言，而是一种描述性的标记语言用于描述超文本内容的显示方式。

（2）css--样式层：层叠样式表，用来控制网页样式并允许将样式信息与网页内容分离的一种标记性的语言。CSS的引入就是为了使HTML更好的适应美工设计。它以html为基础，提供了丰富的格式化功能，并且网页设计者可以针对各种可视化的

（3）js--行为层：是一种基于对象的脚本语言，使用它可以开发internet客户端的应用程序。javaScript在HTML中以语言的方式出现，并且执行相应的操作。他的作用主要是和其他的脚本一起实现一个网页链接多个对象。

四个基本选择器：

（1）*：通配选择器——获取范围内的所有子元素

（2）标签名（如：div）：类型选择器——获取范围内的所有该种元素

（3）.class名：类名选择器——获取范围内的所有具有该类名的元素

（4）#id值：id选择器——获取范围内的具有该id值的元素

！importment>行间样式>id选择器>class选择器>类型选择器>通配选择器

表格

表格常用属性和专用样式

（1）表格背景色：bgcolor

（2）表格背景图：background

（3）单元间间隙：cellspacing

（4）表格内边距：cellpadding

（5）横向合并单元格（td属性）：colspan="2"

（6）纵向合并单元格（td属性）：rowspan="2"

（7）合并相邻单元格边框（table样式）：border-collapse:collapse;

练习：一个天气预报的例子

table{border-collapse:collapse;}
th,td{height:100px;
     text-align:center;
     border:1px red solid;
    }
#td1{color:red;}
#td2{color:blue}
.fonts{background-color:#dce2fa}

<table border="1" bordercolor="white"
     bgcolor="white" align="center" 
     width="800" cellspacing="0" cellpadding="0">
<thead class="fonts">
    	<tr>
        	<th colspan="2" >日期</th>
            <th colspan="2">天气现象</th>
            <th>气温</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
	</thead>
    <tbody>
		<tr>
        	<td rowspan="2">22日星期五</td>
            <td>白天</td>
            <td> <img src="sun.jpg" /></td>
            <td>晴转多云</td>
            <td id="td1">高温7<sup>。</sup>C</td>
            <td>无持续方向</td>
            <td>微风</td>
           
           
        </tr>
        <tr>
        	
            <td>黑夜</td>
            <td><img src="moon.jpg" /></td>
            <td>晴</td>
            <td id="td2">低温-4<sup>。</sup>C</td>
            <td>无持续方向</td>
            <td>微风</td>
           
           
        </tr>
    	
    </tbody>
</table>

css基础知识 表格

css基础知识

表格

猜你喜欢