博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端基础知识复习之CSS
阅读量:6712 次
发布时间:2019-06-25

本文共 1145 字,大约阅读时间需要 3 分钟。

CSS复习资料

CSS简介

概念

Cascaing Style Sheet 这三个单词的首字母缩写,翻译过来就是层叠样式表;

css的作用主要是用来定义页面中的表现;

引入

1. 外部样式表

使用link标签引入外部样式表。一般情况下,会有一些样式是公有的,这些样式写在一个或多个文件中,通过外部样式表引入到文件中,维护起来也比较方便。

    
复制代码

2. 内部样式表

写在style里面,如果一些页面有特有的样式,并且样式比较少的情况么可以放在内部样式表中。

如果内容比较多,并且为了不影响页面的加载,一般采用外部样式表。

    复制代码

3. 内嵌样式

直接写在标签内部,用style属性的方式;这种方式使得css样式和html标签嵌在一起,不利于后面的维护,一般不建议使用这种方式。

this is a paragraph

复制代码

语法

总语法

在大括号前面是选择器,在大括号里面是属性声明;

每个属性生命需要用分号来分隔(最后一个属性可以不写分号,但是为了以后的维护,我们一般在最后一个属性后也写上分号);

每一个属性由属性名和属性值组成,中间用冒号来分隔;(属性名:属性值)

注释:/*   注释内容  */

/*用户列表*/.m-userlist{    margin:0 0 30px 0;}.m-userlist .list{    position:relative;    height:93px;    overflow:hidden;}.m-userlist .list ul{    margin:-13px 0 0 -13px;    zoom:1;}复制代码

@规则

  • @media 主要是一些响应式的布局
  • @keyframes 主要是用来描述css动画的中间步骤
  • @font-face 引入外部字体

浏览器私有属性

浏览器厂商会实现一些还没有成为标准的属性,为了区分标准属性,浏览器会在属性前加一些前缀

  • chrome、safri -webkit-
  • Firefox -moz-
  • IE -ms-
  • opera -o-

为了兼容这些私有的属性,我们会把这些私有属性写在前面,将标准属性写在后面,

.pic{    -webkit-transform:rotate(-3deg);    -moz-transform:rotate(-3deg);    -ms-transform:rotate(-3deg);    -o-transform:rotate(-3deg);    transform:rotate(-3deg);}复制代码

未完待续

转载于:https://juejin.im/post/5aaa78416fb9a028c06a8f75

你可能感兴趣的文章
yii 和 zend studio 集成
查看>>
红帽7搭建httpd的三种模式(基于主机,端口,IP)
查看>>
LTP--linux稳定性测试 linux性能测试 ltp压力测试
查看>>
liunx下把网站文件压缩为zip文件备份提供给ftp下载
查看>>
Java发送邮件
查看>>
java--时间浅谈
查看>>
SQL Server以Online模式创建索引
查看>>
《FreeKick》战术_游戏前线
查看>>
extmail 界面修改
查看>>
XP如何重装Internet Explorer
查看>>
github
查看>>
shell基础应用
查看>>
python pip源配置
查看>>
clamav杀毒软件部署笔记
查看>>
小测试
查看>>
涨姿势一下:#include<>和#include""的区别
查看>>
quartz spring配置
查看>>
centos备份与还原
查看>>
fixed 兼容ie6
查看>>
To Be an Architect : 架构的一些基本概念
查看>>