今天学习了如下内容
表格属性 CSS可以使HTML表格更美观
表格边框
在中添加下列代码
table,td
{
border: 1px solid red;
}
折叠边框
在中添加下列代码
table
{
border-collapse: collapse;
}
表格宽度和高度
table
{
border-collapse: collapse;
width:500px;
height:300px;
}
表格文字水平对齐（默认左中对齐）
td
{
text-align: center(可换);
}
表格文字垂直对齐
td
{
vertical-align: center(可换);}
表格填充
td
{
vertical-align: center(可换);
padding: 200px;
}
表格颜色（边框|背景）
td
{
vertical-align: center(可换);
padding: 200px;
background-color: #555555;(背景)
color:#ffffff;(文本)
}
关系选择器
后代选择器：选择所有被E元素包含的F元素，中间用空格隔开
假设在中有如下代码
<body>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<ol>
<li>列表4</li>
<li>列表5</li>
</ol>
</div>
</body>
在<head></head>中添加如下代码
给<li>标签添加样式 ul相当于E li相当于F
ul li
{
color :red;
}
列表1—5均变为红色
子代选择器：选择所有作为E元素的直接子元素F，对深层元素不起作用，用>表示
假设在<body></body>中有如下代码
<body>
<div>
<p>文本1</p>
<ul>
<li>
<p>文本2</p>
</li>
</ul>
</div>
</body>
在<head></head>中添加如下代码
div>p
{
color :red;
}
只有文本1会变红
相邻兄弟选择器：选择出紧跟E元素后的（向下选择）F元素，用+表示，选择相邻的第一个兄弟元素。
假设在<body></body>中有如下代码
<body>
<h3>文本1</h3>
<p>文本2</p>
<p>文本3</p>
</body>
在<head></head>中添加如下代码
h3+p
{
color :red;
}
只有文本2会变红
通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
假设在<body></body>中有如下代码
<body>
<h3>文本1</h3>
<p>文本2</p>
<p>文本3</p>
<div>问本4</div>
<p>文本5</p>
</body>
在<head></head>中添加如下代码
h3~p
{
color :red;
}
文本235均为红色
明天将继续进行CSS的学习
浙公网安备 33010602011771号