下图是我自己整理的知识点,供参考。
一.引入方式
1.内嵌式引入
把style标签嵌套在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> <!--在这里噢-->
body{font-size:36px;}
</style>
</head>
<body>
</body>
</html>
2.行内样式
如其名
<b style="font-size:56px;">干饭人干饭人干饭都是人上人</b>
3.外链样式
把css当成是一个文件,通过link标签引入到html中
<link rel="stylesheet" type="text/css" href="css/main.css">
4.嵌入样式
内嵌和外链一种综合性的使用,不太常用 了解即可
<style type="text/css">
@import url("css/style.css");
</style>
另外,这4种引用方式存在优先级之分,即"行内样式>剩下的其它三种形式,样式的显示取决于距离"
二.选择器
1.标签选择器
直接引用标签的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{font-size:16px;} <!--小猪佩奇的字体大小-->
</style>
</head>
<body>
<p>小猪佩奇</p>
</body>
</html>
(以下省略head和body部分)
2.id选择器
给标签命名id后,用"#"+id名称来引用(需要注意的是,id的命名需要做到望文生义,就是说让人看到就知道这个id的意思,用的好可以增加代码的可读性)
#one{} <!--id为one的标签的设置-->
<p id="one">打工人</p>
3.类选择器
类似于id选择器,用class来命名标签,"."+class名称引用(同样要做到望文生义)
.two{} <!--class为two的标签的设置-->
<p class="two">打工人</p>
需要注意的是,id和class的命名都不能直接用数字来命名,而是得用英文或英文+数字。
4.全选择器
使用*号来表示 对整个html中的所有标签都起作用
*{margin:0;
padding:0;
}
基本上在每个网页中,都要设置这个,用来消除浏览器的边距误差。
三.伪类
伪类作用于链接上,可以实现你对链接的不同交互效果。
1.link
用于未访问的链接
a:link{
<!--此处为你没有点击过的链接所展示的效果-->
}
2.visited
用于以访问链接
a:visited{
<!--当你点击链接后,该链接会展示出点击后的效果-->
}
3.hover
当鼠标移动到链接上时
a:hover{
<!--当你鼠标悬停在链接上时链接产生的效果-->
}
4.active
按下链接后
a:active{
<!--按下链接后链接会发生变化-->
}
以上4种用法均可用在不同的链接类型上(文字,图片等链接),想要的效果需自行设置(放大缩小,颜色变换的等)
四.盒子模型
很多网站的样式设计都是用盒子模型来做的,其重要性不言而喻。
简单的说就是把网页的每个内容分成一个个盒子,每个盒子再细分成小盒子,以此类推(可以理解为盒子套盒子)。
分好之后再对每个盒子进行样式设计,组合起来就可以展示出你想要的效果。
盒子分为四个部分,内容,内边距,外边距,边框
1.内容(即元素)
里面是你想要展示的东西
2.内边距padding
"盒子名称"{
padding:0px 0px 0px 0px;
padding:0px 0px;
padding:0px; <!--可使用百分比,即 0% -->
}
四个值分别对应上,右,下,左
两个值则是上下,左右
一个值是全部一起
也可单独设置
{
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
}
外边距同理.
3.外边距margin
"盒子名称"{
margin: <!--用法同上-->
}
4.边框border
可以设置边框大小,边框线的类型,线的颜色
{
border:1px solid black;
}
这种是同时设置四条边的样式,也可单独设置每条边的,用法同边距一样
边框线,分别为点状,实线,双线,虚线
{
border-style:dotted solid double dashed;
}
颜色,可用颜色代号或者英文
border-color:#666666
五.元素
用display标签
{
display:inline; <!--设置为内联元素-->
}
即盒子与盒子可以同行显示,但不能设置宽和高
{
display:block; <!--设置为块状元素-->
}
盒子与盒子不能同行显示,但可以设置宽高
display:none; <!--隐藏元素-->
这个可以让元素内容不显示。
六.定位
分为3种,相对定位,绝对定位,浮动
1.相对定位
{
position:relative; <!--移动该元素,但元素仍然占据原来
的空间。因此,移动元素会导致它
覆盖其它框-->
}
2.绝对定位
{
position:absolute;
<!--可以让元素处于界面的任何位置,但不占据原来的空间了-->
}
3.浮动
{
float:left/right; <!--左浮动或者右浮动-->
}
举个栗子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#one{
width: 50px;
height: 50px;
background-color: red;
}
#two{
width: 50px;
height: 50px;
background-color: green;
}
#three{
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="one">123</div>
<div id="two">123</div>
<div id="three">123</div>
</body>
</html>
他们是这样,当给红色进行浮动时,它会
假设你把这三个正方形看成3个不同平面,那么把红色的浮起来后,绿色的就会去填补红色原来的位置,但是红色在上面,所以红色会覆盖绿色。
左浮动右浮动一个样。
如果不想在哪一侧有浮动元素,可以用clear清除浮动
{
float:left;
clear:none;
<!--none是两边都不能,left和right是单边不能-->
}
以上则是我对css的一些理解,如有不对敬请指正!