CSS-零基础学习

 

CSS

1. 什么是 CSS?
   1. CSS 指层叠样式表 (Cascading Style Sheets)
   2. 样式定义如何显示 HTML 元素
   3. 样式通常存储在样式表中
   4. 把样式添加到 HTML 中，是为了解决内容与表现分离的问题
   5. 外部样式表可以极大提高工作效率
   6. 外部样式表通常存储在 CSS 文件中
   7. 多个样式定义可层叠为一
2. CSS的特点：
   1. 样式表由样式规则组成，以告诉浏览器如何显示一个文档
   2. 每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
   3. 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
3. CSS的样式
   1. 样式规则格式：
      • 选择符{属性:值}
   2. 单一选择符的复合样式声明应该用分号分割：
      • 选择符{属性1:值1; 属性2:值2}
4. 位置
   1. css定义的位置，可以在head，也可以在body中
   2. 外部引入，在页面的外部创建的CSS文件，引入到html中
      • <link href="css/demo03.css" type="text/css" rel="stylesheet"/>
5. Css优先级
   1. 靠近原则：按照最靠近元素的定义来显示
   2. 如果两个css文件冲突,以后面的为准
6. 注释：在CSS中要主要写好注释信息，每个模块，每个页面的功能点都要说明。
7. 标签选择符
   1. 标签选择符
   2. 类选择符
   3. ID选择符
   4. 派生选择符
      • 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
8. 字体属性：
   1. font-family 字体
   2. font-style 字体样式
   3. font-variant 小体大写
   4. font-weight 字体粗细
   5. font-size 字体大小
   6. color 字体颜色
9. 颜色与背景属性
   1. Color 颜色
   2. Background-color 背景色
   3. Background-image 背景图案
   4. Background-repeat 背景图案重复方式
   5. Background-attachment 背景的滚动
   6. Background-position 背景图案初始位置
10. 文本属性
    1. word-spacing 单词间距
    2. letter-spacing 字母间距
    3. text-decoration 装饰样式
    4. text-transform 转为其他形式
    5. text-align 对齐
    6. text-indent 缩进
    7. line-height 行高
11. 伪类选择符
    1. 对链接的修饰
    2. A:link 未访问时的状态
    3. A:hover 鼠标划过时的状态
    4. A:active 鼠标点中不放时的状态
    5. A:visited 访问过后的状态
12. 边距属性
    1. margin-top 上边距
    2. margin-right 右
    3. margin-bottom 下
    4. margin-left 左
13. 填充属性
    1. padding-top 上填充
    2. padding-right 右
    3. padding-bottom 下
    4. padding-left   左
14. 边框属性
    1. Border-top-width 上边框宽度
    2. Border-right-width 右
    3. Border-bottom-width 下
    4. Border-left-width 左
    5. Border-width 四边
    6. Border-color 边框颜色
    7. Border-style 边框样式
    8. Border-top |right|bottom|left 上(右|底|左)所有属性
15. 边距、填充、边框
    1. 关系如下图所示
    2. 
16. 图文混排
    1. Width 宽度
    2. Height 高度
    3. Float 文字环绕列表属性
17. 列表属性
    1. List-style-type 项目编号类型
    2. List-style-image 项目前图片
    3. List-style-position 第二行位置
    4. List-style 全部属性
18. 鼠标属性
    1. Cursor
    2. 属性值：
       • pointer 手形
       • Move 移动
       • Wait 沙漏
       • Crosshair "+"
19. 绝对定位
    1. 使用 position 属性进行左和右对齐
    2. 对齐元素的方法之一是使用绝对定位：
    3. 实例

       • .right{
         position:absolute;
         right:0px;
         width:300px;
         background-color:cyan;
         }

          

    4. 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
20. 浮动
    1. CSS float 属性
    2. 在 CSS 中，我们通过 float 属性实现元素的浮动。
    3. 
21. 图像的透明度
    1. 定义透明效果的 CSS3 属性是 opacity。
    2. IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

       • img{
         opacity:0.4;
         	filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
         }

          

    3. 图像透明度 - Hover 效果

       • img{
         	opacity:0.4;
         }
         img:hover{
         	opacity:1.0;
         }

          

22. 导航栏
    1. 熟练使用导航栏，对于任何网站都非常重要。
    2. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
    3. 导航栏=链接列表
    4. 作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

    5. <ul>
         <li><a href="#home">主页</a></li>
         <li><a href="#news">新闻</a></li>
         <li><a href="#contact">联系</a></li>
         <li><a href="#about">关于</a></li>
       </ul>