css笔记

• css

• 内部样式

• 语法：<style type="text/css"></style>

• *方法一：外部样式表的创建：

• <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

• *方法二：外部样式表的导入

• <style type="text/css">

• @import url(目标文件的路径及文件名全称);

• </style>

• 四、两种引入外部样式表link和import之间的区别

• 差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。

• 差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。

• 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

• 差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

• 六、CSS选择符（选择器）

• CSS选择符包括4大类：类型选择符、id选择符、class选择符(类选择符)、特殊选择符；

• 类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名)，伪元素选择符(设置在对象后发生的内容。用来和content属性一起使用 )

• 1） 元素选择符/类型选择符（element选择器    )

• 语法：元素名称{属性：属性值；}

• 2) id选择器

• 语法：#id名{属性：属性值;}

• B）id选择符的语法格式是“#”加上自定义的id名

• C) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)

• D）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。

• E) 最大的用处：创建网页的外围结构。

• 3）class选择器

• 语法：.class名{属性：属性值;}

• 用法：class选择符更适合定义一类样式；

• 4)*通配符

• 语法：*{属性：属性值；}

• 说明：通配选择符的写法是“*”，其含义就是所有元素。

• 用法：常用来重置样式。

• 5）群组选择器

• 语法：选择符1，选择符2，选择符3{属性：属性值;}

• 6） 包含选择器

• 语法：选择符1  选择符2{属性：属性值;}

• 7） 伪类选择器(伪类选择符)

• 语法 ：

• :link{属性：属性值;}超链接的初始状态;

• :visited{属性：属性值;}超链接被访问后的状态;

• :hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;

• :active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;

• 要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。

• 说明：

• A）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：

• a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

• B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

• 例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

• 七、CSS选择符的权重

• css中用四位数字表示权重，权重的表达方式如：0，0，0，0

• 类型选择符的权重为0001

• class选择符的权重为0010

• id选择符的权重为0100

• 子选择符的权重为0000

• 属性选择符的权重为0010

• 伪类选择符的权重为0010

• 伪元素选择符的权重为0001

• 包含选择符的权重：为包含选择符的权中之和

• 内联样式的权重为1000

• 继承样式的权重为0000

• .demo的权重是10

• * 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。 （注意：是css样式中定义该选择符的先后，而不是html中使用先后）

• 八、浮动属性的简单应用

• 语法：float:none/left/right;

• left:元素活动浮动在文本左面

• right:元素浮动在右面

• none:默认值，不浮动。

• 1、文字大小{font-size：value；}

• b、单位还可以是pt;  9pt=12px;

• c、为了减小系统的字体显示差异，IE、Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小，默认值即1em,默认情况下，1em=16px,    0.75em=12px;

• d、使用绝对大小关键字

• xx-small         =9px

• x-small           =11px

• small              =13px

• medium         =16px

• large             =19px

• x-large         =23px

• xx-large       =27px

• 2、文本颜色：{color：#colorValue;}     

• 3、文本字体：{font-family:字体；}

• Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

• 当字体是中文字体时，需加双引号；

• 当英文字体中有空格时，需加双引号如（“Times New Roman”）

• 当英文字体只有一个单词组成是不加双引号；如：（Arial）；

• 设置多个字体的语法：{font-family:字体1，字体2，字体3；}

• 注：当同时设置中英文字体的时候，中文字体要写在英文字体之后；

• 说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

• 4、加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}

• 说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，

• 而900对应最重的字体变形，

• 一般400=normal，700=bold。

• 100-500 常规显示

• 600-900 加粗显示

• 5、倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;

• 6、设置小型的大写字母  {font-variant:normal/ small-caps ;}

• 取值为：normal(正常的字体)  

•               small-caps(小型的大写字母字体)

• 说明： 对小写英文内容起作用。

• 7、首行缩进：{text-indent：Value;}

• 说明：（1）text-indent可以取负值；

•       （2）text-indent属性只对第一行起作用。

• 8、水平对齐方式{text-align:left /  right / center / justify;}

• 9、垂直对齐方式{vertical-align:top/bottom/middle;}上  下   居中

• 10、行高{line-height：normal/value;}

• 说明：

• （1）当单行文本行高等于容器高时，可实现单行文本在容器中垂直中齐效果；

• （2）当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置定位;

• （3）当单行文本的行高大于容器高时，可实现单行文本在容器中垂直以下任意位置定位。

• 倍行高：{line-height:2;} 2倍 ，{line-height:1.5em;}1.5倍；注：当使用倍行高时，单位不加PX

• 11、复合式写法：{font：style variant weight size/line-height family；}

• style variant weight  size/ line-height     family

• 倾斜    小型大写字母     加粗       字号 /  行高       字体

• 说明：按以上顺序;size 、line-height和family固定不可和其他属性位置互换；

• 注：当字号大小，字体和行高缩写时，字号和行高要用斜杠合并成一个属性值，且同时有字号大小和字体时，才能缩写。

• font:字号/行高    字体

• 12、控制英文大小写  {text-transform:none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母) /lowercase ( 都为小写字母 ) }

• 13、文本修饰：

• {text-decoration: ;}

• 说明：

• none:没有修饰(取消修饰)

• underline:添加下划线

• overline:添加上划线

• line-through:添加删除线

• blink：闪烁(高版本浏览器不支持blink属性)

• underline overline line-through这三个属性值是可以同时存在的,用空格分隔；

• 14、字间距{letter-spacing：Value;}控制字间距；

• 15、词间距{word-spacing:Value;}控制英文单词词间距

• 16、文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）

• 说明：

• （1）horizontal 自左向右；

• （2）vertical-ideographic;自上而下；

• B、关于列表的css声明

• 1、定义列表符号样式：

• list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

• 2、使用图片作为列表符号：

• list-style-image：url(所使用图片的路径及全称)；

• 3、定义列表符号的位置：

• list-style-position:outside(外边)/inside(里边)；

• 关于列表的属性语法（缩写）list-style：属性值1   属性值2    属性值3；

• 例：{list-style:url(images/aa.jpg)   inside;}

•         list-style:none;   取消列表符号

• C、关于背景的css声明

• 1、背景颜色

• background-color:#colorValue;

• 2、背景图片的设置

• 语法：background-image：url(背景图片的路径及全称)；

• 说明：

• （1）网页上有两种图片形式：插入图片、背景图；插入图片为网页内容，背景图为网页的表现;默认情况下，背景图上面可以显示其他内容和图片，而插入图片上面是不能显示其他内容和图片的。

• （2）背景图片的显示方式

• a、背景图片大小小于元素大小，默认平铺；

• b、背景图片大小等于元素大小，完全显示；

• c、背景图片大小大于元素大小，只显示元素范围大小的背景图；

• 3、背景图平铺设置

• 语法：background-repeat：no-repeat（不平铺）/repeat(平铺)/repeat-x（横向平铺）/repeat-y（纵向平铺）;

• 4、背景图片的位置

• 语法：background-position:right/left/center(水平方向上的对齐方式)      top/center/bottom(垂直方向上的对齐方式) 或数值

• 5、 背景图的固定

• 语法：background-attachment：scroll(滚动)/fixed(固定)；

• 背景属性的缩写语法：background:属性值1   属性值2   属性值3；

• 例：background:url(背景图片的路径及全称)  no-repeat center top；

• 6、网页上常用的图片格式（压缩图片）

• （1）jpg：有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于颜色丰富的图像；

• （2）gif:有损压缩格式，靠损失图片的色彩来减小图片体积，支持透明，支持动画，适用于颜色数量

• 少的图像；

• （3）png:有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，是fireworks的源文件格式，适用

• 于颜色数值少的图像（一般用于透明图

• 语法：float:none/left/right;

• left:元素左浮动

• right:元素右浮动

• none:默认值，不浮动。

• 浮动的目的：就是让竖着的元素进行横向排列，也就是能让元素和元素并排显示

• 浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。

• float:定义网页中其它文本如何环绕该元素显示

• 清除浮动语法：

• clear : none | left | right | both

• none：默认值。允许两边都可以有浮动对象

• left：不允许左边有浮动对象

• right  :  不允许右边有浮动对象

• both  :  不允许有浮动对象

• 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素

• 清除浮动可以理解为打破横向排列。

• 有三种情况float:不生效

• 1）当宽+宽大于父级元素的宽时；

• 2）只给一个元素加了float时；

• 3）单词写错

 

• 盒模型

• 六、盒模型

• 盒模型概念：

• 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以像盒子一样的外形和平面空间

• ，即包含内容区、填充区（padding）、边框（border）、边界（margin）,这就是盒模型。

• 1、填充（padding）：padding是指在内容与边框的空白区域，也称补白。

• 作用：

•   (1)  用来调整子元素在父元素的位置关系；

• （2） 调整内容在容器中的关系；

•   注：padding写在父元素上

• 补充：1、padding属性处于内容与边框之间，我们可以利用该属性设置图片与边框间的空隙；

•  2、背景图不受padding值得影响；

• 2、边界：margin，在边框外边的空白区域，被称为边界。

• margin:0 auto； 定义元素上下边界为0，且在浏览器中横向居中；

• margin可以写负值

• 3、边框：border          

•        作用：网页中很多修饰性的线条都是由边框来实现；

•         边框宽度：border-width：2px;

•         边框样式：border-style：solid(实线)/ dotted（点）/ dashed（虚线）/ double（双边线）/none(取消边框)；

•         边框颜色：border-color：#ff0f0f;

• border:1px solid #f00;

•         可单独设置一方向边框：

•        上边框 border-top:width  style  color;

•         左边框border-left:width  style  color;

•         右边框border-right:width  style  color;

•         下边框 border-bottom:width  style  color;

•        缩写(复合式写法)：border:width  style  color;

•       补充：border:none; 取消边框

• 盒子实际占有宽度区域

• 宽 =左右margin + 左右border + 左右padding + width

• 盒子实际占有高度的区域

• 高 =上下margin + 上下border + 上下padding + height

• 一、文本溢出属性：

• text-overflow:clip /ellipsis

• 取值：

• clip：不显示省略标记（...），而是简单的裁切。

• ellipsis：当对象内文本溢出时显示省略标记（...）

• 说明：

• text-overflow属性仅是注解当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：

• 1.容器宽度；value;

• 2.强制文本在一行内显示 ,   white-space:nowrap

• 3.溢出内容为隐藏,     overflow:hidden

• 4.溢出文本显示省略号，text-overflow:ellipsis;

• 二、关于文本溢出:

• 1. 溢出属性：

• overflow :visible/hidden/scroll/auto/inherit

• 值描述

• visible

• 默认值。内容不会被修剪，会呈现在元素框之外。

• hidden

• 内容会被修剪，并且其余内容是不可见的。

• scroll

• 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

• auto

• 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

• inherit

• 规定应该从父元素继承 overflow 属性的值。

• overflow-x:hidden; 隐藏横向滚动条

• overflow-y:hidden; 隐藏纵向滚动条

• 2.空余空间属性 (该属性用来设置如何处理元素内的空白；)

•   white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit   

• normal：默认值，空白会被浏览器忽略，

• nowrap:文本不会换行，文本会在同一行上继续，直到遇到标签<br />为止

• pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；

• pre-wrap：保留空白符序列，但是正常的进行换行；

• pre-line:合并空白符序列，但是保留换行符；

• inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)

• 1、块状元素：（block element）

• 2、内联元素：（inline element 称内嵌元素，行内元素，直进式元素等；）

• 4）内联元素也会遵循盒模型的规则，也可以定义padding、border、margin属性，但部分内联元素需要特殊处理后才能正确显示；

• 3、可变元素

• 4、元素转换

• display：none/block/inline/inline-block/list-item/table/ table-cell/table-header-group/table-footer-group

• none       ：此元素不会被显示（隐藏该元素）

• block     ：此元素将显示为块状元素；(显示该元素)

• inline      ：默认值，此元素会被显示为行内元素（内联元素）；

• inline-block：行内块元素  

• list-item：将元素转换为列表格式；   li

• 1、大部分块元素的display属性的默认值为block，其中列表(li)的默认值为list-item；

• 2、大部分内联元素的display属性为inline,其中input和img等默认类型为inline-block；

• *Html中的非置换元素与置换元素

• 大部分的内联元素的元素类型为inline,其中有类特殊的元素：如img|input|select|textarea|button等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素

• ,这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

• 补充：内联元素添加浮动后（float）；自动转换成(行内）块元素；在没有设置宽高的前提下，块元素添加浮动后（float）；体积与内容同宽；

• visibility：inherit/visible/collapse/hidden;

• 设置或检索对象是否显示

• 取值：

• a）inherit:默认值,继承父对象的特征；

• b）visible：对象显示；

• c）collapse：未支持，主要隐藏表格的行或列；能够被其他内容使用，对于表格外的其他对象不起作用，等于hidden；

• d）hidden：对象隐藏。

• display:none与visibility：hidden 的区别

• display：none;元素内容及占有的位置全部隐藏，

• visibility:hidden;元素内容隐藏，但位置保留。

• *Html中的非置换元素与置换元素

• 其中有类特殊的元素：如img|input|select|textarea|button等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）

• 是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

• 或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

• “An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

• 从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

• 置换元素/替换元素

• 1.1. 一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

• 1.2. 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

• 1.3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。

• 1.4. HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

• 非置换元素/不可替换元素

• 2.1. HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

•    <!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->     <span>hello word</span>

• 行内级置换的宽度定义

• 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度

• 典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

• 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度

• 例子同上

• 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比

• 典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因

• 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px

• 典型的例子：比如iframe, canvas

• 行内级置换的高度定义

• 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

• 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

• 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；

• 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍

• 行内级非置换元素的宽度定义

• 宽度设置是无效的，如：

•     <!-- 设置宽度无效 ，span的宽度默认为其内容的宽度 -->      <span>hello word</span>

• 行内级非置换元素的高度定义

• 高度设置无效，如：

•     <!-- 设置高度无效 ，span的高度默认为其内容的高度 -->      <span>hello word</span>

•  

• position 定位属性，检索对象的定位方式；

• 一、语法：position：static （无特殊定位）/absolute（绝对定位）/relative（相对定位）/fixed（固定定位）/sticky：　粘性定/inherit继承父元素的属性

• 1、static：默认值，无特殊定位，对象遵循HTML原则；

• 2、absolute：绝对定位，将对象从文档流中拖出，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父

• 对象，则依据窗口对象定位，而其层叠通过z-index属性定义；

• 3、relative ：相对定位，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；

• 4、fixed：(固定定位)，相对浏览器的定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

• 5、inherit：继承父元素的position属性，但需要注意的是IE8以及以前的版本都不支持inherit属性。

• 6、sticky：　粘性定位：设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固

• 定位置的效果。

• 可以知道sticky属性有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。

• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

• 二、包含块的概念及作用