背景属性
1 <style>
2 div{
3 width: 400px;
4 height: 400px;
5 padding:100px;
6 border:50px solid rgba(0,0,0,0.5);
7 background: url(../images/1.jpg);
8 /* 1、背景原点 */
9 /* background-origin: padding-box; 默认值 背景图从padding区域为原点向四周平铺 */
10 /* background-origin: border-box; 背景图从border区域为原点向四周平铺 */
11 /* background-origin: content-box; 背景图从padding区域为原点向四周平铺 */
12
13 /* 2、背景裁切 背景图平铺到哪个区域 默认是border区域 */
14 /* background-clip: border-box; 默认值 */
15 /* background-clip: padding-box; 背景图显示到padding区域 */
16 /* background-clip: content-box; 背景图只显示到content内容区域 */
17 }
18 </style>
19 </head>
20 <body>
21 <div></div>
22 </body>
背景图大小
<style>
div{
width: 1400px;
height: 500px;
background:red url(../images/1.jpg) no-repeat;
/* 设置背景图大小 */
/* background-size: 水平大小 垂直大小; */
/* background-size: 100% 100%; */
/* background-size: cover; 等比例延展到宽高较大的一方 缺点：一部分背景图看不见*/
/* background-size: contain; 等比例延展到宽高较小的一方 缺点 会露出背景色 */
}
</style>
</head>
<body>
<div></div>
</body>
不是特别好用的结构伪类
1 <style>
2 li:nth-child(1){ /* 选择第几个 */
3 background: red;
4 }
5 /* 第一个还可以这样子表示 */
6 li:first-child{
7 background: yellow;
8 }
9 /* 最后一个可以这样子表示 */
10 li:last-child{
11 background: pink;
12 }
13
14 /* 我们还可以选择倒数第几个 */
15 li:nth-last-child(2){
16 background: blue;
17 }
18
19 li:nth-child(4){
20 background: red;
21 }
22 li:nth-child(6){
23 background: red;
24 }
25
26
27 /* 我们可以选中偶数行 2n*/
28 ol li:nth-child(2n){
29 background: tomato;
30 }
31 /* 偶数可以用even表示 */
32 ol li:nth-child(even){
33 background: tomato;
34 }
35
36 /* 奇数可以使用odd表示 */
37 /* 我们可以选中奇数行 2n+1 */
38 ol li:nth-child(2n+1){
39 background: violet;
40 }
41
42 ol li:nth-child(odd){
43 background: violet;
44 }
45
46 /* 我们还可以表示其他的数学表达式 */
47 li:nth-child(4n){
48 color:#FFF;
49 font-size: 40px;
50 }
51 </style>
52 </head>
53 <body>
54 <ul>
55 <li>炒米粉</li>
56 <li>粥店</li>
57 <li>冒菜</li>
58 <li>麻辣烫</li>
59 <li>煲仔饭</li>
60 <li>拌面</li>
61 <li>火锅</li>
62 <li>虾滑</li>
63 <li>骨头汤</li>
64 <li>烤肉</li>
65 </ul>
66
67 <ol>
68 <li>炒米粉</li>
69 <li>粥店</li>
70 <li>冒菜</li>
71 <li>麻辣烫</li>
72 <li>煲仔饭</li>
73 <li>拌面</li>
74 <li>火锅</li>
75 <li>虾滑</li>
76 <li>骨头汤</li>
77 <li>烤肉</li>
78 </ol>
79 </body>
层级选择器
1 <style>
2 #header{
3 width: 100%;
4 height: 80px;
5 background-color: pink
6 }
7 .right{
8 float: right;
9 }
10
11 #header img{ /* 后代选择器 儿子 孙子 曾孙都选中 */
12 width: 60px;
13 height: 40px;
14 }
15
16 /* 1、层级选择器 ---子选择器 E>F 选中的是E里面的儿子F */
17 #header>img{
18 margin-top: 20px;
19 }
20 /* 2、层级选择器 ----毗邻选择器 / 加号选择器 E+F 选的是E下面第一个同级元素 且该元素为F */
21 input+span{
22 color:red;
23 }
24
25 /* 3、层级选择器 E~F 选中E下面的所有兄弟元素F*/
26 section~p{
27 background: cyan;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="header">
33
34 <img src="../images/1.jpg" alt="">
35
36
37 <div class="right">
38 <img src="../images/2.jpg" alt="">
39 </div>
40 </div>
41
42
43 <input type="text">
44 <span>我是input下面第一个同级元素</span>
45
46
47 <p>我是上方的</p>
48 <section>我是section</section>
49 <p>我是下方第一个</p>
50 <p>我是下方的</p>
51 <p>我是下方的</p>
52 <p>我是下方的</p>
53 <p>我是下方的</p>
54 <p>我是下方的</p>
55 <p>我是下方的</p>
56 <p>我是下方的</p>
57 <p>我是下方的</p>
58 <p>我是下方的</p>
59 <p>我是下方的</p>
60 <p>我是下方的</p>
61 <p>我是下方的</p>
62 <p>我是下方的</p>
63 </body>
超级好用的结构伪类选择器
1 <style>
2 p:nth-of-type(3){
3 /* 先把所有p拎出来 再去找第三个 */
4 background: yellow;
5 }
6
7 p:first-of-type{ /* 选中第一个 */
8 background: cyan;
9 }
10
11 /* 选中最后一个 */
12 p:last-of-type{
13 background: yellowgreen;
14 }
15
16 /* 选择偶数行 */
17 p:nth-of-type(even){
18 background: pink;
19 }
20
21 /* 选择奇数行 */
22 p:nth-of-type(odd){
23 background: gold;
24 }
25
26 /* 还可以选择倒数第几个 2 5 8 */
27 p:nth-last-of-type(3n+2){
28 background: #0f0;
29 }
30
31 p:nth-last-of-type(3){
32 background: #000;
33 }
34
35 /* 唯一一个 */
36 span:only-of-type{
37 background: yellow;
38 }
39
40 div:empty{
41 background: #000;
42 width: 100px;
43 height: 100px;
44 }
45 </style>
46 </head>
47 <body>
48 <p>周六放假</p>
49 <p>周六放假</p>
50 <section>我们之前放了好多的假啦</section>
51 <p>周六放假</p>
52 <p>周六放假</p>
53 <p>周六放假</p>
54 <section>接下来我们还会放很多很多的假</section>
55 <p>周六放假</p>
56 <p>周六放假</p>
57 <p>周六放假</p>
58 <p>周六放假</p>
59 <p>周六放假</p>
60 <p>周六放假</p>
61 <p>周六放假</p>
62 <div>
63 <span>我是唯一一个存在的span</span>
64 <span>不是唯一了吧</span>
65 </div>
66
67 <div></div>
动态伪类选择器
1 <style>
2 a:link{
3 /* 超链接初始状态 */
4 color:pink;
5 }
6 a:visited{
7 /* 超链接被访问过后的状态 点击过后 */
8 color:#0f0;
9 }
10 a:hover{
11 /* 鼠标滑过 */
12 color:red;
13 }
14 a:active{
15 /* 超链接激活时的状态 */
16 color:#03ccbb;
17 }
18
19 /* 聚焦状态 多用于input */
20 input:focus{
21 background: red;
22 }
23 </style>
24 </head>
25 <body>
26 <a href="javascript:;">空链接</a>
27 <a href="#">锚链接</a>
28
29 <input type="text">
30 </body>
多张背景图引入
1 <style>
2 div{
3 height: 600px;
4 /* 注意！！！多张背景图 逗号隔开 要单独设背景颜色 */
5 background:url(../images/1.jpg) no-repeat left center,url(../images/2.jpg) no-repeat right bottom ;
6
7 /* 在下面单独设置背景色 */
8 background-color: pink;
9 }
10
11 section{
12 background: hsl(0,38%,29%);
13 height: 300px;
14
15 }
16 </style>
17 </head>
18 <body>
19 <!-- <div></div> -->
20
21 <section>加油</section>
22 </body>
文本换行
1 <style>
2 div{
3 width: 300px;
4 background: pink;
5
6 /* 温和型文本换行 溢出部分会折行 */
7 word-wrap: break-word;
8 }
9
10 section{
11 width: 300px;
12 background: cyan;
13 /* 很强硬的换行 不能有剩余的空格占位 必须紧密排列 */
14 word-break: break-all;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 juhjksahdkjshfjshfkjdkjf hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh jhgjghjg hjgjgjghg hjhjhhghjg hjghhghhjhjhhhhhj hjhjhjhjhjhjhj
21 </div>
22 <section> juhjksahdkjshfjshfkjdkjf hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh jhgjghjg hjgjgjghg hjhjhhghjg hjghhghhjhjhhhhhj hjhjhjhjhjhjhj </section>
23 </body>
文字阴影
1 <style>
2 h1{
3 color:red;
4 /* 文字阴影 */
5 /* text-shadow: 阴影水平距离 阴影垂直距离 阴影大小 颜色; */
6 text-shadow: -1px 1px 3px #000;
7 }
8 /* 阴影是可以写多个的 盒子阴影和文字阴影一样 都可以写多个 逗号隔开即可 */
9 h2{
10 color:red;
11 text-shadow: 0px 0px 1px green,1px 1px 1px purple,-1px -1px 1px yellow;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>男儿当自强</h1>
17 <h2>巾帼不让须眉</h2>
18 </body>
ui状态伪类
<style>
input:enabled{ /* 用于form表单 */
/* 除去disabled的框 其余的都叫可使用框 */
width: 100px;
height: 100px;
background: red;
}
input:disabled{/* 用于form表单 */
/* 选中禁用框 */
width: 200px;
height: 200px;
}
input:checked{/* 用于form表单 */
/* 被选中的框(用于单选按钮和多选按钮) */
width: 400px;
height: 400px;
}
p::selection{ /* 随意使用 */
background: green;
}
</style>
</head>
<body>
<input type="text" readonly> <!-- 只读 -->
<input type="text">
<input type="checkbox" name="star">西瓜
<input type="checkbox" name="star">哈密瓜
<input type="checkbox" name="star" disabled>木瓜
<input type="checkbox" name="star">香瓜
<p>高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以高亮 不是给input使用的 给谁都可以</p>
</body>