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.容器宽度；width: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>
行内级置换的宽度定义
若宽高的计算值都为 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>hello word</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来计算元素的偏移量
二、包含块的概念及作用

posted @ 2019-09-27 15:03 文杰_豆豆阅读(203) 评论(0) 编辑收藏举报

刷新页面返回顶部

文杰_豆豆

冷暖自知！

css笔记

公告