html+css小总结 来源：本站原创 发布时间：2013-02-18 15:34:52 浏览次数： 次 【字体：小 大】 html+css小总结 1、块级元素 2、行内元素 等 多个可以并排显示，默认设置宽度是不起作用的，需设置 display: inline-block或者block才行，或者加padding-left和padding-right。 3、常用符号 双引号"(") &(&) >(>) <(<) 空格( ) 版权 (©) 注册商标 (®) 乘号 (×)除号 (÷) 4、选择器 类选择器： css中: .a{…;} ID选择器： css中: #a{…;} 后代选择器： css中： .a空格.b{…;} 群组选择器： css中： .a,.b{…;} 标签选择器：sds css中： a{…;} 5、css样式写法及优先级 外部样式表: 内部样式表: hr {color: sienna;} 内联样式: This is a paragraph 样式的继承: 子标记会继承父标记的样式 样式的优先级: 内联样式>内部样式>外部样式 浏览器内部也有一个默认的样式 6、font字体 font-style:{normal|italic}默认值、斜体 font-variant{normal|small-caps}默认值、小型大写字母 font-weight{normal|bold|bolder|lighter|100-900}默认值、粗体、更粗、更细、400等于normal font-size/line-height{X%|Xpx} font-family 缩写格式：font:font-style font-variant font-weight font-size line-height font-family 代码示例：p {font:italic normal bold 12px/18px 宋体;} 注意，缩写字体定义，至少要定义font-size和font-family两个值。 7、文本属性 text-align:{left (缺省值)|right|center|justify(两端对齐)} text-decoration:{none (无，缺省值)underline (下划线) overline (上划线) line-through (当中划线)} text-indent:{文本缩进属性} line-height:{行高属性 normal (缺省值)} letter-spacing:{字间距属性 normal (缺省值)} color 前景颜色，一般用子文本 8、背景 背景：格式: background: {属性值} background-color：{颜色值|transparent(默认值）} 属性设置元素的背景颜色。 background-image：{URL（url）} 把图像设置为背景。 background-repeat:{repeat|no-repeat|repeat-X|repeat-Y} background-attachment:{fixed|scroll} 背景图像是否固定或者随着页面的其余部分滚动 background-position:{top left|top center|top right…} 属性设置背景图像的起始位置。 代码示例：body{background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center; } 9、margin与padding边距 margin:margin-top margin-right margin-bottom margin-left padding:padding-top padding-right padding-bottom padding-left padding:10px 20px 30px 40px; 上 右 下 左 p {margin:20px 10px;} 上下 左右 p {margin:20px 10px 100px;} 上20px 左右10px 下100px 10、border边框 border-width border-style:{none|dotted|dashed|solid}无边框、点状边框、虚线、实线 border-color 语法格式： border:border-width border-style border-color 代码示例： p {border:1px solid blue;} border-width:1px 2px 3px 4px; 上 右 下 左 11、list列表 list-style-type:{none|disc|circle|square|…}无标记、默认实心圆、空心圆、实心方块 list-style-position:{inside|outside}列表项目标记放置在文本以内、默认值保持标记位于文本的左侧 list-style-image:{URL|none} 语法格式： list-style:list-style-type list-style-position list-style-image 代码示例： ul {list-style:none outside url("/i/arrow.gif");} 12、a标签 使用文本作为链接： " target="_blank">baidu target:链接中的内容在哪儿打开 _blank:在新的窗口中打开 _self:在当前窗口打开（默认） a:link { color: red} 没有访问时 a:visited { color: blue} 访问后 a:active { color: lime} 鼠标点击但还没有放开时 a:hover { color: aqua} 鼠标指向时 使用图像作为链接： "> src="images/baidu.gif" border="0" /> 邮件链接: mail">mailto:chengzh@tarena.com.cn">mail to me 锚点: (一个页面内容的跳转) 命名一个锚点 top 跳转到锚点 to top (跳转到其它""页面内容) 跳转目标页面命名一个锚点 top 起始页面设置跳转到锚点 to">">to top 13.使用热点 将一个图片划分成多个区域，每一个区域表示一个 链接。 当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时， 为各顶点值; 当shape="circle"（圆形）时，为圆心坐 标值和半径值。 coords值依照图片大小的不同 和所希望链接区域的不同而有所不同 14、display属性 none:不显示 block:以块元素的方式来显示 inline:以行内元素的方式来显示 15、position属性 static://默认摆放,从左到右，从上到下。 absolute://生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative://生成相对定位的元素，相对于其正常位置进行定位。 16、：type属性 text文本 Email: button按钮 checkbox复选框 I have a bike I have a car hidden隐藏 image图像按钮 这样子直接写在html页面上就能直接看到按钮是图片的！ password密码字段 radio单选按钮 Male Female reset重置按钮 submit提交按钮 这样提交按钮是标签 ，如果想换成图片加上样式，把value="提交" 改成value=" "（这样“提交”两个字就不会显示在这张背景图片的上面）： css代码： #button{ background:url(12.jpg) no-repeat; width:100px; height:50px; border:0px; cursor:pointer; } 等 会换行，想在同一行显示需浮动或者display: inline 点赞 收藏
用户登录
还没有账号？
立即注册