html、css心得

·DIV布局CSS控制

·<style></style>CSS标签,用来控制div的属性,如宽、高、颜色等。其中,# + “div的id” 可以单独操作某一块DIV的属性,也可以通过.+“div的class”或者标签名来控制该class下(标签)所有DIV属性(id控制的优先级高于class和标签)。

·DIV默认是上下排序,因为它的宽度:100%,即占满浏览器的宽度,高则是根据内容自动适配。

(要解决这个问题,如需要两个div并排,则需要浮动(float),如两个div均加入:float:left注意需要设置宽度,若无宽度则系统根据div内容自动适配。)

·漂浮(float)的DIV会浮动普通DIV上方,所以当两者在位置上冲突时,前者会“挡住”后者。

·父div可以被子div的撑开:在父div上加上overflow:auto;父div不允许被子div的撑开:在父div上加上overflow:hidden(超出隐藏)。

(overflow:auto,被撑开,但是在原有网页面板中还是占据原来的大小,即宽、高度不变,多了一个滚动条;overflow:hidden,超出父DIV的部分不显示若子div是浮动元素,则父div会直接被挡住,宽、高不会有任何变化。?也可以来防止被DIV其他覆盖?)

·DIV不可用纯数字作为id,CSS无法操作ID为纯数字的DIV。

·div水平居中: margin-left:auto;margin-right:auto;(设置好width后

·DIV边缘距离:margin,表示DIV和上一级的距离。

·margin重叠:当两个DIV之间存在margin值,则两个DIV之间的距离为较大margin值,而非两个值相加。此现象只存在于普通DIV中漂浮DIV的距离为两个margin值相加

·普通DIV默认新起一行。

·<span></span>,行内元素,只是作用于一行而不会改变当前位置,只能在行内的水平方向设置间距(margin)和padding,一般用于修饰行内的文字的颜色(color)和背景颜色(background)。( 行内元素:a - 锚点、abbr - 缩写、acronym - 首字、b - 粗体(不推荐)、bdo - bidi override、big - 大字体、br - 换行、cite - 引用、code - 计算机代码(在引用源码的时候需要)、dfn - 定义字段、em - 强调、font - 字体设定(不推荐)、i - 斜体、img - 图片、input - 输入框、kbd - 定义键盘文本、label - 表格标签、q - 短引用、s - 中划线(不推荐)、samp - 定义范例计算机代码、select - 项目选择、small - 小字体文本、span - 常用内联容器,定义文本内区块、strike - 中划线、strong - 粗体强调、sub - 下标、sup - 上标、textarea - 多行文本输入框、tt - 电传文本、u - 下划线、var - 定义变量;块状元素:address - 地址、blockquote - 块引用、center - 举中对齐块、dir - 目录列表、div - 常用块级容易,也是CSS layout的主要标签、dl - 定义列表、fieldset - form控制组、form - 交互表单、h1 - 大标题、h2 - 副标题、h3 - 3级标题、h4 - 4级标题、h5 - 5级标题、h6 - 6级标题、hr - 水平分隔线、isindex - input prompt、menu - 菜单列表、noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容、noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)、ol - 有序表单、p - 段落、pre - 格式化文本、table - 表格、ul - 无序列表

·display:显示属性。block:转为块状元素;inline:转为行内元素;none:不显示。

·text-indent:10px,段落缩进,多用于p标签中。

·text-align:排列方式,center:居中;right:居右;left:居左。

·font:字属性。如font-style:字体样式;font-weight:加粗;font-size:大小;font-family:字体等...

·line:行属性。如line-height:行高。

·font快速定义:font:intalic bold 23px/46px ”Simhei";顺序优先级:样式、加粗、大小/行高、字体。

·font-family:A,B,C....sans-serif;预留字体,当用户机器上没有A字体时候会调用B,没有B会调用C...依次顺序;其中可用一类字体作为做恶劣的情况,如sans-serif(无-衬线)、serif(有衬线)

·background 快速设置顺序:颜色(color)、图片(url())、重复(repear)、attachment、位置(position)

·css引入方式:1、外部导入:<link rel="stylesheet" href='""/>;2、头部写入:<style>...</style>;3、多文件导入,在css文件中加入:@import url(*.css);4、直接在标签内加入:style=“...”;

·css初始化:不同的浏览器对margin,border,font-size等解析略有不同,所以为了尽可能使得所有浏览器显示效果一致,所以使用css进行初始化。(初始化代码可以从各个大型网站上摘取。)

·<ul></ul>无序列表。

·<ol></ol>有序列表。

·<li></li>,在<ul></ul>和<ol></ol>标签中使用。list-style-type可控制“小黑点”的样式。

·<table></table>表格。border-collapse,控制<td>的属性,默认下每个<td>都是独立的,如果要使t<td>之间公用边,则把border-collapse属性设置成“collapse”;border-spacing用来设置边框之间的距离。

·<tr></tr>行,在<table></table>中使用。

·<td></td>列,在<td></td>中使用。colspan横向合并单元格,colspan="4",表示该单元格横跨4列;rowspan纵向合并单元格,colspan="2",表示该单元格把下方单元格合并了。

·<a href="..." target=“_blank" title="..."></a>,超链接标签、锚点标签;超链接标签:target=“_blank”,使用新窗口打开该链接;title="...",鼠标盘旋提示;锚点:快速跳转到锚点放置处,<a name="p1"></a>,此时在网页中url中加入"#p1“,网页会自动导航到该锚点处。实际用法:<a href=”(当前页地址)#p1"></a>

·伪类:css允许我们针对a标签的4中状态(常态、鼠标盘旋、鼠标按下、鼠标松开)设置各自的css特征。css: a:link{}常态(link可省略)、a:visited{}松开/访问过的、a:hover{}盘旋、a:active{}按下(一般不用写)。注:必须按照l-v-h-a的顺序来写!!!




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值