18910140161

Css

首页 >> 前端开发 >> Css

前端知识框架1-css的讲解

顺晟科技

2022-09-13 14:29:02

45

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>

上一篇：精选15个国外CSS框架 下一篇：介绍27款经典的CSS框架 - pc
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！