CSS基础笔记

1.CSS

• CSS(Cascading Style Sheets)层叠样式表, 一种用于为结构化文档(HTML文档/XML应用)添加样式(字体, 间距, 颜色等)的计算机语言
• 样式定义如何显示HTML元素, 通常存储在样式表, 样式添加到HTML4.0中是为了解决内容与表现分离的问题
• 外部样式表极大提高工作效率, 通常存储在CSS文件, 扩展名.css, 多个样式定义可层叠为一个
• 语法: CSS规则由两个主要部分构成: 选择器, 一条/多条声明
  • 
  • 选择器: 需要改变样式的HTML元素
  • 声明: 属性+值; 属性property: 希望设置的样式属性, 每个属性有一个值
  • CSS声明总以分号 ; 结束, 声明总以大括号 {} 括起来
  • 注释 /**/

2.Id&Class

• id选择器
  • 标有特定id和HTML元素指定特定的样式
  • HTML以id属性来设置id选择器, CSS中id选择器以#定义
  • 以下样式规则应用于元素属性id="para1":

    #para1
    {
        text-align:center;
        color:red;
    }
  

• class选择器
  • 描述一组元素的样式, class选择器有别于id选择器, class可在多个元素使用
  • class选择器在HTML以class属性表示, 在CSS中, 类选择器以点.号显示
  • 以下例子中, 所有拥有center类的HTML元素均为居中

    .center{text-align:center;}
  

  • 以下例子中, 所有p元素使用class="center"让元素居中

    .center{text-align:center;}
  

    
         
         
        
    
    
        
这个标题不受影响
        
这个段落居中对齐。
 
    

CSS的创建

• 添加方式
  • 内联样式: HTML元素中使用style属性
  • 内部样式表: HTML文档头部区域使用
  • 外部样式表: 样式被许多页面用到, 可更改一个文件来改变整个站点外观
    • 样式表文件

      hr {color:sienna;}
      p {margin-left:20px;}
      body {background-image:url("/images/back40.gif");}
      

  • 多重样式表: 某些属性在不同样式表中被同样的选择器定义, 属性值将从更具体的样式表被继承
  • 多重样式优先级
    • 内联样式Inline style > 内部样式Internal style sheet > 外部样式Externalstyle sheet > 浏览器默认样式

  具体属性

  CSS 背景

  不搞前端, 其他以后用到再查吧

  ref

  菜鸟教程 CSS 教程