CSS元素总结及HTML布局
HTML标签
<div>布局标签          <h1-h6>标题标签              <p>段落标签            <a>超链接标签          <b>粗体⽂本
<span>内容标签      <button>按钮标签            <table>表格标签      <ul>⽆序标签    <li>搭配ul使⽤<link>引⼊外部样式          <style>css内部样式          <script>JS内部样式          <select>下拉框
<Input>输⼊框标签            <i>斜体⽂本标签      <big>⼤号字体标签          <img>嵌⼊图⽚标签
<input type=”text”>⽂本框 placeholder默认值          <input type=”date”>⽇历控件  <input type=”button”
value=”按钮”>  <input type=”checkbox”>勾选框        <input type=”color”>调⾊板
<input type=”file”>选择⽂件      <input type=”password”>密⽂框        <textarea>⽂本域
CSS元素
1. display:block将⾏内元素转换为块级元素            inline将块级元素转换为⾏内元素
inline-block⾏内块级元素
1. background:no-repeat图⽚背景不重复      background-position：背景位置  background-color：背景颜⾊
background-size背景的尺⼨    background-repeat背景重复    background-image:url(“”)背景图⽚
background是复合属性
2. text-decoration⽂字修饰  none取消修饰线      underline下划线        overline上划线
line-through中划线
1. position定位      relative相对定位      absolute绝对定位    fixed固定定位
2. width宽度          height⾼度        auto⾃动          margin外边距          padding内边距        cover包裹      float浮
动(浮动可以将⾏内元素块级化)                clear清除浮动          border边框      border-style边框样式    font-size 字体⼤⼩            color字体颜⾊          left左        right右    top上 bottom下        ::before伪元素开头            box-sizing：盒⼦的样式
::after伪元素结尾        zoom兼容IE8以下浏览器        opacity：透明度0-1
CSS样式表的基本使⽤内联样式>内部样式>外部样式
为⽂档添加样式的4种⽅式：
1、使⽤内联样式：直接将样式定义到HTML元素中(写在标签⾥)。
这种作⽤范围有限，只影响它所在的标签，
⽽且总是覆盖嵌⼊样式和链接样式。
<div ></div>
2、使⽤内部样式：写在<style>标签中。作⽤范围仅限于当前页⾯，
内部样式覆盖链接样式，但
也会被内联样式覆盖。
<style type="text/css"> CSS样式</style>
3、链接样式：写在单独的CSS样式表中。链接样式的作⽤范围可以是整个⽹站。
只要使⽤<link>
标把样式表链接到页⾯，相应页⾯就可以使⽤样式。
<link href="链接表地址" rel="stylesheet" type="text/css"/>
4、@import指令导⼊外部样式⽂件：和链接样式类似。
引⽤@import指令在某些浏览器(IE)
可能会出现“屏闪”。所以我们应该尽量的避免使⽤@import指令。
⽽是尽量使⽤
链接外部样式表。
<style type="text/css">@import url(地址);</style>
CSS选择器
1、CSS样式的语法格式：
p    {color:red;}    元素选择器(元素选择器是最简单的选择器)
选择器属性值
根据这个结构我们可以扩展：
例如：p{color:red;font-size:14pt;font-weight:bold;}
h1,p,a{color:blue;font-size:14pt;}//组合选择器
2、所有⽤于选择特定元素的选择器分三种：
上下⽂选择器(迭代选择器)：基于祖先或同胞元素选择⼀个元素
ID和类选择器：基于id#和class的属性值进⾏选择元素。
属性选择器：基于属性的有⽆和特征进⾏选择。
①上下⽂选择器：
上下⽂选择器的语法格式：标签1 标签2{属性：值;}
/
/注意：组合选择器和上下⽂选择器的区别，组合选择器以逗号隔开，
上下⽂选择器以空格隔开
②特殊的上下⽂选择器
⼦选择器> :
语法格式：标签1>标签2  解释说明：标签1和标签2是⽗⼦关系。
紧邻同胞选择器+ :
语法格式：标签1+标签2  解释说明：标签2紧跟同胞标签1的后⾯。
⼀般同胞选择器~ :
语法格式：标签1~标签2  解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不⼀定紧挨着。
通⽤选择符* : *      .
解释说明：通⽤选择器*是⼀个通配符，匹配任何元素。
③id选择器和class选择器
id选择器：语法格式: #idValue
class选择器：语法格式: .classValue
④属性选择器
属性名选择器：
语法格式：标签名[属性名]
属性值选择器：
语法格式：标签名[属性名="属性值"]
伪类
没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器)：
UI伪类：会在HTML元素处于某种状态时(例如：⿏标指针位于连接上)，为该元素应⽤CSS样式。hover
结构化伪类：会在标记中存在某种结构上的关系时(
例如：某元素是⼀组元素中的第⼀个或最后⼀个)，
为该元素应⽤CSS样式。
:not和:target(CSS3新增的两个特殊的伪类选择器)
UI元素状态伪类选择器有如下⼏个：
Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover ：匹配Selector选择器且处于⿏标悬停状态的元素。
Selector:active ：匹配Selector选择器且处于被⽤户激活(在⿏标点击与释放之间的状态)的状态的元素。
Selector:focus ：匹配Selector选择器且已得到焦点的元素。
Selector:enabled ：匹配Selector选择器且当前⽤于处于不可⽤状态的元素。
Selector:disabled：匹配Selector选择器且当前处于不可⽤状态的元素。
Selector：checked ：匹配Selector选择器且当前处于选中状态的元素。
Selector：default ：匹配Selector选择器且页⾯处于打开时选中状态的元素
(即使当前没有被选中亦可)。
Selector：read-only ：匹配Selector选择器且当前处于只读状态的元素
Selector：read-wirte ：匹配Selector选择器且当前处于读写状态的元素
Selector：selection ：匹配Selector选择器的元素中当前被选中的内容。
特别提⽰：1、⼀个冒号(:)表⽰伪类，两个冒号(::)表⽰CSS3新增的伪元素。
2、上⾯的Selcotor选择器可以省略，如果省略则可以匹配处于某种
状态下的多个元素。
结构化伪类
Selector:root ：匹配⽂档的根元素。在HTML⽂档中，根元素永远是<html>元素
Selector:first-child : 表⽰⼀组同胞元素中的第⼀个元素。
Selector:last-child  : 表⽰⼀组同胞元素中的最后⼀个元素。
Selector:nth-child(n)  : 表⽰⼀组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n)  : 表⽰⼀组同胞元素中的倒数第n个元素。(倒数第n个)
Selector:only-child : 匹配符合Selctor选择器，⽽且必须只有⼀个⼦节点。
还有其他的⼏个结构化选择器：和上⾯的类似
Selector:first-of-type
Selector:last-of-type
html表格内外边框颜
Selector:nth-of-type(n)
Selector:nth-last-of-type(n)
Selector:empty
特殊的伪类选择器
Selector1:not(Select or2)匹配Selector1，但不匹配Selector2，相当于从Selector1中减去Selector2
Selector:target(target ⽬标)说明：如果⽤户点击⼀个指向页⾯中其他元素的链接则那个元素就是⽬标(target)
层叠
层叠规则：
①层叠规则⼀：到应⽤给每个元素和属性的声明。
说明：浏览器在加载每个页⾯时，都会据此查到每条CSS规则，
并标识出所有受到影响的HTML元素。
②层叠规则⼆：按照顺序和权重排序。
按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果
匹配的属性在下⼀个来源也有定义，则更新该属性的值，如此循环。
权重排序：!important
③层叠规则三：按特指度排序。
计算特指度(ICE 公式)
I    C      E
id  class  Element
1.选择器中有⼀个ID，就在I的位置上加1；
2.选择器中有⼀个类(class)，就在C的位置上加1；
3.选择器中有⼀个元素(标签)名，就在E的位置上加1；
4.得到⼀个三位数。得到的这个数就是我们的特指度。
例如：    I    C      E
p          0    0      1    特指度=1
p.largetext          0    1      1    特指度=11
p#largetext          1    0      1    特指度=101
body p.largetext  0    1      2    特指度=12
body p#largetext 1    0      2      特指度=102
④层叠规则四：顺序决定权重。
说明：如果两条规则都影响到某元素的同⼀属性，⽽它们的特制度也相同，则位置最靠下的胜出。
规则⼀：在特指度相同的情况下，按排列顺序
字体的相关属性
color：该属性⽤于控制字体颜⾊，该属性值包括字符类型的颜⾊名、⼗六进制的颜⾊值、
rgb(255,255,255)值。还有CSS3提供的HSL颜⾊值。
font-famliy：设置⽂字的字体。因为浏览器内嵌字体的⽀持，该属性可以设置多个显⽰字体，浏览器按该属性指定的多个字体依次搜索，以优先到的字体来显⽰⽂字，多个属性值之间⽤逗号(,)隔开。
font-size：设置字体的⼤⼩。此处的字体⼤⼩分为相对字体⼤⼩和绝对字体⼤⼩。
还可以使⽤关键字。例如：medium,samll,large,samller,larger等
绝对字体⼤⼩：使⽤像素(px)，点(pt),⽪卡(pc)，英⼨(in)来设置字体的⼤⼩，
它们是绝对单位，设置多⼤就是多少，不会受到祖先元素的字体⼤⼩影响。
相对字体⼤⼩：使⽤百分⽐(%),em或者rem，这些单位的值是相对的，该字体
的⼤⼩要相对该元素最近的“被设定过字体⼤⼩”的祖先元素来确定，⽐绝对字体⼤⼩的设定要复杂点。
font-style：设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。
font-weight：设置字体是否加粗。属性值：lighter,normal,bold,bolder.
font-variant：设置⽂字的⼤写字符的格式。属性值：normal,small-caps(⼩型的⼤写字母字体)  font: 简写。简写规则：规则⼀：必须声明font-size和font-famliy的值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。