学习css须知
2018-08-19 本文已影响0人
lovinglili
color
接触过html之后，你应该会几种颜色的书写方式了吧？生活中得色彩是由红，黄，蓝组合而成的，那么屏幕三原色呢？屏幕三原色就是红（R），绿（G），蓝（B）了。在开始css简单入门之前我们就来总结补充一下颜色的几种写法:
十六进制写法：
background:#585658;/*两位代表一种原色，一种原色的数值范围为0~255；十六进制写法时要在数字前加#*/
十六进制写法2：
background:#fff;/*当六位数一样的时候，可以简写为三位，最大为f,不能超过255；*/
rgba的方式:
color:rgba(214,255,255,0.5);
/*rgba(255,255,255,0.5);前三位就代表三种原色的数值，最后一位代表透明度（opacity），范围在（0~1）之间，0代表全透明，1代表不透明；*/
rgb的方式：
color:rgb(214,255,255);
/*rgb(255,255,255);三位数就代表三种原色的数值*/
英文名字表示：
background:red;/*-红色*/
字体大小
我们常接触的字体大小也就是像素，css中还有几种经常用到的字体大小的单位
px 像素
font-size:16px;/*一般浏览器默认的字体大小为16px，最小为12px*/
em 相对长度单位
text-indent:2em;/*一个em默认为16px，em取决于父元素的字体的大小，em层层嵌套时要特别注意；*/
rem 相对长度单位
font-size:2rem;/*想对于根元素字体大小*/
css三种引入方式
内联
<p style="color:white; font-size:18px;"></p>
内部
<style type="text/css">/*尽量写在head标签内*/
input{
background:red;
width:100px;
height:30px;
}
</style>
外部引入
<link rel="stylesheet" type="text/css" href="引入的css文件地址" />
<!--写在head标签内-->
常用选择器
元素选择器
input{/*div ,p span a 标签名都可以*/
background:red;/*写在style里面,或者css文件里面*/
width:100px;
height:30px;
}
id选择器和class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#in{ /*用id写样式，id名前加"# ",id写格式*/
background:red;
width:100px;
height:30px;
}
.a{ /*class名前加".",class写样式格式
width:green;
}
</style>
</head>
<body>
<input id="in" type="text">你好啊</input>
<!--id名写在标签内，id名不允许重复-->
<input type="button" class="a">再见</input>
<input type="text" class="a">不再见</input>
</body>
</html>
通配符选择器*
*{ /*对所以标签都生效*/
padding:0;
margin:0;
}
包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.b p{/*.b 和p为父子关系，找到.b下的p标签*/
background:red;
width:100px;
height:30px;
}
</style>
</head>
<body>
<div class="b"><!--div 和 p标签嵌套关系-->
<p>哈哈哈</p>
</div>
</body>
</html>
群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.b,p{/*用逗号隔开，代表这两个所代表的的标签都有这些样式*/
background:red;
width:100px;
height:30px;
}
</style>
</head>
<body>
<div class="b">
</div>
<p>哈哈哈</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*按顺序写，不然会错误*/
a:link{
color:red;/*超链接的初始状态*/
}
a:visited{
color:green;/*超链接被访问后的状态*/
}
a:hover{
color:blue;/*鼠标划上超链接的状态*/
}
a:active{
color:yellow;/*按着超链接不放的状态*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
元素（标签）类型
简单介绍一下几种常用的元素类型，以及代表的的标签元素
inline 行内元素
-
顾名思义，行内元素的所有内容显示在一行，不会自动换行；
-
行内元素没有上下margin值；
-
无法设置宽高；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{/*大小是有内容撑起来的*/ background:red; width:100px;/*宽高设置没有用*/ height:100px; } </style> </head> <body> <span>abcabc</span><a>456456</a> <!--显示在一行--> <!--img,a,i,span行内元素--> </body> </html>
block 块元素
-
可以设置宽高
-
独占一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div,p{ background:red; width:100px; height:100px; /*宽高可用*/ } </style> </head> <body> <p>你好啊</p> <div>再见</div> <!--div,p,ul,ol,form块元素--> </body> </html>
inline-block 行内块
-
可以设置宽高
-
其他特性同inline元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input{ background:red; width:100px; height:30px; /*显示在一行，宽高可设置*/ } </style> </head> <body> <input type="text">你好啊</input> <input type="button">再见</input> <!--input典型的行内块--> </body> </html>
元素类型转换
display:block/inline/line-block;/*转换元素类型*/
盒模型
盒模型.jpg
每一个html标记都能看做是一个盒子
每一个盒模型都有：内容（content）,填充(padding),边界(margin) ,边框(border)这四个属性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;/*四个方向分开写*/
padding:10px 15px;/*上下 左右*/
padding:10px 15px 5px;/*上 左右 下*/
padding:10px 5px 2px 13px;/*上 右 下 左*/
padding:10px;/*上下左右四个方向都是10px*/
/*margin,border同上padding*/
border:1px solid black;/*边框1px 细线 黑色,组合写*/
border-left-color:red;/*每个边的设置都可分开*/
border-color:red green;
border-left-style: dashed;/*dashed 虚线 double双线 doted点*/
}
</style>
</head>
<body>
<div>美好的一天</div><!--div就是一个盒子-->
</body>
</html>
若两个盒子上下排列，则他们的上下margin会叠加；
水平方向上盒子的左右margin不会叠加
