day13 前端之CSS

发布时间：2023-09-06 01:30责任编辑：董明明关键词：CSS 前端

CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>









<link rel="stylesheet" href="03%20yuan.css">
</head>
<body>




<p>一个p标签1</p>
<p>一个p标签2</p>
<p>一个p标签3</p>

<div>DIV</div>
<a href="">click</a>
<div>DIV</div>

</body>
</html>

基本选择器

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
/*后代选择器*/
/*.c1 .c3{*/
/*color: red;*/
/*}*/

/*子代选择器*/
/*.c1>.c3{*/
/**/
/*}*/

/*毗邻选择器*/
/*.c1+p{*/
/*color: palevioletred;*/
/*}*/

/*兄弟选择器*/
/*.c1~p{*/
/*color: goldenrod;*/
/*}*/

/* 与条件选择器 */
/*span.d1{*/
/*background-color: palevioletred;*/
/*}*/

/*class可以拥有多个值，每个值通过空格隔开*/
/*.c1{*/
/*color: rebeccapurple;*/
/*}*/

/*.c2{*/
/*background-color: lightslategrey;*/
/*}*/

div,span{
color: red;

background-color: lightslategrey;
font-weight: 300;
}

</style>
</head>
<body>












<hr>





<hr>



<hr>




</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
[egon=‘e‘]{
color: red;
}
</style>
</head>
<body>

<div egon="egg">egg</div>
<span egon="egg">egg</span>
<div egon="alex">egg2</div>
<div alex="32">alex</div>

</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
span{
color: royalblue;
width: 300px;
height: 300px;
background-color: lightslategrey;
}

span:hover{
color: red;
}

.s1,.s2{
width: 100px;
height: 100px;
}
.s1{
background-color: grey;
}
.s2{
background-color: rosybrown;
}
.outer{
border: 1px solid red;
}

.outer:hover .s1{
background-color: royalblue;
}

.outer:before{
content: "hello world";
color: red;
}
</style>
</head>
<body>

<span>hello world</span>

<hr>
<div >
<div ></div>
<div ></div>

</div>

</body>
</html>

选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>

<style>
/*.p1{*/
/*color: lightslategrey;*/
/*}*/
/*#p1{*/
/*color: darkblue;*/
/*}*/
/*p{*/
/*color: goldenrod;*/
/*}*/

/*##########优先级#############*/

/*.c2 p{*/
/*color: red;*/
/*}*/

/*.c1 .c2 .c3 p{*/
/*color: goldenrod;*/
/*}*/

/*.c1 .c2 .c3 .c4{*/
/*color: palevioletred;*/
/*}*/

/*.c4{*/
/*color: saddlebrown!important;*/
/*}*/

/*###############与字体相关的样式：继承##################*/
.outer {
color: green;
}

body{

color: red;
}
</style>
</head>
<body>

<p >this is P</p>

<div >
<div >
<div >
<p style="color: green">P2</p>
</div>
</div>
<p>P1</p>
</div>

<hr>
<div >
<p>PPP</p>
<span>span</span>
</div>

</body>
</html>

文本属性操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>

<style>
p{
color: #EE4000;
background-color: lightslategrey;
text-align: justify;
font-weight: 100;
font-style: italic;
}
a{
text-decoration: none;

}

div{
color: green;
}

.c1{
width: 200px;
height: 200px;
background-color: lightslategrey;
text-align: center;

}

.btn{
width: 50px;
height: 100px;
background-color: darkgray;

text-align: center;
line-height: 100px;
}
</style>
</head>
<body>

<p>hello world</p>

<div><a href="">click</a></div>

<div >DIV</div>

<div > > </div>
</body>
</html>

文本操作之verticle-align

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
img{
vertical-align: -200px;
}
</style>
</head>
<body>

<div><img src="qq.png" alt=""><b>egon</b></div>

</body>
</html>

背景属性操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.c1{
border:1px solid red;
width: 100%;
height: 500px;
/**/

/*background-image: url("a.png");*/
/*background-repeat:no-repeat;*/
/*background-position: center center;*/

/*简写方式*/
background: no-repeat url("a.png") center ;
}
.c2{
border:1px solid green;
width: 40px;
height: 40px;

background: no-repeat url("egon.jpg") -198px -82px ;
}

</style>
</head>

<body>


<div ></div>

</body>
</html>

边框属性

知识推荐

我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图