本文共 2680 字,大约阅读时间需要 8 分钟。
1 css 层叠样式表
2 解决了一个问题:内容与表现的分离 3 样式的优先级:由低到高排列: 标签自带的样式 外部样式/内部样式,按照出现的先后顺序决定最后的样式,后出现的会覆盖之前出现的样式。 内联样式 4 样式的语法: 选择器 { 属性 : 属性值; .... 属性 : 属性值 } 5 选择器: 标签选择器 : 标签名来选择 a, div, p, span id选择器 : id="XXXX" 选择id值为XXXX的标签 #XXXX 类选择器 : class="YYYY" 选择class得值为YYYY的标签 .YYYY 继承关系: 空格 p span 表示选择p标签下所有的span标签 分组关系: 逗号 p, span, div 表示同时选择标签p,span和div 元素选择: 紧挨着的 p.aaaa, p#bbbb 表示p标签中具有类名为aaaa的和p标签中具有id为bbbb的p标签 属性选择器 [属性名] [属性名=属性值] [属性名~=属性值] [属性名|=属性值] [属性名^=属性值] [属性名$=属性值] [属性名*=属性值] 6 属性 背景: background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。 文本 color 设置文本颜色 line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本。 text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-transform 控制元素中的字母。 eg:转换成大写字母text-transform: uppercase word-spacing 设置字间距。 字体 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。 font-size 设置字体的尺寸。 font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 链接 链接的四种状态: a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻
列表 ol ul li
list-style-type : list-style-image : ulr() //自定义图标样式 list-style-position : outside / inside list-style 表格 tableborder-spacing //单元格与表格框之间的距离 border-collapse //单元格与单元格之间的距离 margin : 对齐方式 //设置当前元素的在对齐、text-align设置子元素的对齐 margin-top margin-right margin-bottom margin-left width td th border border-color border-width border-style padding padding-top padding-right padding-bottom padding-left text-align verticle-align 外边框 outline outline-style outline-color outline-width 7 盒子模型(框模型) 一个元素由内容,内边距,边框,外边距组成 背景的设置不包括外边距。 边框要有样式才能指定宽度,否则是指定不了宽度和颜色的。 边框 border 简写属性,用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。//需记熟职位,新手不建议使用 border-bottom-color 设置元素的下边框的颜色。 border-bottom-style 设置元素的下边框的样式。 border-bottom-width 设置元素的下边框的宽度。 border-left 简写属性,用于把左边框的所有属性设置到一个声明中。 border-left-color 设置元素的左边框的颜色。 border-left-style 设置元素的左边框的样式。 border-left-width 设置元素的左边框的宽度。 border-right 简写属性,用于把右边框的所有属性设置到一个声明中。 border-right-color 设置元素的右边框的颜色。 border-right-style 设置元素的右边框的样式。 border-right-width 设置元素的右边框的宽度。 border-top 简写属性,用于把上边框的所有属性设置到一个声明中。 border-top-color 设置元素的上边框的颜色。 border-top-style 设置元素的上边框的样式。 border-top-width 设置元素的上边框的宽度。 外边距 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 内边距 padding 简写属性。作用是在一个声明中设置元素的所内边距属性。 padding-bottom 设置元素的下内边距。 padding-left 设置元素的左内边距。 padding-right 设置元素的右内边距。 padding-top 设置元素的上内边距转载地址:http://krcws.baihongyu.com/