css层叠样式表 (Cascading Style Sheets)初识

admin · 发表于 2021-9-27 13:52:47

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
<style type="text/css">h2{
color:blue;
}
h1{
color: red;
}</style>
</head>
<body>
<div class="container">
<div class="box1">
<h1 style="color:blue">first</h1>
<h2>second1</h2>
<h3>dsfgd</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Expedita exercitationem tenetur nisi porro omnis obcaecati non, sint voluptatum
deserunt quae dolor, possimus molestiae vitae mollitia, illum numquam illo ratione. Labore?</p>
<h4>hahahahah哈 12 33</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti,
reprehenderit? Hic rem cupiditate, enim aperiam aliquam aliquid exercitationem
tenetur accusamus ab at ipsum aspernatur odit consectetur minima vero.
Ut eligendi corporis ducimus non! Quasi error dolores rerum, a voluptates
qui magni aliquam explicabo excepturi iusto cumque consequatur libero reprehenderit at?</p>
<div class="list">
<ul>
<li>lis1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="list2">
<ul>11</ul>
<ul>22</ul>
<ul><a
href="http://182.92.219.49" target="_blank">my homepage</a></ul>
</div>
<div class="box2">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum,
nobis consequatur. Excepturi ea sit, libero officiis odit facere et! Asperiores explicabo
aperiam repudiandae perferendis possimus officiis molestiae quasi molestias necessitatibus?</p>
<button>Button</button>
</div>
<div class="block">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, repudiandae.</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, eos obcaecati,
quae culpa cum reiciendis optio rerum nulla expedita repudiandae corrupti qui architecto
praesentium incidunt! Illum optio impedit eaque modi?</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit maxime amet id mollitia aspernatur, earum quas! Voluptatibus, nisi culpa? Porro?</p>
</div>
<div class="clearfix"></div>
<div id="qqq">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam exercitationem aliquid,
molestiae architecto, veritatis distinctio laboriosam reprehenderit consectetur nobis, nam voluptatem provident?
Est fugit blanditiis deleniti fuga culpa ipsa itaque nulla unde distinctio beatae quae mollitia minus
nobis voluptas, ratione vero inventore dolorem ad qui sed exercitationem? Eveniet, fuga ab!</p>
</div>
<div id="qwe">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos, veniam.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="list2">
<ul>
<li>listl</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>l1</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</div>
<div class="position-box">
<h1>gfhfgfhgfhf</h1>
<h2>dfnnjjb</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium nulla debitis minus cumque dicta?
Illo, voluptates aperiam aliquam autem esse tenetur ipsa temporibus, facilis eligendi neque dolorem
amet soluta suscipit vel id odio voluptatum unde omnis ipsum beatae vero quod eveniet laudantium minus!
Autem sapiente, officia labore eligendi deserunt doloremque tenetur iusto vitae libero aperiam. Libero
necessitatibus exercitationem sit vero, saepe labore omnis odio quaerat aliquam, iste veritatis repellat
placeat consequuntur quisquam molestiae harum culpa sequi autem ad! Vitae eius vel maiores, dolore ad
perferendis quas facilis id quaerat quod magnam molestiae magni omnis repellendus nostrum. Itaque inventore facere architecto.</p>
</div>
<button id="fixe">ssyy12</button>
<div style="margin-top:1000px"></div>
</body>
</html>

复制代码

admin · 发表于 2021-9-27 13:53:52

body{
background-color:#f4f4f4;
color: #555555;
}
button{
background-color: darkorange;/*原本颜色，会对所有button生效*/
color: rgb(219, 219, 22);
padding: 15px 50px;
}
button:hover{
background-color: deepskyblue;/*改变鼠标放上去的颜色*/
}
button:active{
background-color: dimgray;/*点击颜色*/
}
a{/*改变所有链接格式*/
background-color: fuchsia;
text-decoration: none;/*可以借此来链接的消除下划线*/
color: gold;
}
a:hover{/*选择鼠标指针位于其上的链接。都有背景设置和字体的设置*/
color: greenyellow;
}
a:active{/*选择活动链接。*/
background-color: grey;
}
a:visited{ /*选择所有已被访问的链接。*/
color: indigo;
}
.clearfix{/*清除浮动防止下一步操作接着浮动的结果往后。。。*/
clear: both;
}
.box1{
background-color: blueviolet;/*背景*/
color: chartreuse;/*字体颜色*/
font-family: Arial, sans-serif;/*字体*/
font-size: 16px;/*大小*/
font-weight: lighter;/*粗细*/
font: normal larger Arial, sans-serif;/*下面会把前面的覆盖*/
border:5px violet double;/*边框*/
border-left: 8px blue solid;
border-bottom: 8px blue dotted;
border-radius: 35px; /*加圆角*/
padding-top: 10px;/*内边距*/
padding-bottom: 20px;
margin-top: 20px;/*外边距*/
}
.box1 h4{
font-family: cursive;
color: darkred;
font-size: 20px;
font-weight: 900;
font-style: initial;/*字体风格*/
text-decoration: underline;/*文本修饰*/
text-transform: uppercase;/*大小写*/
letter-spacing: 1em;/*字母间距*/
word-spacing: 2em;/*单词间的空白*/
text-align: center;/*对齐方式*/
}
.container{
width: 80%;/*文字的宽度占比*/
margin: 10%;/*外边距*/
}
.list li{
background-color: cyan;
list-style-image: url("./shili.jpg");/*改变前方圆点自定义图片*/
list-style: square;/*改成方的*/
}
.block{
float: left;/*向左浮动*/
width: 33%;
border: lawngreen 1px solid;
box-sizing: border-box;/*表示这个box有边框，*/
}
#qqq {
float: left;
width: 70%;
border: lawngreen 1px solid;/*如果不声明有边框，那么边框会占用width之外的空间*/
box-sizing: border-box;/*表示这个box有边框，*/
}
#qwe{
float: right;
width: 30%;
border: lawngreen 1px solid;
box-sizing: border-box;/*表示这个box有边框，*/
}
.list2 li:nth-child(even){/*所有偶数even列，odd为奇数*/
background-color: lemonchiffon;
}
.list2 li:first-child{
background-color: lightcoral;
color: lightgreen;
}
.list2 li:nth-child(3){
color: lightskyblue;
}
.box2{
border:5px violet double;/*边框*/
border-left: 8px blue solid;
border-bottom: 8px blue dotted;
border-radius: 35px; /*加圆角*/
padding-top: 10px;/*内边距*/
padding-bottom: 20px;
margin-top: 20px;/*外边距*/
position: relative;/*位置设为相对，相对当前位置*/
/*position: absolute;/*绝对，对于当前的页面位置，可能是一个box里面*/
top: 30px;/*下移*/
left: 30px;/*→移*/
}
.position-box{
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;/*位置设为相对，相对当前位置*/
width: 80%;/*文字的宽度占比*/
margin: 10%;/*外边距*/
}
.position-box h1{
position: absolute;/*绝对，对于当前的页面位置，可能是一个box里面*/
top:50px;
}
.position-box h2{
position: absolute;/*绝对，对于当前的页面位置，可能是一个box里面*/
top:50px;
left: 100px;
}
#fixe{/*固定一个按钮位置*/
position: fixed;/*固定位置*/
right: 0;
bottom: 20px;
}

复制代码