CSS3笔记总结.docx

CSS3笔记级联样式单与CSS选择器CSS样式单的使用引入外部样式文件HTML文档使用link…/元素引入外部样式文件使用内联样式内联样式只对单个标签有效，可以精确地控制元素的外观表现使用内部CSS样式一般不建议使用内部CSS样式，如果想让某些CSS样式仅对某个页面有效，而不影响整个站点，则应该使用内部CSS样式。CSS选择器元素选择器元素选择器是最简单的选择器，格式类同下面：属性选择器ID选择器class选择器包含选择器子选择器CSS3新增的兄弟选择器选择器组合伪元素选择器伪元素选择器只针对CSS中已有的伪元素起作用，伪元素选择器有：first-letter：对指定对象第一个字符起作用，仅对块元素起作用（如：div、p、section），内联元素(如span)使用该属性，必须设定某些属性first-line：对指定对象第一行起作用，仅对块元素起作用before：要与内容相关属性结合使用，在指定对象内部前端插入内容(后面才介绍)after：要与内容相关属性结合使用，在指定对象内部尾端插入内容内容相关的属性此处介绍的内容相关的属性，与前面的color、front-size等CSS属性的本质是相同的，CSS支持的内容相关属性有：content：用于向指定元素之前或之后插入指定内容，属性值可以是字符串、url(url)、attr(alt)、counter(name)、open-quote、close-quotequotes：用于为content属性定义open-quote和close-quotecounter-increment：该属性用于定义一个计数器counter-reset：用于指定的计数值复位CSS3新增的伪类选择器结构性伪类选择器简单介绍UI元素状态伪类选择器CSS3新增:not和:target伪类选择器字体与文本相关属性字体相关属性CSS为控制文本的字体提供了大量的属性，选部分测试CSS3支持的颜色表示方法文本相关属性文本相关属性用于控制整个段或整个div…/元素的显示效果，包括文字的缩进、段落内文字对齐方式等显示方式。CSS3新增的服务器字体使用@font-face定义服务器字体，语法格式如下：@font-face{font-family：name; //指定服务器字体名称src：url(url) format(fontformat); //字体文件路径，字体格式.ttf或者.otf}背景、边框和补丁相关属性背景相关属性：用于控制背景色、背景图片等属性，同时还可以控制背景图片的排列方式。边框相关属性：用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线条。补丁相关属性大小、定位、轮廓相关属性大小属性定位属性轮廓属性让目标对象周围有一圈“光晕”效果，不占用页面实际的物理布局盒模型与布局相关属性布局相关属性通过float属性实现多栏布局使用clear属性实现换行使用clip属性控制裁剪控制组件的滚动条盒模型和display属性最基本的盒模型HTML组件中呈现一片空白区域的组件都当成盒模型，如div、span、section，可通过display属性来控制盒模型的外观，最基本的盒模型分两种：block类型：默认占据一行，如div、pinline类型：不会占据一行，如span、a…/none值display属性可指定为none值，用于隐藏目标对象，且占用的页面空间会释放，而visibility属性则不会释放。inline-block盒模型inline-block盒模型是inline模型和block模型的综合体，既不会占据一行，同时也支持指定宽度和高度。使用inline-block可以实现前面的多栏布局，默认组件采用底端对齐方式，增加vertical-align：top即可。如1.1的只要采用inline-block盒模型，无须使用float属性。inline-table盒模型table…/元素属于block盒模型，占据一行，它的左边和右边都不允许出现其他内容，而设置inline—table盒模型后允许。通过添加vertical-align属性为top，可以使前后内容与表格顶端对齐。对盒添加阴影CSS3新增的分栏布局表格、列表相关属性表格相关属性表格相关属性：用于控制表格外观，如单元格边框显示方式、单元格宽度等列表相关属性变形与动画相关属性变形：旋转、缩放、倾斜、位移Transition动画Animation动画