css小知识

1.什么是css?

中文名:层叠样式表

英文名:Cascading Style Sheets

英文缩写:CSS

其他称呼:级联样式表

2.css选择器种类

  • 通配选择器
  • 类型选择器
  • ID选择器
  • 类选择器
  • 包含选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 属性选择器

3.css选择器权值计算:

      

4.css盒子模型:

css盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型

css盒子模型具有属性:内容(content)、填充(padding)、边框(border)、边界(margin)

5.css3动画

@-webkit/o/ms/moz-keyframes bgMove{
  from{
    background-position:
0 center;
  }
  to{
    background-position:
-1920px center;
  }
}

-webkit/o/ms/moz-animation:

animation-name(动画名), animation-duration(动画时间),

animation-timing-function(动画播放方式,默认为ease平滑过度,linear线性),

animation-delay(延长多少时间执行),animation-iteration-count(播放次数,infinite为无限循环),

animation-direction(normal:正常方向alternate:正常与反向交替 );

6.css定位:

static:对象遵循常规流。toprightbottomleft等属性不会被应用。

relative:对象遵循常规流,并且依据自身在正常流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。

absolute:对象脱离常规流,使用toprightbottomleft等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。

fixed:对象脱离常规流,使用toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动

7.css过渡:

transition:过渡属性(style),过渡时间(S),过渡方式(linear
| ease | ease-in | ease-out | ease-in-out),延时执行时间(s);

8.css继承和不可继承属性:

css不可继承属性:

display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align。

css可继承属性:

所有元素可继承:visibility和cursor。

内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、
font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承:text-indent和text-align。

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承:border-collapse。

9.css3属性选择器

[att=value]
 该属性有指定的确切的值。
[att~=value] 该属性的值必须是一系列用空格隔开的多个值,(比如,class=”title featured home”),而且这些值中的一个必须是指定的值”value”。
[att|=value] 属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符,也就是“value-”。(比如lang=”zh-cn”)
[att^=value] 该属性的值以指定值开始。

[att$=value] 该属性的值包含指定的值(而无论其位置)。
[att*=value] 该属性的值以指定的值结束

10.css3否定选择器

input:not([type="submit"])
{   width: 200px;   padding: 3px;   border: 1px solid #000000;
  }

11.css3兄弟选择器

(1).临近兄弟组合

该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲,而且第二个必须紧紧的跟着第一个。

p + h2 {
  margin-top: 10px;   }

(2).普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像,不同的是第二个选择其无需紧紧跟随第一个。

.post h1 ~ p {
  font-size: 13px;  }

时间: 2024-08-05 11:17:53

css小知识的相关文章

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器

12个css小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如:无法显示的图片的alt文字list元素的边框无序list元素前面的小点有序list元素前面的数字还有hr元素 2.CSS里的visibility属性有个collapse属性值:collapse对于CSS里的visibility属性,相信你用过不下

一些常被你忽略的CSS小知识

1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它 可以把页面上的所有的东西都变颜色.比如: 无法显示的图片的alt文字. list元素的边框.无序list元素前面的小点.有序list元素前面的数字和hr元素等 1: <html> 2: <head> 3: <meta http-equiv="cont

CSS小知识---table表格

所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jq

CSS小知识---回到顶部

所需js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 在body中添加 <a id="goTop" class="gotoTop" href="#"><img src="images/top.png"></a> .gotoTop的sty

11个提高CSS技巧的小知识,你知道吗?

前端开发越来越侧重于效率和性能,使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利.但是也有很多简单的方法可以编写小巧快速的CSS代码,提高开发效率并解决许多常见的问题. 1.使用CSS reset 像normalize.css这样的CSS重置库非常受欢迎,它为您的站点样式提供了一个清爽的选择,能确保浏览器之间更好的一致性.而实际上并不是每个项目都需要这些库中包含的所有规则,我们可以通过一些简单的css规则就能规避浏览器之间的差异.请看下面的盒模型代码: 1 * { 2

html、css中常用的小知识记录

好多东西过一段时间不用就忘记了,为此写了这篇文章,用来记录每次想不起来的小知识! 1.鼠标停留显示提示,使用title .如:title