深入学习CSS

第三讲 CSS深入

本章内容

1.组合选择器(掌握)

2.属性:文本属性，背景，列表(记忆)

案例一

            x   y   阴影 颜色
text-shadow: 0px 0px 0px rgba();

 

属性名	说明
font-size	字体大小
font-weight	字体加粗
font-family	字型
font-style	字体类型，normal，italic
font	连写
text-shadow	字体阴影
text-align	文本水平对齐方式
letter-spacing	字间距
line-height	行高
color	字体颜色:color-name;16进制，rgb,rgba

案例二

 

第一步:编辑文本

<style>
            ul{
                list-style: none;
                padding: 0;
            }
            /* 交集选择器接子代选择 */
            ul#box>li{
                width: 80px;
                background-color: #FF0000;
            }
            ul#box>li>ul{
                display: none;
            }
            /* 交集选择器子代伪类选择器后代选择器 */
            ul#box>li:hover ul{
                display: block;
                background-color: green;
</style>
<ul id="box">
            <li>人事管理
                <ul>
                    <li>添加员工</li>
                    <li>管理员工</li>
                </ul>
            </li>
            <li>财务管理
                <ul>
                    <li>添加员工</li>
                    <li>管理员工</li>
                </ul>
            </li>
            <li>销售管理
                <ul>
                    <li>添加员工</li>
                    <li>管理员工</li>
                </ul>
            </li>
        </ul>

属性	说明
list-style:none;	列表样式不使用项目符号
list-style-image	设置列表项前边的图标
list-style-position	图标的位置，li的里边还是外边
list-style-type	系统提供列表项前边的图标
list-style	综合属性
padding	设置元素内边距
display:none	隐藏
display:block	显示块

选择器

组合选择器	说明
EF	交集选择器
E F	后代选择器
E>F	子代选择器
E,F	并集选择器
E+F	E的紧接元素
E~F	和E同级的后边F元素
伪类选择器	说明
:link	未访问时
:hover	悬浮
:active	访问时
:visited	访问过

案例三

---

 

属性	说明
background	综合属性
background-color	背景颜色
background-image	背景图
backgroun-repeat	背景重复方式
background-position	背景位置
background-size	背景大小

案例四

 

table{
                width: 300px;
                height: 300px;
                background-image: url(img/02.jpg);
            }
            td{
                background: url(img/01.jpg) no-repeat;
                background-position: 1000px 1000px;
            }
            #t1:hover{
                background-position: 0px 0px;