html+css基础总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css基础总结相关的知识，希望对你有一定的参考价值。
1.Html超为文本语言的组成3要素：结构，表现，行为
2.块元素会独占一行元素,无论内容多少，内联元素只占自身大小的元素，不会占取一行
，a元素可以包含任意元素，但除了他本身，p元素不可以包含任何的块元素
3.常用选择器
1》元素选择器：标签名 {} 例如： p{}
2》id选择器：#id属性值 {} 例如：#p1{}（Id：同一网页中只能出现一次）
3》类选择器：.class属性值{} 例如： .p2{}
4》并集选择器：选择器1,选择器2,选择器N{} 例如：#p1 , .p2 , h1{}
5》通配选择器：*{}
6》交集选择器：选择器1选择器2选择器N{} 例如：span .p3{}
7》后代元素选择器：祖先元素 后代元素{} 例如：#d1 span{}
（祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 ）
8》子元素选择器：父元素 > 子元素 例如： div > span{} （子元素：直接被父元素包含的元素，IE6及以下的浏览器不支持子元素选择器）
9》属性选择器: 根据元素中的属性或属性值来选取指定元素
[属性名] 选取含有指定属性的元素 例如：p[title]
[属性名="属性值"] 选取含有指定属性值的元素 例如：p[title=""]{}
[属性名^="属性值"] 选取属性值以指定内容开头的元素 例如：p[title^=""]{}
[属性名$="属性值"] 选取属性值以指定内容结尾的元素 例如：p[title$=""]{}
[属性名*="属性值"] 选取属性值以包含指定内容的元素 例如：p[title$=""]{}
10》子元素选择器
:first-child 可以选中第一个子元素 例如：body > p:first-child{
:last-child 可以选中最后一个子元素 例如：p:last-child{}
:nth-child 可以选中任意位置的子元素（even 表示偶数位置的子元素，odd 表示奇数位置的子元素）
:first-of-type 例如：p:first-of-type{}
:last-of-type 例如：p:last-of-type{}
:nth-of-type 当前子元素中排列
11》兄弟元素选择器
前一个 + 后一个：选中一个元素后紧挨着的指定的兄弟元素 例如span + p{ }
前一个 ~ 后边所有：前一个 ~ 后边所有 例如: span ~ p{}
12》 否定伪类：从已选中的元素中剔除出某些元素，:not(选择器)，例如p:not(.hello){}
13》伪类：用来表示元素的一种的特殊的状态
链接
普通的链接（没访问过的链接）：//:link 例如：a:link{ }
访问过的链接：//:visited 例如：a:visited{}
鼠标移入的状态：//:hover例如：a:hover{}
超链接被点击的状态：//:active 例如：a:active{}
IE6中，不支持对超链接以外的元素设置:hover和:active
a 链接中的以上四个选择器优先级一致
文本输入框获取焦点改变颜色：input:focus{}
为指定标签选定内容使用样式
p::selection{}（兼容大部分浏览器的）
p::-moz-selection{} （兼容火狐的）
14》伪元素：表示元素中的一些特殊的位置
为元素中第一个字符来设置一个特殊的样式 p:first-letter {}
为元素中的第一行设置一个背景颜色为黄色p:first-line {}
before和after ：before和after一般都需要和content一起使用，用于在其位置添加一些特定的元素 例如：p:before/after{content: "";}
4.选择器的优先级
!important>内联样式>id选择器>类和伪类>元素选择器>通配>继承样式
特点：并集选择器的优先级单独计算,其余含多种选择器的选择器则可以相加的形式比较优先级，但优先级不会越级
5.继承：背景相关的样式不会被继承，例如边框相关的样式及定位相关的样式等
6.多行注释都不能嵌套
7.文本标签
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
i标签中的内容会以斜体显示 非着重
b标签中的内容会以加粗显示 非着重
cite标签：加书名号的内容都需要加cite
small标签：small中的内容会比他的父元素中的文字要小一些
q标签：表示一个短的引用，q标签的内容会默认的加上引号
blockquote标签：表示一个长引用（块级引用）
sup标签上标 del标签：删除的内容，横杠的形式表达
ins表示插入的内容 ，自动添加下划线
pre标签预格式标签，保存代码时不会忽略空格
code标签表示代码
8.列表
有序列表 ol（块标签）
可选值： 1默认值，使用阿拉伯数字
a/A采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
无序列表ul（块标签）
可选值：disc默认值，实心的圆点
square实心的方块
circle空心的圆
一般都不使用
一般使用li（块标签）标签设置背景图片的方式来获得
定义列表dl
dl中有两个子标签 dt ： 被定义的内容 dd ： 对定义内容的描述
9.单位
长度单位： 像素px %（根据其父元素的样式来计算） em（相对于当前元素的字体大小来计算）
颜色单位： rhb 表示方法 0-255，百分比，十六进制数
10.字体样式
color定义字体的颜色
font-size 设置框的高度，不是文字本身的高度
font-family 设置文字的字体
微软雅黑
字体分类
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
字体的其他样式
font-style：设置文字的斜体
可选值
normal，默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示/与italic没有明显的差别
font-weight：
可选值
100~900没什么作用
normal，默认值，文字正常显示
bold，文字加粗显示
font-variant可以用来设置小型大写字母（没啥用）
可选值：
normal，默认值，文字正常显示
small-caps 文本以小型大写字母显示
方式2
font:字体的样式的值，可以统一写在font样式中，不同的值之间使用空格隔开，斜体，加粗，小大字母，没有顺序要求，也可以不写，文字的大小和字体须要写，字体样式需要排在最后，大小必须排在倒数第二个样式
例如： font : italic red 20px aril;
行间距：
line-height：设置行高，行间距 = 行高 - 字体大小
（清除外边距，可以除去外边距对块行高的影响，叠加）
可接收的值
大小px，百分数%，数值：例如2
11.文本样式
text-transform：设置文本大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-decoration：修饰文本
可选值：
none：默认值，不添加任何修饰，正常显示（超链接默认添加下划线，去除超链接的下划线可以将样式的值设置为none）
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
letter-spacing：字符间距
text-align：设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
justify 两端对齐
text-indent：设置首行缩进
12.盒子
盒子可见区大小：由内容区，内边区和边框共同决定
内容区设置
Width：
Height：
例如：width：10px；
Height：10px；
设置边框
方式1 边距 颜色 样式
Border-width：
指定四个值：上 ， 左， 右 ，下
指定三个值：上 ， 左右 ，下
指定两个值：上下， 左右
指定一个值：上左右下
边框颜色设置：Border-color同上
边框样式设置：border-style ，四边样式同上
可选值：
none默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
例如：
border-width：10px；
border-color：red；
border-style：solid；
方式二 没有顺序要求
Border ： 10px red solid;
方式三
边框样式一般情况下默认值为none，但是也可以设置4个边框的样式，颜色，宽度
border-top border-right border-bottom border-left
例如：border-top 100px red solid
内边距：
padding-top，padding-right，padding-bottom，padding-left
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
Padding
指定四个值：上 ， 左， 右 ，下
指定三个值：上 ， 左右 ，下
指定两个值：上下， 左右
指定一个值：上左右下
方式1
例如 ： padding-top 100px；
方式2
例如： padding 100px；
外边距：
margin-top，margin-right，margin-bottom，margin-left
外边距会导致盒子自身的位置发生改变
margin还可以设置为auto，auto一般只设置给水平方向的margin；垂直方向外边距如果设置为auto，则外边距默认就是0；将left和right同时设置为auto，使子元素在父元素中水平居中
清除浏览器的默认样式 margin: 0; padding: 0;
例如： margin-top： 0px；
margin-left： 0px；
Display ：可以将内联元素修改成块
可选值：
table可以将一个元素设置为表格显示，使用空的table标签可以隔离 父子元素的外距
inline可以将一个元素作为内联元素显示
block可以将一个元素设置块元素显示
inline-block将一个元素转换为行内块元素，使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none不显示元素，并且元素不会在页面中继续占有位置
visibility：可见性
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示，位置会依然保持
溢出：
overflow:
可选值：
Visible默认值，不会对溢出内容做处理
Hidden溢出的内容，会被修剪
scroll为父元素添加滚动条，不论内容是否溢出都会添加水平和垂直双方向的滚动条
auto会根据需求自动添加滚动条
文档流：
块元素
块元素在文档流中会独占一行，块元素会自上向下排列。
块元素在文档流中默认宽度是父元素的100%
块元素在文档流中的高度默认被内容撑开
内联元素
内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
浮动：块元素在文档流中默认垂直排列float：，浮动的元素不会超过他上边的兄弟元素，浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，元素设置浮动以后，会完全脱离文档流，内联元素脱离文档流以后会变成块元素
可选值：
none默认值，元素默认在文档流中排列
left元素会立即脱离文档流，向页面的左侧浮动
right元素会立即脱离文档流，向页面的右侧浮动
高度塌陷的原因：
在文档流中，父元素的高度是被子元素撑开的，当设置浮动后，会脱离文档流，子元素无法撑起父元素，所以导致高度坍塌
解决坍塌
通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，原理同div，不会在页面中添加多余的div。
清除浮动：clear:
可选值：
None默认值，不清除浮动
Left清除左侧浮动元素对当前元素的影响
Right清除右侧浮动元素对当前元素的影响
Both清除两侧浮动元素对当前元素的影响
文本流 居中的方式18px/35px 18px文本的大小 35总高度
13.定位：position：
相对定位：relative 使元素提升一个层级 right left top bottom
绝对定位：absolute 内联元素变成块元素 使元素提升一个层级
Static：默认值，没有开启定位
Fixed：开启元素的固定定位 IE6不支持固定定位 大部分和绝对定位一样，不同点永远都会相对于浏览器窗口进行定位，不会随滚动条滚动
14.层级和背景
层级：z-index 层级越高，越优先显示
透明背景：opacity可以用来设置元素背景透明 值范围0~1 ie8以下不支持
Alpha 0-100之间 也是透明度 支持ie6
filter: alpha(opacity=50);
background-image：设置背景图片background-image:url
背景图片的重复方式 background-repeat
可选值：
repeat默认值，背景图片会双方向重复（平铺）
no-repeat 背景图片不会重复，有多大就显示多大
repeat-x 背景图片沿水平方向重复
repeat-y背景图片沿垂直方向重复
调节背景图片的位置background-position
可以使用top right left bottom center 其中的两个值
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
background-attachment设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
15.表单
table标签
<table border="1" width="40%" align="center">
tr表示表格中的一行，有几行就有几个tr
td创建一个单元格，有几个单元格就有几个td
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
<td rowspan="2">B4</td>
竖向类似
border-spacing 设置table和td边框之间默认有一个距离
border-collapse设置表格的边框合并
border-collapse: collapse;
合并后border-spacing会失去作用
thead 表头 tbody 表格主体 tfoot 表格底部 需要直接写到table中
16.form标签
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
fieldset表单项进行分组 legend子标签 来指定组名
input创建一个文本框
label标签for属性需要指定一个表单项的id值
单选按钮
使用input来创建一个单选按钮，它的type属性使用radio单选按钮通过name属性进行分组，name属性相同是一组按钮；像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性
input创建一个多选框，它的type属性使用checkbox
select来创建一个下拉列表
拉列表的name属性需要指定给select，而value属性需要指定给option，可以通过在option中添加selected="selected"来将选项设置为默认选中，当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字
textarea创建一个文本域
交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮,它的type属性值是submit，在提交按钮中可以通过value属性来指定按钮上的文字
<input type="reset" />可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复为默认值
使用input type=button可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击
除了使用input，也可以使用button标签来创建按钮，这种方式和使用input类似，只不过由于它是成对出现的标签，使用起来更加的灵活
frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中所以要使用框架集，页面中就不可以使用body标签
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小，frameset中也可以再嵌套frameset，frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe 在frameset中使用frame子标签来指定要引入的页面 ，引入几个页面就写几个frame，嵌套一个frameset
实体的名字;
< <
> >
空格
版权符号 ©
以上是关于html+css基础总结的主要内容，如果未能解决你的问题，请参考以下文章