为了账号安全,请及时绑定邮箱和手机立即绑定

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;

点击查看更多内容
71人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
1.5万
获赞与收藏
8507

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消