前端-CSS

时间 2020-06-20

标签前端 css 栏目 CSS 繁體版

原文原文链接

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文件'>

选择器

基本选择器

元素选择器css

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

类选择器html

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

id选择器浏览器

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

通用选择器布局

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

组合选择器

后代选择器字体

div a{属性:值}  	#表示div标签后的全部a标签

儿子选择器url

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

毗邻选择器code

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

弟弟选择器orm

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:字体htm
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>

1. 前端之CSS
2. Web前端-CSS
3. 前端css position
4. 前端 CSS
5. 前端篇---------CSS
6. python--前端CSS
7. 前端之css
8. python前端CSS
9. 前端-html、css
10. 前端——CSS
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术