css
css
- 3种方式
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 外部样式表,应用于多个页面 ,
<style></style> 内部样式表, 应用于当前页面 , 标签中<p style="color: sienna; margin-left: 20px"></p> 内联样式, 只应用于当前标签- 优先级
继承规则: 部分样式可以被子标签继承
简单优先级: 内联 > 内部 > 外部
权重优先级: 比如 id为 1, 标签为 10, class为 100, 权值越小优先级越高
最高优先级: 给样式添加 !important ( > ie6)
- 基础知识
块级元素 & 内联元素
盒子模型
媒体查询: 就是对不同的显示媒介使用不同的css样式
- 居中
父级元素使用 relative 定位, 子级元素才能使用 absolute 定位; 另外采用这种方式, 将子元素设置为 margin: auto; left:0; right:0; top:0; bottom:0; 就可以达到居中的效果
html, css, js之间的关系
html: 网页内容的载体, 包括文字, 图片, 视频
css: 样式表现
js: 特效效果
html 标签
一般是成对出现, 内容在标签中, 有开始有结束, 建议没有结束标签的标签加上 / (其实不用纠结这个, 使用的编译器自动加就加, 不加就不加)
标签不区分大小写
html 基本结构
<!--注释文字 --><!DOCTYPE html> <!--指明是 html5 文档类型 --><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style></style> <!--默认当作 css --> <script></script> <!--默认当作 js --></head><body> <!--页面显示的内容 --></body></html>
语义化: 标签是为了达到语义化的效果, 方便搜索引擎收录
em 标签: 斜体; strong: 粗体; span: 单独设置样式用, 没有语义;
q: 短文本引用, 说白了就是直接给文本加上引号; blockquote: 长文本引用, 文本2边添加缩进
br: 换行; hr: 水平线 : 空格, html文件中直接输入空格不起作用的
address: 语义是联系地址的意思, 表现出来为斜体
code: 单行代码; pre: 多行代码
ol,ul >li: 列表
div: 排版中划分独立的版块
table summary>thead,tbody>tr caption>th,td: 表格
a href target: 链接
mailto=>html , 详细请见: http://www.cnblogs.com/HappyQQ/archive/2008/02/26/1082945.html<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
form method action>label for,input type name, textare rows cols, select multiple>option value: 表单<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
表单中可选的type: text, password, radio, checkbox, submit, reset
label标签的作用: 点击时自动聚焦到对用的表单位置
css 基本语法
使用css的3种方式: 内联式 > 嵌入式 > 外部式(有标准的权值计算方式)
选择器: 标签, 类, id(注意只能是唯一的), 后代选择器(所有后代, 使用空格), 子选择器(一个后代, 使用>), 伪类选择器(如: a:hover), 分组选择器
继承: 某些样式是具有继承性的, 会作用于该标签的所有后代
权值: id(100) > 类(10) > 标签(1) > 继承(0.1)
层叠: 权值相同的时候, 那么后定义的样式就会覆盖之前定义的样式, 使用css的3种方式也是这个原理的体现
!important: 使样式具有最高权值 p{color:red!important;}
元素分类
块状: div p h1 ol ul dl talbe address blockquotes form
块状元素特点: 独占一行; 高, 宽, 行高, 顶边距, 底边距都可以设置; 不设置的话, 宽度和父元素相同
内联: a span br i em strong label q var cite code
内联元素特点: 和其他元素在一行上; 高, 宽, 顶边距, 底边距都不可以设置; 元素的高度就是他所包含的文字或者图片的宽度, 不可改变
内联块状: img input
内联块状特点: 和其他元素在一行上; 高度、宽度、行高以及顶和底边距都可设置
注意: 浮动和定位都会将元素变为内联元素
盒模型
元素本身的 winth, height; 元素的 padding; 元素的 border; 元素的 margin
布局模型
流动(flow): 块状元素都在所在元素内自上而下顺序垂直延伸分布; 内联元素都会在其所处的元素中水平排列
浮动(float): 让块状元素可以在一行类显示; 注意, 如果同级元素都设置了浮动, 按照先后顺序在一行进行排列, 也就是说如果都是 float: right 就会发现顺序是倒过来的
层(layer): 类似ps中的图层编辑, 但是实际应用中常用的为 定位.
绝对定位absolute: 相对于一个已经定位的父元素, 进行位置变化
相对定位relative: 相对于以前的所处的位置进行定位
固定定位fixed: 相对于浏览器窗口进行定位(回到首页就是通过这个实现的)
组合使用: 父元素 position: relative, 子元素 position: absolute
常用数值
颜色: rgb(), css3还支持透明度; 16进制写法; 英文
长度: px(最常用, 就对应浏览器的像素); em(font-size的大小); 百分比
css样式设置小技巧
水平居中
内联元素: text-align: ceter
定宽块状元素: 设置左右margin为auto
不定宽块状元素:
- 放到 td 标签中(也就是说需要添加冗余的table标签); 为table设置左右margin居中
- 设置
display: inline, 然后使用text-align: center(这样就少了一些块状元素的属性) - 将父元素设置为
float: left; position: relative; left: 50%, 自身设置为position: relative; left: 50%
垂直居中
父元素高度确定的单行文本: 设置 height, inline-height 相同就可以了
父元素高度确认的多行文本:
- 放到td标签中; 设置
vertical-align: middle(td默认自带, 可以不用设置); ie8, 火狐, 谷歌可以使用display: table-cell; vertical-align: middle;
隐性改变display属性: 设置 position: absolute; 或者 float: right;(left也行), 这样元素就相当于 display: inline-block.
/*设置段落样式*//*选择器, 知道这个样式用在哪*/p{ font-size: 12px; color:red;}/*常用样式*//*文字排版*/font:italic small-caps bold 12px/1.5em "宋体",sans-serif;font-family:"Microsoft Yahei";font-size:12px;color:#666font-weight:bold;font-style:italic;text-decoration:underline;letter-spacing: 1px;color: red;/*段落排版*/text-indent:2em;line-height:1.5em;letter-spacing:50px;text-align:center; /*块状元素中的文本, 图片设置居中样式*/display: inline;/*盒模型*/border:2px solid red;border-width:2px; border-style:solid; border-color:red;padding:20px 10px 15px 30px;margin:20px 10px 15px 30px;
