前端知识框架1-css的讲解
CSS
在html 页面中有几处可以写css样式 ？
三处
第一处 div的style属性可以写样式
第二处在head的style标签中可以写
第三处 可以通过link标签引入样式表对html 进行样式附着
<html lang="en">
<head>
<link rel="stylesheet" href="demo.css"> 第一处
<style> 第二处
#i1{
background-color: blue;
}
#i2{
background-color: pink;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red">1</div> 第三处
<div id="i1">1</div>
<div id="i2">1</div>
</body>
</html>
#在前段里代表id
选择器 有几种？
1.有id选择器 特殊符号# id 是唯一的 理论上整个html中只允许出现一个id
2.class 选择器可以重复 特殊符号为.
class一个标签可以拥有多个class <div class=" c1 c3 ">1<div>
例子
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; } .c3{ text-align: center; } </style> </head> <body> <div class="c1 c3">11</div> </body> </html> center代表水平居中
/*特殊符号调用为.*/
.c1{
background-color: cadetblue;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red">1</div>
<!-- -class选择器- -->
<div class="c1">c1</div>
<div class="c1">c1</div>
</body>
</html>
3. 标签选择器 所有div标签都会变色改变
div {
background-color: blue;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red">1</div>
<div id="i1">1</div>
<div id="i2">1</div>
<!-- -class选择器- -->
<div class="c1">c1</div>
<div class="c1">c1</div>
<div>标签选择器</div>
标签分为自带属性和自定义属性
我们可以通过自定义属性对div进行改变
4.属性选择器 ui自动化比较常用
<html lang="en">
<head>
<link rel="stylesheet" href="demo.css">
<style>
div[name='dsx']{
background-color: blue;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
属性选择器
<div name="dsx">1</div>
</body>
</html>
开始练习养成好的习惯 先把三处修饰地方先写上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href=""> 第一处
<style></style> 第二处
</head>
<body>
<div style=""></div> 第三处
</body>
</html>
如果 三种修饰标签都存在 优先级？
div 上的style 属性优先级最高
以div为基础 又近到远去找css样式
/*浮动，只能向左修饰和向右修饰*/
.c4{ float: left; } .c5{ float: right; } </style> </head> <body> <!--<div class="c1 c3">帅哥董</div>--> <div class="c1 c4">帅哥董</div> <div class="c1 c4 ">帅哥董</div> <div class="c1 c5">帅哥董</div> </body>
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title>
<style> .header
{
width: 100%; 宽
height: 48px;高
background-color: aquamarine; 背景色
line-height: 48px; 中心标题高度，行高
text-align: center; } 格式居中
</style> </head> <body> <div class="header">HTML</div> </body> </html> 标题
将块级标签转成行内标签
<div class="c1" style="display: inline">cddd</div>
<div class="c1" style="display: none"></div> 隐藏标签方法
<div class="c1" style="overflow: auto"> auto 自动判断是否出现滚动条，hidden截取屏幕
<img src="//pic.cnblogs.com/avatar/1629569/20190313104903.png" alt=""> </div>
