H5学习笔记12 背景属性 背景图大小 结构性伪类选择器 层级选择器 动态伪类选择器 多张背景图引入 文本换行 文字阴影 ui状态伪类

背景属性

 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>

 

posted @ 2021-05-06 20:12  一水州  阅读(179)  评论(0)    收藏  举报