html css
17.HTML css
给一个元素设置多个class，class里用空格，但是class的优先级只是和加载class对应css的顺序有关
通用属性： class id style title title属性的作用，附加信息，鼠标滑过时会显示这个属性的文本内容，可以用在连接或者图片上。
- 块元素(有宽高，垂直排列)：
<p> <div> <h1> <ol> <ul> <blockquote> <pre> <form> <table>
- 行内元素(无宽高，水平排列)：
<br/> 换行 <hr/>水平线 <span> <small> <big> <strong> <b>粗体 <i>斜体 <del> <em>着重 <sup> <sub> <q> <dfn> <cite> <code> <label>
- 行内块（有宽高，水平排列） img input textarea select
<span>除了不能自动换行，和div一样做容器样式，这两个最常用
链接：<a href target> 瞄点：<a name=”n”> <a href=“#n”>
Href:链接到的页面 target:页面显示在哪里 _blank _top _parent 如果是框架name属性名称，则在该框架中显示
可以设置文字、图片、邮件链接href=”mailto:1@qq.com;2@qq.com?cc &bcc &subject &body”
设置图片区域链接：
<img src alt usemap=”#m”/>
<map name=”m”>
<area shape=”circle rect ploy” coords href target alt/>
</map>
表格：
<table border="">
<caption></caption>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<tfoot><tr><td></td></tr> </tfoot>
<td colspan rowspan>
实体： < > ÷ ↔ ± ‰
表单：除了label都有name属性
<form action method=“get post”>
<input type/>
text passwprd : value maxlength readonly (value默认显示值)
radio checkbox : name value checked（name表明哪些是一组 value提交的值）
button submit reset : value
hidden ：value 传输不希望用户看到的数据，设置value数据
file
<label2 for=”id”> 把标签和其他绑定在一起，如单选框可选
<textarea cols rows readonly> 只是设置能显示的行列，标签中是默认值
<select><option value selected>
框架frameset和body同级：<frameset cols rows>
<frame src/> 设置frame不可更改大小 加noresize=“noresize”
不支持框架<noframes>
内联框架 <iframe src width height frameborder=“0 1”>
CSS声明
行内样式：就是代码写在具体网页中的一个元素内；比如：<div style="color:#f00"></div>
内嵌式：就是在</head>前面写；比如：<style type="text/css">.div{color:#F00}</style>
外部式：就是引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet" />
Css继承:颜色、字体可以继承，其他一般不能。
选择器：标记 .类 #id p div后代(空格表示) 子代> 弟弟+ 伪类 *选择所有元素 选择器组（，隔开） 属性[]
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
常用单位:px em %
颜色定义： red #FFCC44 #fc4 rgb(255,100,255) rgb(20%,40%,100%)
属性:css属性有一些是不能被继承的
css设置文本
color
font-family : v1,v2;
font-size : 2px;
font-weight : normal bold
font-style : normal italic
text-align : right left center justify
text-decoration : none underline line-through overline blink
text-transform : capitalize uppercase lowercase
text-indent :
letter-spacing :
word-spacing :
overflow:visible hidden scroll auto
line-height : （行高=元素高度，文字垂直居中）
对图像设计：使用box模型(图片的对其可以用父本文的text-align对齐)
css背景
Background-color :
Background-image : url()
Background-repeat : repeat(默认) no-repeat repeat-x repeat-y
Background-position : x y|center right top bottom left| 30% 50%
Background-attachment : scroll(默认) fixed
box模型：
border : width color style
或者按照各边分别设置如下：
border-left border-right border-top border-bottom
border-width border-color border-style（给出几个属性，1：全部2：前上下，后左右；3：前上中左右后下；4：顺时针上右下左）
也可以按照各边分别设置：如border-left-color:
width : height : 可以设置相对父元素的百分比大小
padding ：30px
margin ：同上
margin-left margin-right margin-top margin-bottom
padding-left padding-right padding-top padding-bottom
border-style:solid dashed（虚线） dotted(点线)
注：
- Margin的距离：行内元素是左右两者之和，块级元素是由上至下排列，距离是上下元素的最大值。
- 如果没设置高宽：该元素的水平长度最大是父级的内容宽度，该元素自动收缩到能容纳子元素的最小高度
- Margin第二个设置auto，则元素水平居中。实际上设置了margin-left和margin-right
盒子的浮动和定位：
浏览器想办法文字显示。
设置了浮动后，如果元素没有设置宽，会自动缩小到能容纳的最小
实现浮动：float: left right
相对 绝对 固定定位
position:
relative ：相对盒子本身的位置或者浮动的盒子原本的位置偏移，父盒子、兄弟盒子没有影响，依在标准流定义中
absolute ：绝对定位的盒子以最近的一个已经定位的祖先元素（祖先元素设置了position不是static的值）为基准定位，不然就以浏览器窗口为基准，并从标准流中脱离。对父兄弟盒子没影响（没设置上下偏移会在原位置）
fixed ： 以浏览器为基准 很少用
left: right: top: bottom:
堆叠属性: z-index:数值越大，越靠近显示
只有相对定位不脱离标准流。
元素显示方式:
display: 常用: none(隐藏元素) 不常用:block inline inline-block
表格css设计：box模式
表格特有属性：
border-collapse:collapse separate
list-style-type:
list-style-image:url()
制作导航条：设置type为none，然后把li设置成导航条
鼠标形状
cursor:
Html注释<!-- --> css注释/* */ js注释和java相同
浙公网安备 33010602011771号