CSS

2018-03-08  本文已影响5人  找个地方记录点东西

CSS

选择器

类选择器

.class

ID选择器

#idName

相同点可以应用于任何元素

区别

ID选择器为唯一表示,只能出现一次

类选择器:不同元素之间可以用同一类名

子选择器

应用于第一代元素 标识符  >

.className>元素标签{

}

应用于后代所有元素  标识符 空格

.className元素标签{

}

应用于后代所有元素 标识符 *

*元素标签{

}

伪类标签

常用a:hover

标签的权值为1,类选择符的权值为10ID选择符的权值最高为100

还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素内联元素(又叫行内元素)和内联块状元素

常用的块状元素有:(display:block)


      块级元素特点:

      1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

      3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

      常用的内联元素有:(display:inline

      内联元素特点:

      1、和其他元素都在一行上;

      2、元素的高度、宽度及顶部和底部边距不可设置;

      3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

      常用的内联块状元素有:(display:inline-block)

      内联块状元素特点:

      同时具备内联元素、块状元素的特点

      1、和其他元素都在一行上;

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

      盒子模型

      盒子边框属性

      1、border-style(边框样式)常见样式有:

      dashed(虚线)| dotted(点线)| solid(实线)。

      2、border-color(边框颜色)

      3、border-width(边框宽度)

      高度宽度

      左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

      div{

          width:200px;  //内容宽度

          padding:20px;//填充(top,right,bottom,left)

          (border-bottom,top,right,left):1px(solid dashed dotted)red;//边框

          (margin-bottom,top,right,left):10px;  //边界

      }

      css布局模型

      1、流动模型(Flow)

      流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

      在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示

      2、浮动模型(Float)

      实现两个块状元素并排显示 float:left,right.bottom,top

      3、层模型(Layer)(图层)

      层模型有三种形式:

      1、绝对定位(position: absolute)

      2、相对定位(position: relative)

      3、固定定位(position: fixed)

      HTML文档可以说由节点构成的集合,三种常见的DOM节点:(document object model)

      1. 元素节点:上图中、、

      等都是元素节点,即标签。

      2. 文本节点:向用户展示的内容,如

    • ...
    • 中的JavaScript、DOM、CSS等文本。

      3. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"。

      鼠标事件

      o’clock = 点击事件;

      onmouseonver = 鼠标经过事件

      onmouseout = 鼠标移开事件

      on focus = 光标聚焦事件

      nobler = 失焦事件

      unselect = 内容选定事件

      unchange = 文本框内容改变事件

      unload = 加载事件

      on unload = 卸载事件

      上一篇下一篇

      猜你喜欢

      热点阅读