html与css笔记（旧）
一：简介
h5 优点：兼容性强；更新方便
缺点：正因为其兼容性强，需要考虑的设备类型比较多，故用户体验差
h5开发工具 `
eclipse
Dreamweaver
webStorm （iOS）
web3.0时代
主流技术：HTML5+CSS3
HTML5：亮点：Canvas(画板)；音视频；存储（即数据库）；定位（Geolocation）；多线程处理
CSS3亮点：设计动画，2D变形
二：常用标签
网页组成：HTML（超文本标记语言：内容+结构）；CSS（样式美化）；JavaScript（动态效果）
三：
h5新增标签：
1.结构性标签;写在body里边
article:文章的主题内容
header：文章头
footer：文章尾部
section：文章的章节
nav:菜单导航，连接导航
2.块级性标签
完成web的块级划分
aside 注记
figure 对多个元素组合并展示的元素，常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间的对话，包含dt（表示说话者）和dd（表示说话者的内容）两个组合元素
3..行内语义性标签
完成文本页面的具体内容的引用和表述（内容的引用和表述）丰富展示内容
meter：特定范围的数值；如工资数量，百分比
time ：时间值
progress ：进度条，可用max，min，step进行控制，完成对进度条的表示和监听
video：视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio：音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达，有一定内容和数据的关联，是各种事件的基础
details 表示一段具体的内容，默认不显示，通过魔种方式单击或legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本即使更新
menu 用于交互菜单
command ：用于处理命令按钮
二：CSS样式
CSS（Cascading Style Sheets）层叠样式表
用来红纸html中的样式，美化网页
CSS的编写格式是键值对形式的
属性名：属性值
有第三种书写形式
1.行内样式：（内联样式）直接在标签的style属性中写
2.页内样式
在本网页的style标签中写
3.外部样式
在单独的CSS文件中写，然后用link标签引用
CSS遵循一个规律：就近原则；叠加原则
src：引用，该资源是页面不可缺少的部分（img，video，radio）
href：引入，引入外部资源如a标签，link标签
三、CSS选择器
1.标签选择器
在head的style中div{}
2.类选择器
/*类选择器，CSS中注释方式*/
.high{
color: yellow;
}
.l{
background-color: purple;
}
3.id选择器(此标识在网页里是独一无二的，只能用一次)
#fi{
color: black;
background-color: green;
}
3.并列选择器
}/*并列选择器，逻辑或的关系，只要满足其中一种就坏改变样式*/
div,.higer{
color: blue;
font-size: 100;
background-color: yellowgreen;
}
4.符合选择器
/*符合选择器，逻辑与的关系*/
div.hihhrt{
color: white;
background-color: black;
font-size: 10px;
}
5.后代选择器
/*后代选择器*/
div p{
color: deeppink;
background-color: yellow;
font-size: 60px;
6、直接后代选择器
/*直接后代选择器*/
div > p{
color: white;
background-color: yellow;
}
7.相邻兄弟选择器
/*相邻兄弟选择器 与div相邻的一个p标签*/
div + p{
color: hotpink;
}
8.属性选择器
/*属性选择器 */
/*一维属性选择器 标签是div且有name属性的标签格式设置*/
div[name]{
color: black;
background-color: yellow;
}
/*二维属性选择器*/
div[name][age]{
color: peru;
background-color: yellow;
}
/*指定属性内容的选择器*/
div[name = "ll"]{
color: lawngreen;
background-color: black;
}
9.伪类选择器
伪类的属性
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方的元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定lang属性的元素添加样式
10伪元素
属性
:first-letter 向文本的第一个字母添加样式
:first-line 向文本的首行添加样式
:before 在元素之前添加内容
:after 在元素之后添加内容
/**/
四、html标签的类型
html中有很多标签，根据显示的类型，主要可以分为三大类
1.块级标签 独占一行的标签，能随时设置宽度和而高度 （div，p，h，ul，li）
2.行内标签 （内联标签）即多个标签可以显示在同一行；宽度和高度不可以改变，由内容决定(span，label，a)
3.行内块级标签 （内联块级标签，既能改变宽度高度，又能使其在同一行）：多个块级标签在行内显示（input button）
修改标签的显示类型
CSS的display属性，此属性有四个取值：
none:相当于hidden；
block：(让标签变为块级标签，主要针对于行内标签和行内块级标签);
inline：让标签变为行内标签，主要针对于块级标签和行内块级标签
inline-block :让标签变为行内块级标签，主要针对于行内标签和块级标签
五、CSS属性
http://localhost:63342/05-CSS%E5%B1%9E%E6%80%A7/index.html webstorm相当于构建了一个本地属性
CSS有很多属性，根据继承性，主要分两大类
可继承属性
父标签的属性会传递给子标签
一般是文字控制属性
不可继承属性
行内块级属性，display属性不能继承
1可继承属性
1.1所有标签都可以继承的属性 visibility cursor
visibility 可见否（即使是不可见也是有占位的）visibility与display都可以隐藏标签，不同的是display隐藏标签后，连占位都没有了，而visibility隐藏标签后还有占位
cursor （光标的类型）pointer手 crosshair十字架
1.2 内联标签可继承的属性
line-height
color
font-family
font-size
font-weight
text-decoration
letter-spacing;word-spacing;white-space;font-style;font-variant;text-transform;direction(不常用)
1.3块级标签可继承的属性
text-indent（缩进）;text-align（对齐）
1.4 列表标签(ul;ol;li)可继承
list-style :列表标签前边的点的类型
list-style-type; list-style-position; list-style-image(不常用)
2.不可继承的属性
2.1display； margin； border； padding； background
display: inline; block; inline-block; none
background:
height; min-height ; max-height; width; min-width; max-width ;
overflow; position; left; right; top; bottom; z-index;
float,clear;
table-layout; vertical-align;
page-break-after; page-break-before
uinicode-bidi
3.CSS3新增属性
3.1 RGBA透明度 background-color: rgba(255,0,0,0.8); opacity
3.2块阴影与圆角阴影
块阴影 box-shadow ; text-shadow
圆角阴影 border: 20px solid yellow;
border-radius: 30px;
border-top-left-radius: 60px;
border-bottom-right-radius: 100px;
3.3边框图片 border-image
3.4形变
transform ：none |
六.盒子模型
盒子模型的四个属性
content （内容）
padding （填充）
border （内边距）
margin（外边距）
盒子模型的大小其实就是content的大小，而microsoft的盒子模型的盒子大小是border的大小
1.content:
属性 height max-height max-width min-height min-width width
2.padding（内边距）
属性 padding （复合属性 四个值：上 右 下 左 三个值：上 左右 下 两个值 ：上下 左右 一个值：上下左右边距相同 ） padding-bottom padding-left padding-right padding-top
3.border
属性：宽度 样式 颜色 border-width border-style border-color border-radius（此为复合属性，border-top-left-radius）
4.magin（类似于padding）
属性：margin margin-top margin-left margin-bottom margin-right
3.13居中
水平居中
css的style中的标签选择器中
text-align: center;即可对行内标签与行内块级标签居中进行设置，而对块级标签不好使，块级标签用margin进行整个标签的水平居中，而test-align：center只是对标签内容进行居中设置
竖直居中：
line-height：父标签的高度
第二天8.30
CSS布局
布局原则：标准流（从上到下，从左到右）
脱离标准流方法：
1.float 取值left（浮动在父标签的左边），right（浮动在父标签右边）
2.position：在父标签的任意位置
position取值：
absolute ：子标签若想相对于父标签进行定位，则子标签需要设置absolute（并在absolute下边设置top，left，right，bottom），而其相对于的父标签要设置relative，否则就会以body为父标签进行定位
relative：若某标签相对于父标签进行定位，则此父标签必须设置为relative
static：默认属性，如果父标签是static则会去找其父标签，若父标签也是static则会去找其父标签的父标签，如果多层父标签都是static则会找到body，以bady为其父标签进行定位
fixed ：
inherit：
注册登陆界面：
1有两层div；若想实现子层div在父层div居中，则将子层的块级标签转换为行内块级标签，然后在外层标签内些text-align：center；（转换为行内标签才有水平居中特性）
2在input样式中设置border，然后在此处只改颜色则，不会出现input输入框动的现象；若直接在focus样式中给border并设置其颜色和宽度会有动的现象
3.border-left-color: green;/**在focus状态下，input的左边栏的颜色设置*/
4. border: 0px;/*button有个默认的border，需要手动设置为0，才会消失*/
1.1块级标签水平居中的第二种方法：
直接在该块级标签的css中写以下两行代码：
margin: 0px auto;
text-align: center;
margin与test-align合用的方式
复习：
absolute： 子标签设置为absolute
relative：父标签设置为relative
static：标签的默认属性
2016.3.14
Bootstrap网址
http://v3.bootcss.com/
1.bootstrap.css：没做过代码混淆的css，里边的代码是开源的，能看的,开发阶段用这个
bootstrap.min.css:做过代码混淆的css，里边的代码是看不了的，做过代码混淆的内存也会相对变小,上线时用这个
2.
按钮：button
常用类：class = “btn btn-sucess”
class = “btn btn-warning”
class = “btn btn-danger”
面板：panel
class =“panel pannel-warning”//外层div
class = “panel pannel-heading”//子层div的标题
class = “panel pannel-body”//子层div的体
斜体标签：i(行内块级标签)
class = “badge”style = “background-color : red ; width : 50px; height :20px”
Glyph icons：字体图标(这是boot's'tbootstrap的标签行内块级标签)
字体图标的实质是对字体进行操作，所以其此字体的标签的大小要用font-size调整
注意：bootstrap引入到工程中的文件夹的名称切记不能修改
3.此处用相对路径
body{
background: url("../Image/bg.jpg")/*相对路径*/;
background-size: cover;
}
4.字体如何设置想要的宽度？
5.图片间距如何调整？
6.如何让那么多字自动换行？
宠物网跟做
1.
网页中，很多都有默认边距的，应该上来就清掉，方法如下（使用并列选择器，逻辑或的关系）：
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}
清掉网页中原有的边距方法二
*{
padding: 0px;
margin: 0px;
}
2.
background: url("../img/tw.png”);//好多鸟的平铺图片为背景
background: url("../img/tw.png") no-repeat;//一只鸟的图片做整个的背景
3.使用外部字体
/*使用外部字体*/
@font-face {
font-family: 此处填写外部字体名称;
src: url(此处填写外部字体名称);
}
然后在要修改字体的标签的css中的font-family属性中填写外部字体名
/*使用外部字体*/
@font-face {
font-family:BebasNeue-webfont;
src: url("../fonts/BebasNeue-webfont.ttf");
}
body{
/*background: url("../img/tw.png");*/
/*background: url("../img/tw.png") no-repeat;*/
/*background: url("../img/pattern.gif") no-repeat;*/
background: url("../img/pattern.gif");
font-family: "BebasNeue-webfont";
}
4.
块级标签自动换行
4.1给块级标签一个宽度（内容依据此宽度换行）
4.2在块级标签的css中设置（以div为例）
div{
word-wrap: break-word;
}
4.3注意，行内块级标签的内容会根据标签的高度和宽度而自动换行，不用设置word-warp：break-word
5.不透明度：
当hover时，鼠标放上去会有变化，设置opacity
6.响应式设计
@media screen and (max-width:1153px){
要修改的某个标签的css
}