CSS学习笔记

一.学习方法

1.如何学习

    （1）动手是王道      （2）一看视频，二做笔记，三做定期练习

2.如何解决问题

     （1）谷歌、百度

     （2）微博，知乎，论坛

      （3）国外资源  （stackoverflow.com）

二。基本用法

   1.基本格式：  添加一个css规则，一些术语、概念讲解：声明、选择器、属性、属性值

   2.css添加方式

       *内联样式表（行内样式）：<p style="color:red"></p>

       *内部样式表（嵌入式）：head里面添加上style标签 <style type="text/css">·······</style>

       *外部样式表（链接式）:<link  rel="stylesheet" href="text/mystyle.css"/>

       *引入样式：<style type="text/css">@import url(mystyle.css);</style>

三。selectors选择器

   1.标签选择器     tag_selector

   2.id选择器         #id_selector

   3.class选择器     .class_selector

   1.组选择器     tag_selector,#id_selector,#id_selector

   2.派生选择器  tag_selector  a

   3.子类选择器  tag_selector>a

    1.tag_selector#id_selector

    2.tag_selector.class_selector

    1.tag_selector[name="xxx"]

    2.tag_selector[name^="开头"]

    3.tag_selector[name$="结尾"]

    4.tag_selector[name*="包含"]

四、PseudoClasses伪类选择器

    1.未访问 ：a:link

    2.悬浮 ：a:hover

    3.激活 ：a:active

    4.已访问： a:visited               --注意访问顺序             

    5.聚焦 ： input:focus

    1.第 n 个：selector: nth-child(3)

    2.第（奇数）个：selector: nth-child(odd)

    3.第（偶数）个：selector: nth-child(even)

五、WidthAndHeights的设置

    1.块级元素设置宽高

            width：300px;

            height:200px;

    2.非块级元素设置宽高，必须先设置：display:block;

    3.最大、最小宽高设置：

            max-width:600px;

            min-width:200px;

            max-height:500px;

            min-height:100px;

        其他：溢出的控制：

            自动：overflow:auto;

            滚动：overflow:scroll;

            隐藏：overflow:hidden;

六、Position定位

    1.相对定位 ：position:relative;

    2.绝对定位：position:absolute;

    3.固定定位：position:fixed;

七、Box_Model盒子模型

    1.内容：content

    2.内边距：padding

    3.边框：border

    4.外边距：margin

八、CenteringContainer元素居中

    1.精确计算

        1.设置padding    2.设置margin

    2.使用margin的auto值

    3.如何使文字居中  text-align:center

九、Color颜色设置

    1.颜色名：blue、red

    2.十六进制：#000,#fff, #00ff55

    3.rgb：rgb(120,255,0)

    4.rgba：rgba(120,255,0,0.5)

        *alpha通道的透明度和元素的透明度 opacity:0.6

十、DIsplayProperty Display属性设置

    1.display:block;

    2.display:inline;

    3.display:inline-block;

十一、Hiding_an_Element在网页上隐藏某个元素

    1.display:none 使元素彻底隐藏，隐藏后不占用原空间（看不见摸不着）

    2.visibility:hidden 使对象不可见，隐藏后仍占用原空间（看不见但摸得着）

十二、FontBasics字体设置

    1.用什么字体    font-family         --KaiTi，Microsoft YaHei···········

    2.字体多大    font-size:1.2em;     -- 1em=16px;

    3.字体粗细    font-weight:bolder;   --lighter, bold, normal

    4.字体风格    font-style:xxx; (normal, italic, oblique)

十三、Uppercase_Lowercase_Capitalize 字体大小写转换

    1.小写：text-transform:lowercase;

    1.大写：text-transform:uppercase;

    1.首字母大写：text-transform:capitalize;

十四、Direction 文本书写方向

    1.从左到右 direction:ltr; (left to right)

    2.从右到左 direction:rtl;(right to left)

十五、Text_Align 文本对其设置

    1.左对齐（默认）： text-align：left；

    2.右对齐：text-align:right;

    3.中心对齐：text-align:center;

    4.两端对齐（文本拉伸）：text-align:justify;

     *如果direction属性是ltr，则默认值是left； 如果direction是rtl，则为right。

十六、Text_Indent  文本缩进的普通用法 text-indent：-100px;

    1.比如：缩进文本，增加段落可读性

    2.比如：凸排列表项，使列表项间更容易区分开来

十七、Text_Indent特殊用法------用于隐藏文字

    1.设置图片标题（1.隐藏文字；2,用背景图片替代标题）

    2.设置一个漂亮的按钮 submit button（1.隐藏文字； 2.用背景图片替换按钮）

十八、Border_Basic  border属性的基本用法

    1.边框样式：border-style:solid;      dashed/dotted/double/groove/insert/outset

    2.边框宽度：border-width:5px;      px/em/pt

    3.边框颜色：border-color:#000;

    4.简写属性：border:1px solid #000;  (宽度 样式 颜色) 顺序可随意

十九、Border实际应用

     http://study.163.com/course/introduction.htm?courseId=239003#/courseDetail

二十、border使用注意事项

    1.一旦设置border属性，那么border-style属性必须设置

    2.对布局的影响：

        注意添加了border属性将会使盒子变大（border参与布局）  （outline与border显示效果相同，但不占用空间）

        盒子模型大小=content+border+padding

        （margin是盒子与盒子之间的间距，盒子大小取决于上面三个要素）