CSS笔记

CSS
---
    1.简介
    2.优势
    3.网页中插入css


CSS介绍
-------
    Cascading Style Sheets


网页中插入CSS的三种方法
-----------------------
    1.链接式
    2.嵌入式
    3.行内样式


链接式
------
    推荐方式
    <link rel="stylesheet" type="text/css" href="index.css"/>

嵌入式
------
    当单个文档需要特殊的样式时，建议使用<style>标签在文档头部定义样式表


行内样式
--------
    当样式仅需要在一个元素上应用一次时，可以使用行内样式
    会失去样式表“表现与内容分离的优势”
    <p style="color:blue;font-size:20px">
        行内样式
    </p>



CSS语法
-------
    一条CSS样式规则由选择器和一条或多条声明组成
      选择器
        1.标记名
        2.自定义类名
        3.自定义id

    每条声明由属性和属性的值组成
    h1 {
       color:blue; 
       font-size:20px;
    }

    h1 { color: #0000ff; }
    h1 { color: #00f; }
    h1 { color: rgb(0,0,255); }
    h1 { color: rgb(0%,0%,100%); }

基本CSS选择器
-------------
    1.标记选择器
    2.类选择器
    3.id选择器

标记选择器
----------
    标记是元素固有的属性，CSS标记选择器用来声明哪种标记采用哪种CSS样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。

类选择器
--------
    类选择器以半角“.”开头，且类名称的第一个字母不能为数字


id选择器
--------
    id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。

    id选择器以半角“#”开头，且id名称的第一个字母不能为数字


CSS文本属性
-----------
    定义文本外观，文本颜色，字符间距，对齐文本，装饰文本，文本缩进
    属性                描述
    color               文本颜色(所有浏览器都支持 color 属性)
    text-align          文本水平对齐方式
    text-decoration     添加到文本的装饰效果
    text-indent         规定文本块首行缩进
    line-height         设置行高
    text-transform      控制文本大小写
    letter-spacing      设置字符间距
    word-spacing        设置单词间距


color属性
---------
    值              描述
    color_name      颜色名称red
    hex_number      十六进制值#ff0000
    rgb_number      rgb颜色rgb(255,0,0)
    inherit         继承父元素


text-align属性
--------------
    水平对齐方式(默认值由浏览器决定)
    值              描述
    left            左对齐
    right
    center
    justify         两端对齐
    inherit         继承父元素


text-decoration属性
-------------------
    设置文本的上划线，下划线，删除线等
    值              描述
    none            默认。标准文本
    underline       下划线
    overline        上划线
    line-through    删除线
    inherit         继承父元素


text-indent属性
---------------
    文本的首行缩进text-indent: 2em;(20px, 50%)
    值              描述
    length          定义固定的缩进，默认值为0
    百分比          定义基于父元素的百分比缩进
    inherit         继承父元素


text-line-height属性
--------------------
    设置行间的距离(行高)
    值              描述
    normal          默认行高
    %               基于当前字体尺寸的百分比行间距
    length          使用像素值设置行间距
    number          使用数值设置行间距
    inherit         继承父元素


text-transform属性
------------------
    控制文本大小写
    值              描述
    none            默认
    uppercase       设置文本中所有字母为大写
    lowercase       小写
    capitalize      首字母大写
    inherit         继承父元素


text-letter-spacing属性
-----------------------
    值              描述
    normal          默认
    length          定义字符间默认的固定距离(可以为负值)
    inherit         继承父元素

    <p style="letter-spacing:-0.2em;">Huaiyin institute of technology</p>
    <p style="letter-spacing:1em;">Huaiyin institute of technology</p>
    <p style="letter-spacing:20px;">Huaiyin institute of technology</p>

text-word-spacing属性
-----------------------
    值              描述
    normal          默认
    length          定义单词间默认的固定距离(可以为负值)
    inherit         继承父元素




CSS字体属性
-----------
    定义文本字体系列，大小，加粗，风格，变形

    属性                描述
    font-family         字体
    font-size           字体尺寸
    font-weight         字体粗细
    font-style          字体样式
    font                可以设置字体的所有属性


font-size属性
-------------
    设置文本大小
    值              描述
    xx-small    
    x-small
    small
    medium          从xx-small到xx-large, 默认值为medium
    large
    x-large
    xx-large
    smaller         比父元素更小的尺寸
    larger          比父元素更大的元素
    length          设置为一个固定值
    %               设置为基于父元素的一个百分比值
    inherit         继承父元素



font-weight属性
---------------
    设置文本粗细
    值              描述
    normal          默认值，定义标准字符
    bold            粗体
    bolder          更粗
    lighter         更细
    100
    200
    300
    400             定义由细到粗的字符400等同于normal, 700等同于bold
    500             
    600
    700
    800
    900
    inherit         继承父元素


font-style属性
--------------
    设置文本是否倾斜
    值              描述
    normal          不倾斜
    italic          倾斜



font属性
--------
    一次性设置针对字体的属性
    按照如下顺序：font-style font-weight font-size/line-height font-family




CSS背景属性
-----------
    可以设置纯色为背景，也可以使用图像作为背景
    属性                描述
    background-color    设置元素的背景颜色
    background-image    设置元素的背景图片
    background-repeat   设置是否重复背景图像或如何重复背景图片
    background-position 设置背景图片开始位置
    background-attachment设置背景图片是否固定或者随着页面其余部分滚动
    background          设置背景的所有属性


background-color属性
--------------------
    用于设置对象的背景色
    值              描述
    color_name      颜色值为颜色名称的背景颜色red
    hex_number      颜色值为16进制的背景颜色#ff0000
    rgb_number      颜色值为rgb代码的背景颜色rgb(255,0,0)
    inherit         继承父元素


background-color属性
--------------------
    设置背景图像
    元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边框
    默认情况背景图片位于元素左上角，并在水平和垂直方向上重复
    <div style="background-image:url(xxx.jpg/png/gif)"; height:150px; width:800px;></div>


background-repeat属性
---------------------
    设置是否及如何重复背景图像
    值              描述
    repeat          默认。背景图片在垂直和水平方向上重复
    repeat-x        仅在水平方向上重复
    repeat-y        仅在垂直方向的重复
    no-repeat       图像仅显示一次
    inherit         继承父元素


background-position属性
-----------------------
    设置背景图像的起始位置
    值              描述
    top left        如果仅设置了一个关键词，那么第二个值将是“center”
    top center      默认值：0% 0%
    top right
    center left
    center center
    center ritht
    bottom left
    bottom center
    bottom right


    x% y%           第一个值是水平位置，第二个值是垂直位置
                    左上角是0% 0% 右下角是100% 100%
                    如果仅规定一个值，另一个值将是50%

    xpos ypos       第一个值是水平位置，第二个值是垂直位置
                    左上角是0, 0。单位是像素(0px, 0px)或其他CSS单位
                    如果仅规定一个值另一个将是50%
                    可以混合使用%和position值



backgroun-attachment属性
------------------------
    设置背景图像是否固定或者随着页面的其余部分滚动
    值              描述
    scroll          默认值。背景图像会随着页面其余部分的滚动而移动
    fixed           当页面其余部分滚动时背景图片不会移动
    inherit         继承父元素

background属性
--------------
    一次性设置针对背景的属性
    顺序：background-color background-image background-repeat background-attachment background-position




CSS列表属性
-----------
    属性                描述
    list-style-type     设置列表项标记的类型
    list-style-position 设置列表项标记的位置
    list-style-image    将图像设置为列表项标记
    list-style          设置列表项的所有属性


list-style-type属性
-------------------
    用于设置列表项的类型
    值              描述
    none            无标记
    disc            默认。标记是实心圆
    circle          标记是空心圆
    square          标记是实心方块
    decimal         标记是数字
    decimal-leading-zero 0开头的数字标记01 02 03
    lower-roman     小写罗马数字
    upper-roman     大写罗马数字
    lower-alpha     小写英文字母
    upper-alpha     大写英文字母
    lower-greek     小写希腊字母
    lower-latin     小写拉丁字母
    upper-latin     大写拉丁字母


list-style-position属性
-----------------------
    设置列表标记的位置
    值              描述
    inside          列表项目标记放置在文本以内，且环绕文本根据标记对齐
    outside         默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
    inherit         继承父元素


list-style-image属性
--------------------
    将列表标记设置为图像
    list-style-image:url(1.png);



list-style属性
--------------
    设置关于列表的所有属性
    顺序：list-style-type list-style-position list-style-image

CSS表格属性
-----------
    表格属性可以改善表格的外观
    1.边框border属性(border:1px solid blue;)
    2.单线条边框border-collapse(border-collapse:collapse;)
    3.宽度和高度width height(height:10px; width:75%;)
    4.文本对齐方式text-align vertical-align(text-align:center;)
    5.控制内容与边框的距离padding(padding:9px;)
    6.制作隔行变色表格
    7.设置表格标题的位置coption-side(caption{caption-side:bottom;})



CSS单位
-------
    单位                描述
    %	                百分比
    in	                英寸
    cm	                厘米
    mm	                毫米
    em	
    1em                 等于当前的字体尺寸。

    2em                 等于当前字体尺寸的两倍。

                        例如，如果某元素以 12pt 显示，那么 2em 是24pt。

                        在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

    ex	                一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
    pt	                磅 (1 pt 等于 1/72 英寸)
    pc	                12 点活字 (1 pc 等于 12 点)
    px	                像素 (计算机屏幕上的一个点)

    颜色
    单位                描述
    (颜色名)	        颜色名称 (如 red)
    rgb(x,x,x)	        RGB 值 (如 rgb(255,0,0))
    rgb(x%, x%, x%)	    RGB 百分比值 (如 rgb(100%,0%,0%))
    #rrggbb	            十六进制数 (如 #ff0000)



CSS的两个特性：层叠性和继承性
-----------------------------
    层叠性
      当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠
      1.如果多个选择器的定义的规则不发生冲突，则元素将应用所有选择器定义的样式
      2.如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。
        CSS规定选择器的优先级从高到低为：行内样式 > ID样式 > 类别样式 > 标记样式。总的原则是：越特殊的样式，优先级越高。
      
    继承性
      CSS的继承性是指如果子元素定义的样式没有和父元素的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素
      一般是CSS的文本属性具有继承性，而其他属性(背景属性，盒子属性等)则不具有继承性
      具有继承性的属性：color,font-类,text-indent,text-align,teext-decoration,line-height,letter-spacing,border-collapse等
      无继承性的属性：text-decoration:none，所有背景属性，所有盒子属性，布局属性等



CSS选择器的组合
---------------
    1.交集选择器
    2.并集选择器
    3.后代选择器


1.交集选择器
------------
    交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集
    其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。如:h1.class  p#intro。这两个选择器之间不能有空格



2.并集选择器
------------
    并集选择器是对多个选择器进行集体声明，多个选择器之间用","隔开(h1,h2,.class)
    所有元素使用通配符*


3.后代选择器
------------
    在后代选择器中，规定左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为"...在...找到", "...作为...的后代"
    ul li选择器可以解释为"作为ul元素后代的任何li元素", "包含li的所有ul会把以下样式应用到该li"
    写法:把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。
    不仅标记选择器可以用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且后代选择器还能够进行多层嵌套。
    两个元素之间的层次间隔可以是无限的。
    例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
    


CSS常用的伪类与伪元素
---------------------
    CSS伪类用于向某些选择器添加特殊的效果，伪元素用于向某些选择器设置特殊效果，常用的伪类和伪元素主要有
    伪类
    ----
    属性                描述
    :link               超链接正在浏览状态时的样子
    :visited            被单击过的链接的样式
    :hover              悬停风格
    :active             鼠标单击与释放之间
    :first-child        向元素第一个元素添加样式


    伪元素
    ------
    :first-letter       向元素的第一个字母添加样式
    :first-line         向文本的首行添加样式


CSS盒子模型
-----------
    盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。
    页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、内边距、边框和外边距。组成。
    网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成
    每个HTML元素都可以看作是一个装了东西的盒子；
    盒子里面的内容到盒子的边框之间的距离即内边距(padding),盒子本身的边框(border),而盒子边框外和其它盒子之间的外边距(magin),
    默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子
    提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
    提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。



CSS边框属性
-----------
    元素的边框(border)是围绕元素内容和内边距的一条或多条线
    属性                描述
    border              简写属性，在一个声明中设置所有的边框属性
    border-width        简写属性，用于为元素的所有边框设置宽度，或者单独为各边边框设置宽度
    border-style        简写属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式
    border-color        简写属性，用于设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色

    border-top          简写属性，在一个声明中设置所有的上边框属性
    border-top-width
    border-top-style
    border-top-color

    border-right
    ...

    border-bottom
    ...

    border-left
    ...


1.在一个声明中设置所有的边框属性
--------------------------------
    宽度，样式，颜色


2.设置4条边框的宽度
-------------------
    border-width简写属性，为元素的所有边框设置宽度，或者单独为各边设置宽度

    值              描述
    thin            定义细的边框
    medium          默认。定义中等的边框
    thick           定义粗的边框
    length          自定义宽度
    inherit         继承父元素


        1.1个属性值，表示4条边框的属性(border-width:thin;)
        2.2个属性值，value1上下边框，value左右边框
        3.3个属性值，value1上边框，value2左右边框，value3表示下边框
        4.4个属性值，上，右，下，左，顺时针




3.设置4条边的样式
-----------------
    border-style简写属性为元素的所有边框设置样式，或单独为各边边框设置样式

    值              描述
    none            无边框
    hidden          与"none"相同。不过应用于表时除外，对于表，hidden用于解决边框冲突
    dotted          点状边框。多数浏览器呈现实线
    dashed          虚线。多数浏览器呈现实线
    solid           实线
    double          双线
    groove          3D凹槽边框
    ridge           3D垄状边框
    inset           3Dinset边框
    outset          3Doutset边框
    inherit         继承父元素


    简写形式与上述border-width规则类似



4.设置四条边框的颜色
--------------------
    border-color简写属性为元素的所有边框设置颜色，或者单独为各边边框设置颜色



5.设置上边框的属性
------------------
    border-top简写属性，在一个声明中依次设置上边框的宽度，样式和颜色


CSS内边距属性
-------------
    盒子的内边距就是盒子边框到内容之间的距离，和表格的填充属性celladding相似。如果填充属性为0，则盒子的边框会紧挨着内容
    当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的

    属性                描述
    padding             设置所有内边距的属性
    padding-top         上编剧
    padding-right       右内边距
    padding-bottom      下内边距
    padding-left        左内边距
    
    可以在一个声明中按照上、右、下、左的顺序分别设置各边的内边距属性
    也可以通过下面四个单独的属性padding-top、padding-right、padding-bottom以及padding-left分别设置上、右、下、左内边距：




CSS外边距margin
---------
    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空白
    属性                描述
    margin              在一个声明中设置所有外边距属性
    margin-top          上外边距
    margin-right
    margin-bottom
    margin-left
    
    可以在一个声明中按照上、右、下、左的顺序分别设置各边的外边距属性
    也可以通过下面四个单独的属性margin-top、margin-right、margin-bottom以及margin-left分别设置上、右、下、左外边距：


CSS外边距合并
-------------
    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。



CSS的三种定位形式
-----------------
    1.普通流
    2.浮动
    3.绝对定位


普通流
------
    除非专门指定，否则所有框都在普通流中定位。
    普通流定位方式：
        1.行内元素在同一行内横向排列。
            行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行。 行内元素举例：a，img，font，b，i，u， span，input
        2.块级元素占满整个一行，在页面中竖向排列。
            块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素举例：p, div, hn, pre, hr, ul, ol, li, form
        3.对于嵌套的元素盒子也是嵌套的关系

通过display属性可以控制元素是以行内元素显示还是以块级元素显示，或是不显示
block
    若display的属性设为block，则元素总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度
inline
    若display的属性设为inline，则元素和其他元素都在一行上，高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
none
    若display的属性设为none，该元素被设置为隐藏，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。如制作下拉菜单、tab面板等有时就需要用 display: none把菜单或面板隐藏起来
list-item
    在html中只有li元素默认是 list-item ，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。



CSS浮动
-------
    在普通流中，一个块级元素在水平方向会自动延展，在它的父元素中占满一行，而在竖直方向和其他元素依次排列，不能并排

    

float属性
---------
    值              描述
    none            默认值
    left            向其父元素的左侧靠近，盒子的宽度不再延伸，而是收缩，在没设置宽度时会根据盒子的内容来确定宽度
    right

    浮动后的盒子将以块级元素显示，但宽度不会自动延伸
    浮动的盒子将脱离普通流，即不再占据浏览器原来分配的位置
    "脱离普通流"是指元素不再占据在普通流下浏览器分配给他的空间，其他元素就好像这个元素不存在一样
    未浮动的盒子将占据浮动盒子的位置，同时未浮动的盒子内的内容会环绕浮动后的盒子

    多个盒子都浮动后，就产生了块级元素水平排列的效果
    多个浮动元素不会相互覆盖，一个浮动元素的外边界margin碰到另一个浮动元素的外边界后便停止运动



浮动的清除
----------
    clear是清除浮动属性
    值              描述
    left            不允许左浮动
    right
    both
    none



CSS定位
-------
    使元素通过设置偏移量定位到页面或其包含框的任何地方
    position
    值              描述
    static          默认值。表示不使用定位属性
    fixed           固定定位，它和绝对定位类似，只是总是以浏览器窗口为基准进行定位(不常用)
    relative        使用相对定位的盒子的位置定位依据常以标准流的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离
    absolute        设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块


    相对定位的作用
    --------------
        让元素相对它原来的位置发生位移，同时不释放它原来占据的位置
        让元素的子元素以他为定位基准进行定位，同时保持他的位置不变，这时相对定位的元素成为包含框，一般是帮助里面的元素进行绝对定位


CSS绝对定位
-----------
    设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块
    元素原先在正常文档流中所占的空间会自动关闭，就好像该元素原来不存在一样
    元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
    绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于他在普通流中的位置。

    若不设置父标记的定位属性为relative，则绝对定位的元素默认以浏览器为包含框按照left和top设置的值偏移

    相对定位和绝对定位的比较
            relative                            absolute
定位基准    以自己原来的位置为基准              以距离它最近的设置了定位属性的父级元素为定位基准，若所有父级元素都未设置定位则以浏览器窗口为基准
原来的位置  还占着原来的位置，为脱离普通流      不占用其原来的位置，已经脱离普通流，其他元素就当它不存在


cursor常用属性
--------------
    值              描述
    default	        默认光标（通常是一个箭头）
    auto	        默认。浏览器设置的光标。
    pointer	        光标呈现为指示链接的指针（一只手）
    move	        此光标指示某对象可被移动。
    text	        此光标指示文本。
    wait	        此光标指示程序正忙（通常是一只表或沙漏）。
    help	        此光标指示可用的帮助（通常是一个问号或一个气球）
    Crosshair
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize