CSS Cascading Style Sheets

Directory

• CSS Cascading Style Sheets
  • Style declaration method: Priority from high to low
  • CSS syntax
  • CSS and div-based page layouts

CSS Cascading style sheet style declaration method: Priority from high to low

• Element inline style:

    通过元素内style属性,用冒好分割键和值,用分号分割不同样式    <p style=”color: green;margin_left: 30px”></p>

• Inline styles in:

    在整个页面中有效,<style>标签中内容由选择器及其样式组成    <style type=”text/css”>    p{color: green;margin_left: 30px}    </style>

• Style of the outer union:

    将css数据单独保存为一个文件,在<link>标签中引用,内容由选择器及其样式组成    

• Browser default style: Different browser

CSS syntax

• Consists of selectors and style attributes:
  selector{key1:value1 ;key2:value2…}
• Four basic selectors:

    通配选择器:*{}    标签选择器:标签{}    Class选择器:.class属性值{}     标签.class属性值{}    id选择器:#id属性值{}       标签#id属性值 {}

• Basic combination:

    S1,S2{}:多选择器,满足S1或S2的标签    S1>S2:子元素选择器,S1的直接子标签为S2    S1 S2:后代选择器,S1中的S2标签    S1+S2:相邻选择器,后面紧随S2的S1标签

• Other selectors:

    [属性]{}:属性选择器,有该属性的标签    [属性=”值”]:属性和值选择器,属性等于该值的标签    链接已点击选择器:选择未访问、已访问、悬浮和活动链接，并设置它们的样式：    a:link    {color:blue;}    a:visited {color:blue;}    a:hover   {color:red;}    a:active  {color:yellow;}

CSS and div-based page layouts

• CSS Layout Common Properties:

    position:元素位置类型absolute(绝对位置),relative(相对父元素的位置),static(固有位置)    direction:元素内容靠哪侧ltr(靠左),rtl(靠右)    float:元素本身靠屏幕哪侧left(左),right(右)    hight(高度),width(宽度),margin(边框外部留白),border(边框),padding(边框内部填充):pt,px,%,em

CSS Cascading Style Sheets