前端-CSS

时间：2020-06-20 00:53:33 收藏：0 阅读：60

CSS总结

CSS(Cascadig style sheet)：层叠样式表
选择器{属性1:值1;属性2:值2;……}

CSS代码的引入方式

1.直接写在head标签里面
<head>
    <style>
        .c1{background-color:red;text-align:center;}
    </style>
</head>
2.直接写在body标签里面   (也叫内联选择器)
<head>
	<div style="background-color:red;text-align:center;"></div>
</head>
3.写入head标签里，从外部文件引入
<link rel=‘stylesheet‘ href=‘目标css文件‘>

选择器

基本选择器

元素选择器

标签{属性:值}
div{height=100px;width=100px;}

类选择器

.类名{属性:值}
.c1{height=100px;width=100px;}

id选择器

#id值{属性:值}					
.d1{height=100px;width=100px;}

通用选择器

*{属性:值}                   #所有标签都会具有的属性
*{height=100px;width=100px;}

组合选择器

后代选择器

div a{属性:值}  	#表示div标签后的所有a标签

儿子选择器

div>a{属性:值}		#表示以div为父级标签的所有a标签

毗邻选择器

div+a{属性:值}		#div标签的下一个标签

弟弟选择器

div~a{属性:值}		#div标签后下一个为a的所有标签

属性选择器

属性选择器一般用在input标签中

input[title]{color:red} 			#找到属性为title的input标签
input[title=‘text‘]{color:red} 		#找到属性为title，且值为text的input标签

伪类选择器

伪类选择器一般用于a标签

a:link{}        #未访问的网址链接
a:visited{}		#访问过的网址链接
a:active{}		#鼠标点击链接但还未抬起的时候
a:hover{}		#鼠标移动到链接上，也可适用于其他标签
#注意，要想a标签同时具有移动到标签时改变属性的效果以及点击链接时改变属性的效果，必须先把active放在前面
input:foucus{outline:none;background-color:pink}  #当选中input标签文本框时产生效果

伪元素选择器

标签:first-letter{}
div:first-letter{color:red;font-size:20px}
标签:before{}
p:before{content:‘呵呵‘,color:blue;font-size:20px}
标签:after{}
p:after{content=‘哈哈‘,color:pink;font-size:20px}

分组与继承

#分组
div,p{属性:值}
#继承
所以的父级标签的属性后代都会有，除非后代自己设置了相同的属性将其覆盖

CSS选择器的优先级

继承的优先级(权重)为0
元素选择器的优先级为1
类选择器的优先级为10
id选择器的优先级为100
内联选择器的优先级为1000
可以通过添加!important属性使得标签的优先级最高

属性

高度宽度

height:高度
width:宽度
.c1{
	height:100px;
	width:100px
}

字体属性

font-family:字体
font-size:字体大小默认为16px
font-weight:字体粗细字体粗细有normal、bold、bolder、100-900(400等于normal，700等于bold)
color:字体颜色颜色有四种形式
- color:red #颜色单词
- color:#ffffff #六位16进制
- color:rgb(255,0,0) #rgb三原色比
- color:rgba(255,0,0,0.4) #a表示透明度

.c1{
	font-family:‘宋体‘,‘楷体‘,‘黑体‘;
	font-size:20px
	font-weight:bold
	color:rgba(255,255,0,0.3)
}

文字属性

文字排列：text-align:排列方式
- left：左对齐，默认
- right：右对齐
- center：居中对齐
- justify：两端对齐
文字装饰：text-decorate:装饰方式
- none：默认，标准文本
- underline：定义文本下的一条线
- overline：定义文本上的一条线
- line-through：穿过文本的一条线
- inherit：继承父类元素的text-decoration属性的值

首行缩进：text-indent:32px

.c1{
	text-align:center;
	text-decorate:none;
	text-indent:32px;
}

背景属性

background-color:背景颜色
- background-color:red #颜色单词
- background-color:#ffffff #六位16进制
- background-color:rgb(255,0,0) #rgb三原色比
background-image:url(‘路径‘)
background-repeat:重复方式
- repeat(默认)：背景图片在x,y轴下铺满整个标签
- no-repeat：背景图片不重复
- repeat-x：在x轴上铺满
- repeat-y：在y轴上铺满

background-position:位置

left top center top right top
left center center center right center
left bottom center bottom right bottom

.c1{
	background-color:rgb(255,0,0);
	background-image:url(‘佛卢瓦.jpg‘);
	background-repeat:no-repeat;
	background.position:center center;
}
#简写形式
.c1{
    background:rgb(255,0,0) url(‘佛卢瓦.jpg‘) no-repeat center center;
}

边框属性border

border-width:宽度
border-style:样式
- solid:边框为实线
- dashed：边框为虚线
- dotted：边框为点
border-color:颜色
- color:red
- color:#ffffff
- color:rgb(255,0,0)
border-radius:百分比控制四角圆度 50%就为圆形

.c1{
	width:200px;
	height:200px;
	border-width:10px;
	border-style:solid;
	border:red;
	border-radius:50%;
}

display属性

display：
- inline 将标签设置为内敛标签
- block 将标签设置为块级标签
- inline-block 将标签设置为同时具有内敛标签和块级标签的标签，但不占一行
- none 隐藏标签，但不占之前的空间，与visibility:none 相比后者会继续占着空间

css盒子模型

padding内边距

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
可以简写为padding:10px(上下) 20px(左右);
		padding:10px(上),20px(右),10px(下),20px(左)

margin外边距

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
可以简写为margin:10px(上下) 20px(左右);
		margin:10px(上),20px(右),10px(下),20px(左)
#注意，当两个标签都设置了外边距的话，上下边距取最大子，左右边距累加

float属性

float:
- right 往右飘
- left 往左飘

.c1{
	float:right
}
注意：浮动会造成父级标签塌陷问题
解决父级塌陷的方法：1.父级标签设置高度
				2.父级标签下一级标签设置clear:both属性
				3.父级标签加上如下伪元素选择器
				clearfix:after{
				content:‘‘;
				display:block;
				clear:both;
				}

overflow溢出属性

overfloat:
- visible 默认值，内容溢出不会裁剪，会呈现在文本框之外
- hidden 内容会被修建，超出内容不可见
- scroll 内容会被裁剪，但超出文本框的内容会以滚动条的形式加以查看
- auto 如果内容被裁剪，超出文本框的内容能以滚动条的形式加以查看，多使用这种

#圆形头像实例
<head>
    <meta charset="UTF-8">
    <title>圆形头像实例</title>
    <style>
        .c1{
            height:100px;
            width:100px;
            border:2px solid pink;
            border-radius: 50%;
            overflow: hidden;
        }
        .c1 img{
            width:100%;
        }
    </style>
</head>
<body>
    <div class="c1">
       <img src="cat.jpg">
    </div>
</body>

position属性

position:
- realitive 相对定位，保留之前的标签位置，相对于之前的标签位置进行移动
- absolute 绝对定位，不保留之前的标签位置，相对于父级标签进行移动，如果没有父级标签，就找祖父级标签body标签
- fixed 固定定位，相对于浏览器窗口进行移动，一旦确定就会固定在浏览器窗口的固定位置

/*position:定位方式;
top:px距离;
bottom:px距离;
left:px距离;
right:px距离;
*/
#实例
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height:200px;
            width:200px;
            text-align: center;line-height: 200px;
            border:2px solid pink;
            padding: 20px;
            position: fixed;
            top: 50%; left: 50%;
            margin-top: -100px;margin-left: -100px; #注意使用这行的形式
            /*margin-bottom: 100px;margin-right: 100px;*/  #这种格式不会产生作用
        }
    </style>
</head>
<body>

    <div class="c1">
       啦啦啦
    </div>

</body>

z-index属性

z-index 值决定标签的上下关系，数值大的标签盖住数值小的标签，
只有定位了的标签，才能有z-index。不管相对定位，绝对定位，固定定位，都可以使用z-index，但是浮动元素float不能使用z-index
- 所有一般大布局就是使用float做的，小布局就是使用position做的
z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么哪个标签写在后面，哪个标签就在上面，定位了的标签，永远压住没有定位的标签

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height:200px;
            width:200px;
            text-align: center;line-height: 200px;
            background-color: red;
            border:2px solid pink;
            padding: 20px;
            position: fixed;
            top: 50%; left: 50%;
            margin-top: -100px;margin-left: -100px;
            z-index: 2;
        }
        .c2{position: absolute;
            height: 600px;width: 100%;
            background-color: blue;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="c2">

    </div>
    <div class="c1">
       啦啦啦
    </div>
</body>
</html>

opacity透明属性

opacity:透明度透明度使用0-1表示，数值越大，越不透明
opacity属性用于表示整个标签透明度，与rgba相比，rgba只是表示背景的透明度

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height: 300px;width: 100px;
            background-color: rgba(255,255,0,0.5);
            border: 10px solid blue;
            padding: 20px;
            margin: 20px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="c1">
       啦啦啦
    </div>
</body>
</html>