HTML标签
<div>布局标签 <h1-h6>标题标签 <p>段落标签 <a>超链接标签 <b>粗体文本
<span>内容标签 <button>按钮标签 <table>表格标签 <ul>无序标签 <li>搭配ul使用<link>引入外部样式 <style>css内部样式 <script>JS内部样式 <select>下拉框
<Input>输入框标签 <i>斜体文本标签 <big>大号字体标签 <img>嵌入图片标签
<input type=”text”>文本框 placeholder默认值 <input type=”date”>日历控件 <input type=”button” value=”按钮”> <input type=”checkbox”>勾选框 <input type=”color”>调色板
<input type=”file”>选择文件 <input type=”password”>密文框 <textarea>文本域
-
display:block将行内元素转换为块级元素 inline将块级元素转换为行内元素
inline-block行内块级元素
-
background:no-repeat图片背景不重复 background-position:背景位置 background-color:背景颜色 background-size背景的尺寸 background-repeat背景重复 background-image:url(“”)背景图片 background是复合属性
-
text-decoration文字修饰 none取消修饰线 underline下划线 overline上划线
line-through中划线
-
position定位 relative相对定位 absolute绝对定位 fixed固定定位
-
width宽度 height高度 auto自动 margin外边距 padding内边距 cover包裹 float浮动(浮动可以将行内元素块级化) clear清除浮动 border边框 border-style边框样式 font-size字体大小 color字体颜色 left左 right右 top上 bottom下 ::before伪元素开头 box-sizing:盒子的样式
::after伪元素结尾 zoom兼容IE8以下浏览器 opacity:透明度0-1
CSS样式表的基本使用 内联样式>内部样式>外部样式
为文档添加样式的4种方式:
1、使用内联样式:直接将样式定义到HTML元素中(写在标签里)。
这种作用范围有限,只影响它所在的标签,
而且总是覆盖嵌入样式和链接样式。
<div style="width:200px;height:200px;"></div>
2、使用内部样式:写在<style>标签中。作用范围仅限于当前页面,
内部样式覆盖链接样式,但
也会被内联样式覆盖。
<style type="text/css"> CSS样式</style>
3、链接样式:写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。
只要使用<link>
标把样式表链接到页面,相应页面就可以使用样式。
<link href="链接表地址" rel="stylesheet" type="text/css"/>
4、@import指令导入外部样式文件:和链接样式类似。
引用@import指令在某些浏览器(IE)
可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。
而是尽量使用
链接外部样式表。
<style type="text/css">@import url(地址);</style>
CSS选择器
1、CSS样式的语法格式:
p {color:red;} 元素选择器(元素选择器是最简单的选择器)
选择器 属性 值
根据这个结构我们可以扩展:
例如:p{color:red;font-size:14pt;font-weight:bold;}
h1,p,a{color:blue;font-size:14pt;}//组合选择器
2、所有用于选择特定元素的选择器分三种:
上下文选择器(迭代选择器):基于祖先或同胞元素选择一个元素
ID和类选择器:基于id#和class的属性值进行选择元素。
属性选择器:基于属性的有无和特征进行选择。
①上下文选择器:
上下文选择器的语法格式:标签1 标签2{属性:值;}
//注意:组合选择器和上下文选择器的区别,组合选择器以逗号隔开,
上下文选择器以空格隔开
②特殊的上下文选择器
子选择器> :
语法格式:标签1>标签2 解释说明:标签1和标签2是父子关系。
紧邻同胞选择器+ :
语法格式:标签1+标签2 解释说明:标签2紧跟同胞标签1的后面。
一般同胞选择器~ :
语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器,标签1、2是同胞即可,不一定紧挨着。
通用选择符* : * .
解释说明:通用选择器*是一个通配符,匹配任何元素。
③id选择器和class选择器
id选择器:语法格式: #idValue
class选择器:语法格式: .classValue
④属性选择器
属性名选择器:
语法格式:标签名[属性名]
属性值选择器:
语法格式:标签名[属性名="属性值"]
伪类
没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器):
UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),
为该元素应用CSS样式。hover
结构化伪类:会在标记中存在某种结构上的关系时(
例如:某元素是一组元素中的第一个或最后一个),
为该元素应用CSS样式。
:not和:target(CSS3新增的两个特殊的伪类选择器)
UI元素状态伪类选择器有如下几个:
Selector:link :匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited :匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover :匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:active :匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)
的状态的元素。
Selector:focus :匹配Selector选择器且已得到焦点的元素。
Selector:enabled :匹配Selector选择器且当前用于处于不可用状态的元素。
Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。
Selector:checked :匹配Selector选择器且当前处于选中状态的元素。
Selector:default :匹配Selector选择器且页面处于打开时选中状态的元素
(即使当前没有被选中亦可)。
Selector:read-only :匹配Selector选择器且当前处于只读状态的元素
Selector:read-wirte :匹配Selector选择器且当前处于读写状态的元素
Selector:selection :匹配Selector选择器的元素中当前被选中的内容。
特别提示:1、一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。
2、上面的Selcotor选择器可以省略,如果省略则可以匹配处于某种
状态下的多个元素。
结构化伪类
Selector:root :匹配文档的根元素。在HTML文档中,根元素永远是<html>元素
Selector:first-child : 表示一组同胞元素中的第一个元素。
Selector:last-child : 表示一组同胞元素中的最后一个元素。
Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)
Selector:only-child : 匹配符合Selctor选择器,而且必须只有一个子节点。
还有其他的几个结构化选择器:和上面的类似
Selector:first-of-type
Selector:last-of-type
Selector:nth-of-type(n)
Selector:nth-last-of-type(n)
Selector:empty
特殊的伪类选择器
Selector1:not(Select or2)匹配Selector1,但不匹配Selector2,相当于从Selector1中减去Selector2
Selector:target(target 目标)说明:如果用户点击一个指向页面中其他元素的链接则那个元素就是目标(target)
层叠
层叠规则:
①层叠规则一:找到应用给每个元素和属性的声明。
说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则,
并标识出所有受到影响的HTML元素。
②层叠规则二:按照顺序和权重排序。
按顺序:说明:浏览器依次检查CSS样式的来源,并设定匹配的属性,如果
匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环。
权重排序:!important
③层叠规则三:按特指度排序。
计算特指度(ICE 公式)
I C E
id class Element
1.选择器中有一个ID,就在I的位置上加1;
2.选择器中有一个类(class),就在C的位置上加1;
3.选择器中有一个元素(标签)名,就在E的位置上加1;
4.得到一个三位数。得到的这个数就是我们的特指度。
例如: I C E
p 0 0 1 特指度=1
p.largetext 0 1 1 特指度=11
p#largetext 1 0 1 特指度=101
body p.largetext 0 1 2 特指度=12
body p#largetext 1 0 2 特指度=102
④层叠规则四:顺序决定权重。
说明:如果两条规则都影响到某元素的同一属性,而它们的特制度也相同,
则位置最靠下的胜出。
规则一:在特指度相同的情况下,按排列顺序
字体的相关属性
color:该属性用于控制字体颜色,该属性值包括字符类型的颜色名、十六进制的颜色值、
rgb(255,255,255)值。还有CSS3提供的HSL颜色值。
font-famliy:设置文字的字体。因为浏览器内嵌字体的支持,该属性可以设置多个显示字体,
浏览器按该属性指定的多个字体依次搜索,以优先找到的字体来显示文字,
多个属性值之间用逗号(,)隔开。
font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。
还可以使用关键字。例如:medium,samll,large,samller,larger等
绝对字体大小:使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小,
它们是绝对单位,设置多大就是多少,不会受到祖先元素的字体大小影响。
相对字体大小:使用百分比(%),em或者rem,这些单位的值是相对的,该字体
的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定,
比绝对字体大小的设定要复杂点。
font-style:设置字体的风格。属性值有:normal(正常),italic(斜体),oblique(倾斜)。
font-weight:设置字体是否加粗。属性值:lighter,normal,bold,bolder.
font-variant:设置文字的大写字符的格式。属性值:normal,small-caps(小型的大写字母字体)
font: 简写。简写规则:规则一:必须声明font-size和font-famliy的值
规则二:声明顺序
①font-weight,font-style,font-variant不分先后
②然后是font-size
③最后是font-famliy
文本属性
text-decoration:该属性用于控制文字是否有修饰线。属性值:none,underline(下划线),
line-through(中划线),overline(上划线),blink(闪烁)
text-align:设置文本对齐。属性值:center,left,right,justify(两端对齐)。
text-shadow:该属性用于设置的文字是否有阴影效果。
color:指定该阴影的颜色。
xoffset:指定阴影在横向上的偏移。
yoffset:指定阴影在纵向上的偏移。
radius:A指定阴影的模糊半径。模糊半径越大,阴影看上去越模糊。
多重阴影:多加几组数据即可。
sytle="text-shadow:5px 5px 2px #cf0"
line-height:设置文字的行高,即字体最低端与字体内部顶端之间的距离。
负值的行高可以实现阴影效果。
text-transform:设置文字的大小写。属性值:none,capitalize(首字母大写),
uppercase(全部大写),low ercase(全部小写)
letter-spacing:设置字符之间的间隔。
word-spacing:设置单词之间的间隔。
边框的相关属性
宽度(border-width):可以使用thin,medium,thick等文本值,也可以使用除百分比和负数之外
的任何绝对值。
样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),
dashed(虚线边框),solid(实线边框),double(双线边框),
groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框),
outset(3D凸出边框)等文本值。
颜色(border-color):可以使用任何颜色值,包括RGB,HSL,十六进制颜色值和颜色相关的关键字。
CSS3提供的圆角边框:border-radius:该属性用于指定圆角边框的圆角半径。
border-top-left-radius:该属性用于指定左上角的圆角半径。
border-top-right-radius:该属性用于指定右上角的圆角半径。
border-bottom-left-radius:该属性用于指定左下角的圆角半径。
border-bottom-right-radius:该属性用于指定右下角的圆角半径。
CSS3新增的box-shadow属性为盒模型添加阴影,该属性可用于整个盒模型添加阴影。
box-shadow:是一个复合属性。它含有以下5个属性值。
hOffset:该属性值控制阴影在水平方向的偏移。
vOffset:该属性值控制阴影在垂直方向的偏移
blurLength:该属性值控制阴影的模糊程度。
scaleLength:该属性值控制阴影的缩放程度。
color:该属性值控制阴影的颜色。
{box-shadow:10px }
盒模型
盒模型:所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要
由三个属性控制:position属性、display属性和float属性。
position属性控制页面上元素间的位置关系。
display属性控制元素是堆叠、并排或者不在页面上显示。
float属性提供控制的方法,以便于把元素组成成多栏布局。
盒模型讲解:在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。所以我们
不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始,这些属性分为3组:
1、边框(border):可以设置边框的宽度、样式、颜色。
2、内边距(padding):可以设置盒子内容区(content)和边框的间距。
3、外边距(margin):可以设置盒子和邻元素的间距。
解释:内容(content)就是盒子里装的东西。
内边距(padding)怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料。
边框(border)就是盒子的本身。
外边距(margin)就是两个盒子之间的距离。
一个盒子有4条边,因此与边框、内边距、外边距相关联的属性也各有4个,分别是
上(top)右(right)下(bottom)左(left)
border-top,border-right,border-bottom,border-left
padding-top,padding-right,padding-bottom,padding-left
margin-top,margin-right,margin-bottom,margin-left
简写样式:
CSS为margin,border,padding分别规定了简写属性,通过一条声明就可完成设定。
在每个声明中,属性值得顺序都是上右下左的顺序,想象一下顺时针旋转就可以了。
例如:{margin-top:3px;margin-right:4px;margin-bottom:5px;margin-left:7px;}
简写:{margin:3px 4px 5px 7px;}
有时不需要将4个值全部写出,哪一边没写,就用对边的值。
{margin:3px 4px 5px;}那么左边的值就和右边的值一样,4px。
{margin:3px 4px;}
{margin:3px;}
背景
背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性。
background-color:背景颜色。
background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color)
-
景图片(background-image),背景颜色会被背景图片覆盖。该属性需要使用url()函数指定图片地址,图片的地址既可以是相对的,也可以是绝对的。
background-repeat:用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前,必须先指定背景图片(background-image)
-
属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。
-
background-position:用于控制背景图片的位置。background-position有5个关键字值分别是:top,left,bottom,right,center。可以通过任意两个关键字组合来定位。也可以通过百分比来定位。例如:background-position:50% 50%。第一个百分比对应横坐标,第二个百分比对应纵坐标。
-
background-attachment:设置背景图片是随对象内容滚动还是固定。在指定该属性之前,必须先指定背景图片。该属性的两个值:scroll(默认),fixed(固定)。
background:这是一个复合属性,可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。
浮动
在页面布局时,一般用float属性来实现多栏布局,导航菜单等等。
浮动(float)的三个属性值:left(左浮动),right(右浮动),none.
浮动的意思就是把元素从常规的文档流中拿出来,浮动的元素在脱离了常规的文档流之后,
原来紧跟其后的元素就会在空间允许的情况下,向上提升到浮动元素平起平坐。
如果想要浮动元素紧跟的元素停留在原始的位置,不跟着浮动,就对该元素设置clear的属性值。
浮动(float)的三个属性值:left(左浮动),right(右浮动),none.
clear(清除浮动)的三个属性值:left(清除左侧浮动),right,both
display属性
在html的元素中我们将元素分为块级元素和行内元素。
块级元素默认占据一行,允许通过CSS设置宽度和高度。例如<div> <p>元素。
行内元素不会占据一行,默认允许在一行中可以放置多个元素。
即使通过CSS设置宽度和高度也不会的作用。例如:<a>
块级元素的display属性值默认为block,行内元素的display属性默认值为inline.
那么我们可以通过设置display属性值去改变块级元素和行内元素。
display的三个属性值:block,inline,none(用于设置目标属性隐藏,隐藏之后, 其占用的页面空间也会释放)。
控制组件的滚动条
CSS提供了overflow,overflow-x,overflow-y这三个属性来控制
html组件不够容纳内容时的显示方式。这三个属性的功能基本相似,区别就是控制的方向不同。
overflow同时控制两个方向,overflow-x控制水平方向,overflow-y控制垂直方向。
属性值:hidden,auto
CSS3 transform变形
transform:该属性用于设置变形,该属性支持一个或多个变形函数。
rotate(angle):该函数用于设置元素旋转的度数。例如:transform:rotate(30deg);
skew(sx,yx):该函数用于设置元素的一个扭曲效果。例如:transform:skew(10deg,20deg);
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵,
后面的dx,dy主要是指在坐标轴上的一个偏移量。
变形-旋转
旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。
它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。
如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,
元素相对原点中心逆时针旋转
扭曲
扭曲skew()函数能够让元素倾斜显示。
它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。
skew()函数不会旋转,而只会改变元素的形状。
Skew()具有三种情况:
1、skew(x,y)使元素在水平和垂直方向同时扭曲
(X轴和Y轴同时按一定的角度值进行扭曲变形);第一个参数对应X轴,
第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
缩放
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况:
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放(X轴缩放)
3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
位移
translate()函数可以将元素向指定的方向移动,类似于position中的relative。
或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,
而不影响在X、Y轴上的任何Web组件。
translate我们分为三种情况:
1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
2、translateX(x)仅水平方向移动(X轴移动)
3、translateY(Y)仅垂直方向移动(Y轴移动)
矩阵
matrix() 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵,用来指定一个2D变换,
相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。就是基于水平方向(X轴)和
垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,
我在这里只是简单的说一下CSS3中的transform有这么一个属性值,
如果需要深入了解,需要对数学矩阵有一定的知识。
原点
变形–原点 transform-origin:
任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、
位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,
我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,
以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似,如下表所示:
关键字 百分数
top=top center 50% 0
left=left center 0 50%
bottom=bottom center 50% 100%
right=right center 100
center=center center 50% 50%
top left=left top 0 0
top right=right top 0 100%
bottom left =left bottom 100% 100%
bottom right=right bottom 100% 0
动画-过度属性
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。
但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,
让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发,
并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性:
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition-property属性:
transition-property指定对THML元素的哪个css属性进行平滑渐变处理,该属性可以指定
例如background-color,width,height等各种标准的CSS属性。
特别注意:当“transition-property”属性设置为all时,表示的是所有中点值的属性。
用一个简单的例子来说明这个问题:
假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性,
那么all代表的就是“width”、“height”和“background”。
如果你的终始状态只改变了“width”和“height”时,那么all代表的就是“width”和“height”。
过度所需的时间
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,
也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。
过度函数
transition-timing-function属性指的是过渡的“缓动函数”。
主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:
ease:默认值,动画开始时比较慢,然后加快速度,达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样(匀速)。
ease-in:动画开始的速度较慢,然后速度加快。
ease-out:动画开始的速度很快,然后速度减慢。
ease-in-out:动画开始时比较慢,然后加快速度,达到最大速度后再减慢速度.
过度延迟时间
transition-delay属性和transition-duration属性极其类似,不同的是transition-duration
是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,
也就是说当改变元素属性值后多长时间开始执行。
有时我们想改变两个或者多个css属性的transition效果时,
只要把几个transition的声明串在一起,用逗号(“,”)隔开,
然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点:第一个时间的值为 transition-duration,第二个为transition-delay。
动画与变形
transform transition animation
这三大属性来实现我们的变形与动画效果。
transform是CSS3提供的一个变形的属性支持,可以对HTML元素进行常见的几何变换,
包括旋转,缩放,扭曲,位移4种变换。
也可以使用矩阵。
transform:该属性用于设置变形。该属性支持一个或多个变形函数。
CSS3提供的变形函数:
rotate(angle):该函数用于设置元素旋转的角度。
skew():该函数用于设置元素的一个扭曲效果。
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵4
后面的dx,dy主要是指在坐标轴上的一个偏移量。
喜欢
(0)
打赏
- 支付宝扫一扫
- 微信扫一扫