html and css第二天0408 css基础

• <!-- font属于html范畴，不是css  -->
• CSS(Cascading Style Sheet)，级联样式表、层叠样式表
  • 概念
    • 级联样式表单
    • 对WEB页面进行外观控制的机制
    • 将页面的内容和表现分离
  • 作用：控制页面外观，将页面的内容和样式(表现)分离
  • 优点：内容和样式分离便于控制、便于工作分工，样式文件独立存在，便于缓存，便于样式复用
  • CSS样式
    • –内联样式
      • 把样式代码内联到标记内，使用style作为属性，样式语句作为属性值
    • –嵌入样式
      • 把样式代码写到标记内
      • –一般插入到标记中，也可在其他位置
    • –外联样式
      • 通过外部样式文件对页面进行控制
      • –外部的样式文件通过HTML的link元素连接到HTML文档中
    • 语法
      • 选择符{属性1:属性值1;属性2:属性值2;}
      • 选择符分类
        • –普通选择符
          • 任意的HTML标记
        • –类选择符
          • HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用
          • 如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性
        • –id选择符
          • 要有“#”在名字前面
          • 可以作用到任意HTML元素的ID属性上
      • 组合使用-关联
        • 是一个用空格隔开的两个或更多的单元选择符组成的字符串
    • 样式就近原则
      • <!-- id选择器>类选择器>普通选择器 -->
      • <!-- 内联样式>(外联样式+嵌入样式) -->
    • 伪类及伪对象
      • <!-- 伪类伪对象：是CSS的一种扩展 -->
      • <!-- 伪类：标签的状态 -->
      • <!-- 伪对象：标签的子元素 -->
      • 名称不能被用户自定义
      • –使用时只能按照标准格式进行应用
      • a{text-decoration: none;}
      • /* a中的伪类，表示超链接的几种状态 */
      • /* 超链接的伪类，爱恨原则，爱love恨hate */
      • /* 未访问 */
      • a:link{color: green;}
      • /* 已访问 */
      • a:visited{color: yellow;}
      • /* 鼠标悬停 */
      • a:hover{color:blue;}
      • /* 鼠标按下 */
      • a:active{color:red;}
      • 伪对象
        • p:first-line{}
        • p:first-letter{}
        • div:first-line{}
        • div:first-letter{}
  • <!-- 标准文档流，按照从上到下从左到右的顺序，把元素一个一个展示在页面上 -->
    • <!-- 元素分类：块级元素、行内元素、行内块元素(内联块元素) -->
    • <!-- 这3类元素可以通过display:block/inline/inline-block切换 -->
      • <!-- 1、块级元素，独占1行，width、height有效 -->
        • <!-- 常见的块级元素：p、h、ul、ol、li、div -->
        • <!-- 修改为 display: inline; 可将元素变为行内元素显示 -->
      • <!-- 2、行内元素，在一行内水平布局，从左往右展示 -->
        • <!-- 行内元素所占空间由内容撑开，width、height无效 -->
        • <!-- 常见的行内元素：a、span、img -->
        • <!-- 修改为 display:block; 可将元素变为块级元素显示 -->
      • <!-- 3、行内块元素，显示为块状，不占据整行，所占空间由width、height决定-->
  • 注释
    • /* */，但要注意不要将注释嵌入到选择器语句里面
  • 盒模型
    • 内容（content）
    • 内边距（padding）
    • 边框（border）
    • 外边距（margin）
  • 常用样式
    • display、float
    • div水平居中：margin:0px  auto;
    • div垂直居中：height: 50px; line-height: 50px;
    • height与line-height取值相同，只适用div中的单行文本
  • 元素分类：块级元素、行级(内联、行内)元素、内联块元素
    • 块级元素：显示为块状，不管内容多少都会占一整行，通过width、height设置宽高
      • 例如：p、h1、ul、li、div
    • 行级元素：在一行内按先后顺序显示，不占整行，不能通过width、height设置宽高
      • 如果设置了float或display，则可以设置宽高
      • 例如：span、a
    • 内联块元素：显示为块状，不会占据整行，通过width、height设置宽高
      • 例如：图片，按钮，单复选框，单行/多行文本框等
    • 三类元素可以通过修改display属性相互转换：
      • display:block/inline/inline-block
      • display:none 隐藏
  • position
    • 标准文档流：页面从上到下从左到右，网页元素一个挨一个的布局方式
    • 块级元素：从上到下一行一行的排列
    • 行内元素：在一行水平布局，从前到后排列
    • css的3种定位体系(流)：
      • 标准文档流(常规流)、浮动(设置了float属性)、绝对定位(position:absolute、fixed)
      • 从本质上讲，浮动仍旧在常规流中，只有绝对定位从常规留脱离，所以也有2种定位体系的说法
    • position属性
      • static：默认值，无定位，left 、right、bottom、top无效
      • relative：相对定位，相对于“原来的位置”，仍旧在标准文档流中，
      • absolute：绝对定位，left、top的默认值并不是0，
        • 如果不设置left、top，则默认值将使元素的位置和“原来的位置”一样
      • fixed：固定定位
        • z-index调整重叠元素的上下位置，值大的层位于值小的层上方
        • z-index属性仅在定位元素(position为absolute或fixed)上才有效
      • 普通元素 < 浮动元素 < 定位元素
      • 元素(1)设置float以后会进入浮动，下一个元素(2)会无视这个元素(1)的存在，
      • 但其中(2)的文本(只有文本)依然会为其(1)让出位置，使自身(2)的文本内容环绕在其(1)周围。