笔记 - 10.3、HTML - CSS样式笔记1

CSS注释：以/*开头 以*/结束 eg ：/* 这是CSS注释 */

1.字体属性:
--- font-family:字体类型（行书还是楷书或是其他字体类型）eg：body {font-family:"楷体";}

--- font-size:字体大小。
    取值范围：xx-small：绝对字体尺寸，最小
          x-small:绝对字体大小,较小
          small：小
          medium：绝对字体默认值，正常默认值
          large：大
          x-large：较大
          xx-large：最大
          lager：相对字体尺寸，相对于父对象中字体尺寸进行相对增大。
          smaller：。。。相对减小
          像素值和百分比：像素值是最常用的，
            百分比的取值是基于父对象中的字体的尺寸。用父对象字体尺寸乘以自对象中的字体百分比，得到自对象的字体大小。
    eg：body {font-size:30px;} 或者：body {font-size:50%; }

--- font-style:字体风格（斜体。。。）
    取值：
        italic：斜体子。
        oblique：中间状态，同样是斜体字。
        normal：普通字体，没有任何风格（默认值）

--- font-weight：字体加粗
    取值：100、200、300、400、500、600、700，800，900
          bold：加粗，粗细程度等于700的粗细程度。bold = 700
          normal：正常字体，不加粗 等于400
          bolder：很粗的，等于900
          lighter：细的，相当于100

--- font-variant:将小写的英文字母转化为大写
    取值：normal：默认值，表示正常显示，原来是什么样，现在还是什么样。
          small-caps：将小写的英文字母转换为大写字母，且字体较小。
         
--- font：复合属性
    可以取值：字体族科（字体类型），字体大小，字体风格，字体加粗，每个值之间用空格隔开
    复合属性取值有顺序，
        分别是：字体风格 字体粗细 字体大小 字体类型，
        eg: div {font:italic bold 50px "宋体";}
    如果同时设置这四个样式的话，必须按照这个顺序写，这四个样式才能全部生效。
    font-variant这是属性没有整合到font复合属性中，只能单独写。


2.颜色和背景属性：
--- color：用来设置指定元素的文本颜色。颜色值是一个颜色的英文单词或者是一个十六进制的颜色值。
--- background-color：背景颜色。用来设置指定元素的背景的颜色。值也是一个颜色值。
--- background-image：背景图片。用来设置指定元素的背景的图片。值是一张图片的路径。
    注意：在使用背景图片时：background-image的值是：url(图片路径)，url() 不能少，图片路径放在小括号里面。当背景图片和背景颜色同时设置时，背景图片会覆盖在背景颜色上，就会看不到背景颜色。
    eg：body {background-image:url(images/img.jpg); }
--- background-repeat：背景重复（平铺）
    取值：no-repeat：背景图片不重复（不平铺）
          repeat：默认值，背景图片重复（平铺）
          repeat-x：背景图片向X轴方向（水平）重复（平铺）
          repeat-y：背景图片向Y轴方向（垂直）重复（平铺）

--- background-position：背景的位置。

--- background：是背景的一复合属性，整合了背景颜色，背景图片，背景重复，背景位置这四个属性。
    eg：    body {
            background:green url(bj1.jpg) no-repeat Top center;
        }
        写法：多个值之间用空格隔开，
--- 与font的区别：background与font同是复合属性，与font不同的是，background的四个值没有顺序，哪个放前面哪个放后面都一样，但是font的属性必须要有顺序才能看到效果。


3.段落属性：
--- word-spacing：单词间隔。（网页中每相邻的两个用空隔开的英文单词或者是中文之间的距离。）
    取值：像素值。可以使用负数。
--- letter-spacing：字符间隔，就是网页中相邻两个字符间的距离。
    取值：像素值
--- text-decoration：文本修饰，用来控制一段文字的下划线、上划线、删除线。。。
    取值：underline：下划线
          overline：上划线
          none：这是默认值，没有任何修饰，常用来去除超链接的下划线。
          line-through：删除线。
--- vertical-align：垂直对其方式
    取值：baseline：浏览器默认的垂直对齐方式；
          sub：文字的下标。 常用来写化学方程式。
          super：文字的上标。常用来写数学表达式。
          top：垂直靠上对齐。
          text-top：是元素和上级元素的字体向上对齐。
          middle：垂直居中对齐，常用来设置图片与文字的垂直对齐方式。
          text-bottom：使元素和上级元素的字体向下对齐。
--- text-transform：文本转换，英文单词大小写之间的转换。
    取值：none：默认值，不转换。
          capitalize：使用每个单词的第一个字母大写。
          uppercase：每个单词的所有字母都大写。
          lowercase：每个单词的所有字母小写。
--- text-align：水平对齐方式。
    取值：left：左对齐。
          right：右对齐。
          center：水平居中对齐。
          justify：两端对齐（一段文字没有占满一整行，使用了justify的话，就可以占满这行。）、部分浏览器不支持该属性。
--- text-indent：文本首行缩进。
    取值：像素值,还可以是其它的长度单位（cm,em . . .）。
        （em:一个长度单位，1em 等于 12px左右， 2em 约等于两个正常大小的汉字的宽度。）
--- line-height：文本行高，相邻两行之间的间隔、默认是这行文字有多高，这行的行高就是多高。
    是本行上面的空白 + 文字本身的高度 = 行高
    取值：同上↑。
--- white-space：处理空白
    取值：    normal：默认值。
        pre：会将源代码中的空格保留，
        nowrap：强制在同一行显示文本、直到遇到<br/>或者文本结束。

--- unicode-bidi、direction：文本反排 （开发用不到，了解即可。）
    unicode-bidi配合direction一起使用，来设置对象的阅读顺序。
    unicode-bid:
        取值：    bidi-override:表示严格按照direction属性的值重排
            normal:默认值。
            embed:表示对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
    direction:
        取值：    ltr:表示从左到右的顺序阅读
            rtl:从右到左的顺序阅读。
            inherit:表示文本流的值不可继承。

4.外边距与内边距属性：
:外边距(margin)
--- margin-top：上边距，用来设置元素的上边界（与其它盒子的距离）。
--- margin-bottom：下边距。
--- margin-left：左边距。
--- margin-right：右边距。
--- margin：是综合了以上四个属性，可以同时设置四个方向的外边距。
    取值：都是一个长度值或者百分比。
    margin的取值可以是一个、两个、三个、四个、多个值之间用空格隔开：
        一个值：表示的方向是上下左右四个方向。
            margin:10px;
        两个值：第一个值表示上下两个方向的边距，第二个值表示左右两个方向。
            margin:10px 20px;
        三个值：第一个值表示上方向，第二个值表示左右方向，第三个值表示下方向。
            margin:10px 20px 30px;
        四个值：分别表示上、右、下、左方向的边距。
            margin:10px 20px 10px 20px;

:内边距(padding)，用法与外边距一样
--- padding-top:上内边距。
--- padding-bottom:下内边距。
--- padding-left:左内边距。
--- padding-right:右内边距。
--- padding:综合以上四个属性。
    取值：都是长度值或百分比。
    padding:的取值与margin一样，可以是多个，padding的多个值对应的方向与margin的多个值对应的方向相同。

5.边框属性（border）：
--- 边框样式：
    border-style:用来设置四个方向的边框
    border-bottom-style:设置下边框样式
    border-top-style:设置上边框样式
    border-left-style:设置做边框样式
    border-right-style:设置右边框样式
    取值：
        none：默认值，没有边框。
        dotted：点线边框。
        dashed：虚线边框。
        solid：实线边框。
        double：双实线边框。
        groove：边框具有立体感的沟槽。
        ridge：边框呈脊形。
        inset：使整个边框凹陷，及在一个变宽嵌入一个立体边框。
        outset：使整个边框凸陷，及在一个变宽嵌入一个立体边框。
    
--- 边框宽度：
    border-width:用来设置四个方向的边框宽度。
    border-top-width:上边框宽度。
    border-bottom-width:下边框宽度。
    border-left-width:左边框宽度。
    border-right-width:右边框宽度。
    取值：一个长度值，或者百分比。

--- 边框颜色：
    border-color:用来设置四个方向的边框颜色。
    border-top-color：上边框颜色
    border-bottom-color：下边框颜色
    border-left-color：左边框颜色
    border-right-color：右边框颜色
    取值：是一个颜色对应英文单词或者是一个表示颜色的十六进制颜色值。

--- border-top:上边框样式
--- border-bottom:下边框样式
--- border-left:左边框样式
--- border-right:右边框样式
--- border：是所有边框样式的复合属性，用来设置四个方向的边框样式。
    以上五个属性由边框样式，宽度，颜色综合。
    取值：有三个值，综合了样式，宽度，颜色三个属性
        比如：border-top:1px solid red;这个属性表示上边框是一个宽度为1px，颜色为red（红色）的实线。
    这三个值分别用空格隔开，没有顺序，样式属性值（如solid等）必不可少，否则将无法正确显示边框。