学习内容
1. 命名规范
命名规范.png
名称要语义化，不要乱取名字
2. 背景
① 背景重复：background-repeat:no-repeat|repeat-x|repeat-y
② 背景位置：
background-position-x:横坐标方向的位置
background-position-y:纵坐标方向的位置
③ 背景简写： background-position: x y;
-
2.1 背景的简写
背景简写： background:color image repeat position
01.PNG
-
2.2 背景吸附
<style>
.banner{
height:468px;
background:#ff2d51 url("images/banner.jpg") no-repeat center top;
/*
background-attachment:scroll|fixed;
*/
background-attachment:fixed;
}
.content{
height:800px;
background: #44cef6;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="content"></div>
</body>
-
2.3 背景大小
背景大小：
background-size:x y;
x -->width
y -->height
cover -->会覆盖整个div 特点:只能以大覆小
<style>
div{
width:600px;
height:200px;
background:#ff2d51 url("images/banner.jpg") no-repeat center center;
background-size:100% 100%;
}
</style>
</head>
<body>
<div>
</div>
3.文本
-
1.文本颜色
颜色：1.red -->纯色 2.#ff2d513. rgb()
-
2.文本对齐 ： text-align:left|center|right
-
3.文本修饰 ：text-decoration:none|underline|overline|line-through
-
4.文本缩进：text-indent
-
5.文本转换：text-transfomr:uppercase|lowercase|capitalize
-
！快速写出一段废话：lorem+tab
4.字体
⑴最小的字体-->不要小于12px
⑵字体大小：font-size
⑶字体样式：font-style:normal|italic
⑷字体的权重：font-weight:bold|bolder|lighter100-900
5.链接
⑴link -->没有访问的链接
⑵visited -->已经访问过的链接
⑶hover -->鼠标移入到链接上的状态
⑷active -->鼠标点击的那一刻
⑸tip：同时使用链接的这几种状态,顺序不打乱
6.列表
列表样式： list-style:none;
列表样式类型：list-style-type:disc|circle|square
列表样式图片： list-style-image
02.PNG
<style>
table,th,td{
width:500px;
border:1px solid #333;
}
table{
/* 关键样式 */
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
</style>
-
跨越行的表格
要点：谁要跨越行给谁rowspan ="" -
跨越列的表格
要点：谁要跨越列给谁colspan =""
7.opacity
03.PNG
8.样式继承
-
Tips:仅仅发生在块级元素之间子元素不设置宽度,它会继承父元素的宽度---(块)
-
height 的继承
特殊：父元素不设置height,它会获取子元素的height---子级对父级的继承关系
文本和字体相关属性都是可以继承的
-
样式：字体：font-family 字体大小：font-size 颜色：color 等等
网友评论