前端-CSS

1.CSS层叠样式表

CSS层叠样式表主要用来调节html标签的各种样式
"""
思考:页面都是由HTML构成的,并且页面上有很多相同的HTML标签,但是相同的HTML标签在不同的位置可能有不同的样式,我们如何区分标签

标签的重要属性:
	1.class属性:分门别类,类似于面向对象中的类,主要用于批量查找(一个标签可以有多个class属性)。
	2.id属性:主要用于点对点的精确查找(一个标签只能有一个属性,id不能重复,重复会飘红)。
	

学习css的流程
	1.先学习如何查找标签
	2.再学习如何调整样式
"""
1.css语法结构
	选择器 {
        样式名:样式值1;
        样式名:样式值2
    }
    
2.css注释语法:/*注释内容*/
    
3.引入css的多种方式:
	1.head内style标签内部编写(学习时使用)


	2.head内link标签引入(标准的方式)

'''link引入标签时不用在style里面写,直接在head里面写就可以'''

3.标签内部通过style属性直接编写(不推荐)

2.CSS选择器

1.CSS基本选择器:
	1.1标签选择器:直接按照标签名查找标签
	span {
            color: aquamarine;
        }
	1.2类选择器:按照标签的class值查找标签,用.class来进行查找
   .c1 {
            color: green;
        }

	1.3id选择器:根据标签的id值精准查找标签,用#id值的方式来进行查找

	1.4通用选择器:将所有的内容变成指定属性
	* {
    color: aqua;
}
2CSS组合选择器
"""
之前我们学习了块级标签(p标签,div标签)和行内标签(span标签,img标签,a标签),块级标签可以嵌套块级标签和行内标签,而行内标签只能嵌套行内标签。现在我们对标签嵌套又有一个新的分类:
<p>ppp</p>
<p>ppp</p>
   <div>div  #1
      <div>divdiv  #2
         <p>divdivp  # 5
             <span>divdivpspan</span>  # 6
          </p>
      </div>
      <p>divp</p>  # 3
      <span>divspan</span>  # 4
   </div>
   <p>ppp</p>
   <span>spanspan</span>
针对标签的上下级以及嵌套另外的说法:
父标签(1号标签是2、3、4号标签父标签)
子标签(2、3、4号标签父标签是1号标签的子标签)
弟弟标签(3、4号标签是2号标签的弟弟标签)
哥哥标签(2号标签是3、4号标签的哥哥标签)
爷爷标签(2号标签是6号标签的爷爷标签)
孙子标签(6号标签是2号标签的爷爷标签)
祖先标签(1,2,5号标签都是6号标签的祖先标签,用英文parents标签,如果是parent标签仅指5号标签)
"""
	2.1后代选择器(空格):用标签名空格标签名的方式来进行查找,只要后一个标签是前一个标签的后代(不管是儿子还是孙子)就可以找到。
div span {
    color: red;
}  
# 查找div标签下所有span标签并且修改属性

	2.2儿子选择器(大于号):两个标签之间用大于号连接,后面一个标签是前一个标签的子标签才可以找得到。
div>span{
    color: red;
}
# 查找div标签下的是span标签的子标签并且修改属性

	2.3毗邻选择器(加号):两个标签用加号连接,后面标签和前面标签同级并且紧挨着前面标签的 ,就会查找并且修改属性。
p+span {
    color: cornflowerblue;
}
# 查找和p标签紧挨着的span标签


	2.4弟弟选择器(小波浪号):两个标签用小波浪号连接,后面标签是前面标签的弟弟标签。
div~p {
    color: darkorange;
}
# 查找所有div标签的弟弟标签

3.分组与嵌套
	3.1多个选择器合并查找:各标签用逗号隔开
div,span {
    color: coral;
}  
# 查找div标签或span标签

	3.2选择器可以混合使用:标签选择器,类选择器,id选择器可以混合查找。
.c1,span,#d1 {
    color: cornflowerblue;
}
# 查找c1类,span标签,id为d1的标签并修改

	3.3查找选择器指定类的标签
span.c1 {
    color: green;
}
# 查找类为c1的span标签
"""
span#d1 {
	color: green;
}
# 查找id为的d1的span标签
"""

	3.4查找选择器指定id的标签
span#d1 {
    color: red;
}  
# 查找id为d1的span标签

4.属性选择器:根据标签的属性来查找标签
	4.1按照属性名查找:属性名用中括号括起来,带有属性名的标签会被查找到并且更改属性
<style>
    [username] {
        color:red
    }
</style>

	4.2按属性名查找可以增加更多的限制条件:在中括号前面添加标签名,中括号内指定属性名等于某个属性值。
    <style>
        h1[username='max'] {
            color: deeppink;
        }
    </style>


5.伪类选择器:当我们看到某些网页上有的链接(通过昨天的a标签来实现)就光标悬浮在上面之后会变颜色,通过伪类选择器我们也可以实现这样的效果。修改本身的颜色用 a {}在中括号内修改属性,光标悬浮状态用 a:hover{}来修改。
"""
a标签对应的链接在浏览器上没有被点过时,颜色是蓝色;点过时以后都变成紫色。
"""
<head>
    <style>
    
        a {
            color: black;
        }  # 链接没有被点时呈现的颜色
        a:hover {
            color: deeppink;
        }  # 链接在鼠标悬浮在上面时呈现的颜色
        a:visited {
            color: saddlebrown;
        }  # 链接被点击过后呈现的颜色
    </style>
<head>
    
<body>
    <a href="https://www.cnblogs.com/zkz0206/p/16939836.html" target="_blank">HTML相关知识</a>
</body>

当我们获取用户输入时,可以给文本框内背景添加指定的颜色:
<style>
	input:focus {
       background-color: red;
     }
</style>

6.伪元素选择器:修改一个标签之后所有该标签产生的内容都会改变
<style>
	p:first-letter {
     font-size: 48px;
     color: blue;
	}
</style>

还可以在某些字段前后加一些指定字符:
<style>
   p:before {
   		content: '前面添加指定的内容';
       color: blue;
    }
   p:after {
      content: '后面指定的内容';
      color: deeppink;
   }
</style>

3.选择器优先级

1.选择器相同,导入方式不同:就近原则。
"""
代码从上往下执行,执行到离body标签最近的选择器才可以修改成功,否则修改成功之后又会被其他选择器修改
"""

2.选择器不同,导入方式相同:
内联样式>id选择器>类选择器>标签选择器
"""
内联样式:直接在标签内部修改。
<body>
    <p class="c1" id="d1" style="color: aqua">选择器的优先级</p>
</body>
由于类与标签的查找范围较大,指向性没有内联以及id选择器强,所以优先级较弱。我们可以利用他们优先级不同对特别的标签做特别的修改。
"""

4.CSS样式调节(都在style标签中调节)

1.字体样式:
	font-family:字体书体
	font-size:字体大小; 14px 24px 36px
	font-weight:字体粗细: lighter(变细);border(变粗)
	color:有三种模式
		1.直接用颜色的单词:color: aqua;
		2.颜色编码:color: #9F9F5F;(颜色代码链接:https://blog.csdn.net/qq_39162838/article/details/116989378")
		3.rgb三基色:color: rgb(24,145,32);(每个颜色都有一个固定的三基色,适用于在页面上看到某种颜色,用取色器取到该颜色然后使用)
	rgba():用来调节饱和度:color: rgba(24,145,32,0.6);
	text-align:文本调整:center:居中;end:右对齐;justify:左对齐
	text-decoration:字体样式:unbderline:下划线;上划线;
"""
text-decoration还有一个更重要的功能室取消a标签的下划线,a标签在网页中默认有一条下划线,我们只需要在<style>中加入a {text-decoration:none;}即可
"""
	text-indent:首行缩进

5.背景属性

div {
    width: 400px;  /*背景大小*/
    height: 400px;
    background-color: aqua;  /*背景颜色*/
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1113%252Fbdefb078j00r2i20e002ac000hs00m8c.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672490651&t=a7db1a1cb89036319ce702664fd7a5a3");/*图片地址*/
    color: deeppink;  /*背景字体颜色*/
    background-repeat: no-repeat:不重复;repeat-x:横向重复;repeat-y:竖向重复;repeat:横竖向都重复   /*重复属性*/
    background-position: center; 
/*背景图片位置:background-position后面有两个参数 0% 0%:
第一个参数:
	0%代表图片在最左边
	50%代表图片在最中间
	100%代表图片在最右边
第二个参数:
	0%代表图片竖向铺满屏幕
	50%代表图片竖向50%在上半个屏幕(-50%代表竖向-50%在下半个屏幕)
background-position： 0% 0%代表图片水平居中,竖向占满屏幕
*/
}

6.边框

1.边框样式设置:
边框代码在head中的style标签中填写:
右:right,上:top;下:bottom
    边框粗细:border-left-width
    边框样式:border-left-style
    边框颜色:border-left-color
      
2.单边缩写:某个边的边框可以直接写缩写:后面默认跟三个参数(粗细,样式,颜色)
p {
    font-size:16px
    border-left: 3px solid black
}

3.多边缩写:如果四个边边框属性都相同,可以再次缩写:
p {
    font-size:16px
    border: 3px solid black
}

4.给边框设置尺寸:
p {    
	width: 400px;
	height: 400px;
	border: 3px solid pink;
}  
# 该边框长宽一致,是个正方形

5.画圆:可以用border-radius属性。该属性控制矩形角圆润程度,调成0%是举行,0至50%是一个圆角矩形,50%以上都是圆形
p {
	width: 400px;
	height: 400px;
	border: 3px solid pink;
	border-radius: 50%;
}

7.display属性

1.display属性主要用来控制HTML的显示效果。
"""
行内标签(span,a)无法设置长宽,即使设置也无法改变。块级标签(p,div)才可以设置。如果我们想要一次性建立多个span标签时,快捷键直接输入:span*5 tab;如果我们想输入5个ul套li标签,直接用ul>li*5 tab。如果我们想用ul套li标签(无序标题),每个li标签里面再套一个a标签,也可以用如下写法:ul>li*3>a.c2{$},其中c2指每个a标签都属于c2类,$指a标签的文字会从1开始逐渐递增。
"""
2.inline,onblock使用:
	首先我们新建两个div并设置标签,因为div属于块级标签,所以他们会竖向排列,div内什么都不输入,我们发现结果如下:
.c1 {
	height: 100px;
	width: 100px;
	border: 5px solid pink;
}

.c2 {
	height: 100px;
	width: 100px;
 	border: 5px solid green;
}

	但是如果我们想把它变成一行,那么我们需要用到display:inline;该代码的作用是将块级标签排列在一行,但是它也会遵循行内标签的特性,长度取决于标签内文字,没写文字便会缩起来。相反,display:block可以将行内标签转化为块级标签显示,只有变成块级标签边框的特性才能显示出来。
.c1 {
	height: 100px;
	width: 100px;
	border: 5px solid pink;
	display: inline;
}

.c2 {
	height: 100px;
	width: 100px;
 	border: 5px solid green;
	display: inline;
}


3.display:none可以将将标签隐藏起来,也不会保留位置,此功能应用于在后台默认数值,即使用户输入自己的信息传到后台的也不是用户的信息,而且该默认信息在页面不会展示。
<p>
	username:<input type="text">
   <input type="text" name="name" value="max" style="display: none">  # 页面上看不到该输入框
<p/>
"""
display:none隐藏标签不会占位;visibility: hidden会占位,所以隐藏标签用display:none效果更好。visibility: hidden效果如下图:
"""

8.盒子模型

1.由来:我们可以将标签看成是一个快递盒:
	1.1快递包里面的实际物体:内容content;
	1.2物体与与快递盒内部的距离:内边距(内填充)padding; 
	1,3快递盒的厚度:边框border; 
	1,4快递盒之间的距离:外边距margin

2.border的大小我们刚才已经学习过,content的大小是由内容多少和字体大小决定的,所以我们还要学习padding和margin的大小:
调整内边距(简写):
	2.1:padding调节:
		padding-left:内容和左边框的距离 
      padding-top:内容和上边框的距离 
"""
如果我们同时设定内容距离左右边的距离,那么只会改变padding的范围,不对文字做调整的话文字效果不会体现出距离右边的距离
"""

3.padding的参数有以下几种写法:
p {
    padding: 20px(上下左右)
    padding: 20px 40px(上下 左右)
    padding 10px 20px 30px(上 左右 下)
    padding 10px 20px 30px 40ox(上 右 下 左)
}

4.margin参数是指边框外边线距离其他边框(或者屏幕边缘)外边线的距离
两个标签如果margin不一样时,外边框间距长度不会叠加(图1,2)
针对标签的嵌套,上下不动,水平居中(图3,4)
.c1 {
    margin:0 auto
}
"""
margin设置居中只能设置水平居中,竖直方向无法设定
"""

"""
当两个标签在相接的部分margin值不一样时,采用两个标签中较大的margin值。
"""

9.浮动

"""
类名和id名不能用纯数字,和变量名命名规则一致
"""
1.首先我们来用一个div标签嵌套另外两个div标签,产生如下效果:

如果我们想让它们在一行显示,我们需要加一个浮动:产生结果如下:

我们发现可以通过float:left(right)的方式来让不同的div浮在最左或者最右。如果想都浮在左边,那么都写float:left就可以,哪个标签在上面哪个标签就在最左边。

2.浮动带来的影响:
	浮动的元素是脱离正常文档流的,会造成文档塌陷(我们的显示器其实不是一个平面,是一个三维坐标系。浮动其实是是被嵌套的两个标签脱离了平面,悬浮在了空中)
    
clear:不允许左侧(右侧)出现浮动的元素,并且出现块级标签的特性,左右不能出现块级标签,所以会直接排在父标签的下面,从而撑起来父标签的边框。谁塌陷了就给谁的类中添加clearfix。

综上:解决浮动问题的办法:在style标签中增加一个类,谁塌陷就给谁的类中增加clearfix。
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
"""
浏览器特性:当我们没有悬浮的标签有文字时,标签上的文字并不会被悬浮的标签盖住,而是会优先把文字移出悬浮的区域并且展示
<style>
        .c1 {
            border: 5px solid black;
        }
        .c2 {
            width: 100px;
            height: 100px;
            background-color: deeppink;
            float: left;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
        }
        .c6 {
            width: 400px;
            height: 400px;
            background-color: purple;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
</style>        
       
<body>
    <div class="c1 clearfix">
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c6">66666</div>
    </div>
</body>
"""

10.溢出

1.溢出现象:当我们给标签添加了边框设置了尺寸之后,文字很多时候写不下会超出边框范围,容量不能够容纳文字。

2.如何解决:
	解决方案1:overflow: hidden;直接将多出来的文字砍掉,结果如下:

	解决方案2:overflow: auto;在框中间增加一个滚动条,可以上下滑动查看全部内容。

	解决方式3:overflow: scroll;类似于overflow: auto,上下左右都可以滑动。

"""
圆形头像制作:max-width: 100%:将图片长宽调整至圆形头像范围大小
    <style>
        div {
            height: 200px;
            width: 200px;
            border: 5px solid red;
            border-radius: 50%;
            overflow: hidden;
        }
        div img {
            max-width: 100%;
        }

    </style>
	<body>
    	<div>
        	<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F23%2F20210723190856_22391.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672574933&t=0bb6a7082ec3395fdd346ced134c10f8" alt="">
   	 </div>
	</body>
div的属性中border-radius: 50%;是设置为圆形,overflow: hidden;是设置超出圆形的部分全部隐藏(此处还可以加上背景色),max-width: 100%;是将图片按照比例缩放至圆形对应的矩形大小,常常用在头像制作上面
效果图如下:
"""

11.定位和标签

1.标签在默认情况下无法通过定位的参数来移动的。

2.针对定位有四种状态:
    1.static静态(标签默认的状态)
    2.realitive:基于标签原来的位置做移动
    3.absolute:绝对定位(基于某个定位过得父标签)
    4.fixed:固定定位(基于浏览器窗口固定不动)

3.我们在设置标签时,可以用相对定位指定距离边框的距离:
<style>
        div {
            height: 200px;
            width: 200px;
            background-color: red;
            left: 100px;
            position: relative;
        }
</style>

4.绝对定位:当我们定义一个标签时想通过其他标签来定义本标签的位置时,我们需要采用下面的方法:
	<style>
        .c1 {
            height: 200px;
            width: 200px;
            border: 5px solid black;
            top: 100px;
            left:100px;  # 相对定位根据尺寸定义出在页面上的位置
            position: relative;
        }
        .c2 {
            height: 100px;
            width: 100px;
            border: 5px solid gray;
            position: absolute;
            top: 0;  # 绝对定位的参数指的是距离相对定位标签左上角的距离
            left: 0
        }
    </style>
    
    <body>  # 根据相对定位的标签先定义,将需要绝对定位的标签嵌套起来
		<div class="c1">
			<div class="c2"></div>
		</div>
    </body>

5.当我们需要使一个窗口固定悬浮在页面上,即使网页上下移动该窗口位置固定,我们需要用到固定定位:position:fixed;fixed固定的;
	<style>
        .c1 {
            border: 5px solid black;
            background-color: aliceblue;
            width: 100px;
            height: 200px;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>  
    <body>
        <div style="height: 1000px; background-color: yellow"></div>
        <div style="height: 1000px; background-color: blue"></div>
        <div style="height: 1000px; background-color: deeppink"></div>
        <div class="c1">悬浮标签怎样设置</div>
    </body>
"""
我们新增一个标签改背景色,会发现标周边有留白。发现这是因为边框的margin有一根默认值,我们需要在style中修改一个默认值:
body {
	marin: 0
}
"""

12.z-index

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应,为了制作出这种效果,我们需要用到z-index,类似于xyz的z轴。
    <style>
        .cover {
            background-color: rgba(124,124,124,0.7);
            position: fixed;
            top: 0;
            right:0;
            bottom: 0;
            left:0;
            z-index: 20;
        }
        .modal {
            background-color: aliceblue;
            width: 400px;
            height: 200px;
            position: fixed;
            left:50%;
            top:50%;
            z-index: 21;
            margin-left: -200px;
            margin-top: -100px;
        }
    </style>
    <body>
        <div>我是最下面的div</div>
        <div class="cover"></div>
        <div class="modal"></div>
    </body>

13.阴影

给标签加阴影的方法:box-shadow
box-shadow有四个参数分别是:h-shadow v-shadow blur color
1.h-shadow:水平方向阴影开始的长度
2.v-shadow:阴影的宽度
3.blur:模糊距离(数值越大模糊距离也越长,阴影颜色也更淡)
4.color:颜色,可用rgba格式来选
box-shadow:10px 10px 10px rgba(0,0,0,0.7);效果如下:

posted @ 2022-12-01 21:16 ERROR404Notfound 阅读(27) 评论(0) 收藏举报

刷新页面返回顶部

404 NotFound

前端-CSS

1.CSS层叠样式表

2.CSS选择器

3.选择器优先级

4.CSS样式调节(都在style标签中调节)

5.背景属性

6.边框

7.display属性

8.盒子模型

9.浮动

10.溢出

11.定位和标签

12.z-index

13.阴影

公告