首页手记 Web前端之CSS小知识点

Web前端之CSS小知识点

标签：

Html/CSS

1.结构:HTML (美工)
样式:CSS (美工)
动作:JavaScript (程序员)
内容:XML (程序员)

2.CSS （Cascading Style Sheet）是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS可以更加精细的控制网页的内容形式。比如说前面的font标签中的size属性，可以用于控制文字的大小，但是，它控制的字体只有7级。
要是出现其他级别的文字，它就实现不了，而css可以办到，它可以任意设置字体的大小。

CSS样式是丰富多彩的。
CSS的样式定义是灵活多样的。

3.六种基本选择器：
标签选择器：p { font-size:2em; }
类选择器：.info { background:#ff0; }
ID选择器： #info { background:#ff0; }
组合选择器：(或) ul,li,a{color:red;}
关联选择器：(与) ul li{background: #000;}
伪类选择器：a:link{} 没有访问之前 a:visited{} 访问后 a:hover{} 鼠标点击之后 a:active{} 点击超链接时的状态

margin:布局外边距
padding:布局内边距

4.关联选择器(类似于and关系)
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
font-family:verdana; //设置字体
text-align:center; //设置居中

5.组合选择器(类似于or关系)
对多个不同选择器进行相同样式设置的时候应用此选择器。

p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
img{
display:block; //让该元素以块级元素显示
}
margin:0px auto; //div水平居中

6.伪类选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。

a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）
a:active 点击超链接时的状态。

6.text/html; //网页
text/css; //CSS样式表
text/JavaScript; //脚本
text/xml;

7.border:4px dashed green; //边框样式设置
border:4px solid green; //边框样式设置

8.超链接样式设置：
a{text-decoration:none;} /去掉链接下的下划线/
a{text-decoration: underline;} //链接下面有下划线
a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /

9.CSS的三种样式：
行内样式表:直接在标签出写样式 <p style="color:red; font-size:20px;">
内部样式表:在head部分放入CSS样式 <style type="text/css"></style>
外部引入样式表 <link rel="stylesheet" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="css/style.css">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">@import url("style.css"); </style>
优先级：行内样式 > 内部样式 > 外部引入样式

样式表的优先级：由内到外，由上到下，级别越来越高

行内样式：
<li>
<a href=""#" style="color:red;font-size:10px;">日用百货</a>
</li>

内嵌样式：
<head>
<style type="text/css">
….. //样式定义
</style >
</head>
<body>
……//HTML内容
</body>

外部引入样式：分别定义.css和.html文件，样式和内容彻底分离，多个网页可共享同一CSS
<link rel="stylesheet" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="css/style.css">

//引入外部样式表
<style type="text/css">
@import url('style/style.css');
</style>

@charset "utf-8"; //字符集编码，写在 style.css中

行内样式
<style type="text/css"> @import url(1.css); </style>
或者import 1.css

9.大多数块元素都有这两个属性
id属性：用来作为页面中某个元素的唯一标识
class属性：用来指定页面中的元素属于某一类（可以是不同标记的元素）

选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用分号隔开
属性与属性值直接按用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开。

10.float属性的作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，
它将不再独自占据一行。可以浮动到左侧或右侧。浮动元素从原有的图层脱离出来，向左向右漂移。
left: 元素向左浮动。
right: 元素向右浮动。
none: 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit: 规定应该从父元素继承 float 属性的值。
clear:left; 清除左边的浮动元素
clear:right;清除右边的浮动元素
clear:both; 清除两边的浮动元素
浮动是魔鬼，clear是小白
取值：none:默认值
left:左侧抗浮动
right:右侧抗浮动

11.background:背景
background:url(地址) no-repeat;
repeat: 背景在x和y方向都重复
no-repeat:背景不重复
repeat-x:背景在水平方向重复
repeat-y:背景在垂直方向重复

12.position：
absolute:是相对于自己最近的父元素来定位的。(绝对定位)
relative:是相对于自己来定位的。 (相对定位)
static:默认值。也就是说对于任意一个元素，如果没有定义它的position属性，
那么它的position:static。
fixed：固定定位
relative 不脱离文档流，absolute 脱离文档流。
也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。
absolute的元素不仅位置改变了，同时也脱离了文档流。
设置图片位置：
img{
position: absolute;
left:50px;
tiop:100px;
border:1px solid blue;
}

13.z-index用来控制标签的层级关系的，最底层的数值最小，最顶层的数值最大页
面就好比一叠纸的铺开，你看到最上面的就是层级最大的，最低下的就是层级最小的。
<style>
.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}
</style>
数字越大，越在上层

//文字滚动效果：
<marquee direction="up" scrollamount="10" loop="-1">身</marquee>
direction:文字滚动方向
scrollamount:文字滚动速度
loop:文字滚动次数

14.cursor:pointer; //当鼠标放上去时光标变为手形
background:url('1.jpg') no-repeat; //设置背景图片，不重复
list-style:nono; //去掉列表前面的小圆点
background-color:#4567ff; 设置背景颜色
background-image: 设置背景图片
font-weight:bold; /字体的粗细/
text-indent:1em; /缩进/

15.元素有三种布局模型：
1、流动模型（flow）
2、浮动模型（float）
3、层模型（layer）
流动模型的特征
1、块状元素都在所处的包含元素内自上而下的的垂直分布，默认情况下块状元素的宽度是100%。
2、内联元素都在所处的包含元素内从左到右水平分布显示。
浮动模型浮动模型可以设置让块状元素并排显示
div{ width:200px; height:200px; border:2px red solid; ｝

div1{float:left;} #div2{float:right;}
层模型让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。
CSS定义了一组定位（positioning）属性来支持层布局模型。层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }
层模型--相对定位通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，
偏移前的位置保留不动。

div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }
层模型--固定定位 fixed：表示固定定位，它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

div1{ width:200px; height:200px; border:2px red solid; position:fixed; bottom:0; right:0; }

Relative与Absolute组合使用作用是相对于其它元素进行定位
1、参照定位的元素必须是相对定位元素的前辈元素：
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

box1{ width:200px; height:200px; position:relative; }

box2{ width:99%; position:absolute; bottom:0px; }

16.盒子模型：可以设置宽度，高度如：content,padding,margin,border等

17.CSS尺寸单位：px:像素，图片，div大小
pt:字体，目的为类打印
em:相对单位 1em=16px=12pt;

18.
1.圆角效果：border-radius:5px 5px 3px 2px;
注：共四个值设置四条边，遵循顺时针方向原理。
2.阴影效果：box-shadow:2px 2px 3px 4px #000 inset;
注：第一个值是X轴偏移量第二个是Y轴偏移量第三个是模糊半径，第四个是阴影长度。
3：边框图片：border-image:
4：颜色透明：background-color:rgba(220,211,32,0.5)。
5：颜色渐变：background-image:linear-gradient(to bottom,red);
注：这里是background-image,不是background-color,值中to是到哪边结束。
6：text-overflow，文字超出之后两个值，clip 表示剪切，ellipsis表示显示省略号。
7：word-wrap：文字超出两个值，normal表示换行，break-word表示单词或URL内部换行。
8：white-space：文字一行显示，不换行，值 normal
9：@font-face：字体引用。font-family：字体名称 src:字体在服务器路径
10：text-shadow:文字阴影。注意和边框阴影box-shadow区别。
只有四个值，text-shadow:0 1px 1px #fff 第一第二是X Y 偏移，三个值是模糊程度。
11：background-origin：设置背景图片平铺的点。
三个值，border-box表示从边框0,0开始，padding-box表示从padding设置的0,0点开始，content-box表示从内容开始。
12：background-clip:裁剪背景图片。参数和background-origin一样，表示从什么地方开始裁剪。
13：background-size:背景填充整个div 。
14：一个div中设置多个背景， background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg),
url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg),
url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;