HTML study notes (CSS) NO.3_html/css_WEB-ITnose

css指层叠样式表css样式表极大地提高了工作效率属性选择器selector{ property:value;}如h1{    color:red;  front-size:14px;}选择器分组如h1,h2,h3{    color:red;}将h1,h2,h3的标签属性设置成相同的属性继承：如body{  color:red;  }派生选择器:通过依据元素在其位置的上下文关系来定义样式id选择器：可以为有id的HTML元素指定特定的样式，以#来定义目前比较常用的方式是id选择器常常用于建立派生选择器如#在html中通过id属性来定义的标签{ 属性：值；}#在html中通过id属性来定义的标签  内部嵌套的子标签名称{ 属性: 值；}类选择器：类选择器以一个点显示class也可以作为派生选择器如首先在表现中以class关键字指定其class名称然后在CSS中使用如下方式：.指定的class名称{   性质：值；}属性选择器：对带有指定属性的HTML元素设置样式属性选择器，属性和值选择器在IE6一下版本是不支持的方式：<style type="text/css">        [title]{            color:blue;        }        [title=te]{            color:red;        }    </style>然后在指定的标签内指定title属性值即可改变颜色CSS样式->字体、连接、列表、表格、轮廓CSS背景：CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果background-attachment      背景图像是否固定或者随着页面的其余部分滚动background-color       设置元素的背景颜色background-image       把图片设置为背景background-position     设置背景图片的起始位置background-repeat        设置背景图片是否及如何重复background-size            规定背景图片的尺寸background-origin      规定背景图片的定位区域background-clip          规定背景的绘制区域CSS文本：CSS文本属性可以定义文本外观通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进*表示比较常用的color        文本颜色*direction  文本方向line-height 行高letter-spacing    字符间距text-align  对齐元素中的文本*text-decoration    想文本添加修饰text-indent  缩进元素中文本的首行*text-transform   元素中的字母*unicode-bidi 设置文本方向white-space   元素中空白的处理方式word-spacing  字间距text-shadow  向文本添加阴影word-wrap    规定文本的换行规则CSS的字体：css可以定义文本的字体系列、大小、加粗、风格和变形font-family   设置字体系列font-size 设置字体的尺寸font-style   设置字体风格font-variant  以小型大写字体或正常字体显示文本font-weight 设置字体的粗细CSS的连接：四种状态a:link        普通的、未被访问的连接a:visited    用户已访问的连接a:hover     鼠标指针位于连接的上方a:active 正在被点击常见的连接样式：text-decoration属性大多用于去掉连接中的下划线CSS列表：CSS列表允许防止、改变列表标志，或者将图像作为列表标志list-style     简写列表项list-style-image   列表项图像list-style-position    列表标志位置list-style-type       列表类型一般以ID方式进行标记的话用在框架级别上，而class方式用在具体内容细节方面，一些数据的构造等方式CSS的表格：表格属性可以帮助我们极大的改善表格的外观boder-collapse     折叠边框(即只有一条线)border          边框显示CSS的轮廓：主要是用来突出元素的作用outline          设置轮廓属性outline-color     设置轮廓颜色outline-style     设置轮廓的样式outline-width        设置轮廓的宽度CSS盒子模型：盒子模型包括margin（外边距）、border（边框）、padding（内边距）、content（包含宽和高width、height）部分内边距属性（内边距在content外，边框内）padding         设置所有的边距padding-bottom       设置底边距padding-left       设置左边距padding-right      设置右边距padding-top        设置上边距CSS边框：可以创建出效果出色的边框，并且可以应用于任何元素边框样式：通过关键字border-style关键字可以定义10中不同非继承样式（包括none）可以进行单边框样式的更改：上下左右四个方向border-top-styleborder-bottom-styleborder-left-styleborder-right-style边框的宽度：border-widthborder-上下左右-width边框颜色border-colorborder-上下左右-colorCSS3边框：border-radius       :圆角边框box-shadow     :边框阴影border-image       :边框图片对于阴影效果有四个参数：1、向右移动几个像素2、向下移动几个像素3、阴影的透明度4、颜色外边距margin：marginmargin-上下左右外边距具有叠加的性质，如果两个样式的东西挨着设计margin则margin选择最大值得那个样式的margin值CSS定位：改变元素在页面上的位置定位机制：普通流->元素按照在其HTML中的位置顺序决定排布的过程浮动绝对布局CSS的定位属性：position     把元素放在一个静态的、相对的、绝对的活固定的位置中top            元素向上偏移量bottom           元素向下偏移量right            元素向右偏移量left         元素向左偏移量overflow     设置元素一处其区域发生的事情clip          设置元素显示的形状vertical-align     设置元素垂直对齐方式z-index           设置元素的堆叠顺序position属性：static/relative/absolute/fixedabsolute效果是不再占用页面的位置static时任何偏移量的关键字对齐都不产生影响fixed当内容可以进行滚动时，fixed的内容不会滚动CSS的浮动：float属性->left       元素向左浮动right     元素向右浮动none      元素不浮动inherit        从父级继承浮动属性clear属性：去掉浮动属性（包括继承来的属性）clear属性值：left/right：去掉元素向左向右的浮动both：左右两侧均去掉浮动inherit：从父级继承来的clear的值