CSS

BS教程

  1. CSS语法

     [选择器]
     {
         [声明1];
         [声明2];
         [声明3];
         ...
     }
     [selector]
     {
         [declaration1];
         [declaration2];
         [declaration3];
         ...
     }
    
  2. 声明写法

     属性1:值1;
     属性2:值2;
     属性3:值3;
     ...
     property1:value1;
     property2:value2;
     property3:value3;
     ...
    
  3. 选择器类型

     id选择器
     #id1
     {
         color:red;
     }
     类选择器
     .class1
     {
         color:red;
     }
     html选择器
     p
     {
         color:red;
     }
     通配符选择器
     *
     {
         color:red;
     }
     父子选择器(除了子选择器为html选择器,父与子之间没有空格)
     p.class1
     {
         color:red;
         text-align:center;
     }
    
    1. css插入样式表(样式引入)
      外部样式表
      <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      内部样式表
      <head>
      <style>
      p
      {
        color:red;
        text-align:center;
      }
      </style>
      </head>
      内联样式表
      <p style="color:red;text-align:center;">段落内容</p>
      多重样式
      <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <p style="color:red;text-align:center;">段落内容</p>
      
  4. 多重样式优先级

     内联样式>内部样式>外部样式>浏览器默认样式
    
  5. css属性

    1. css背景属性

      • background(以下所有属性的简写[属性值顺序如下])
      • background-color 背景颜色
      • background-image 背景图像
      • background-repeat 背景平铺(独立于背景定位)
      • background-attachment 背景定位(独立于背景平铺)
      • background-position 背景位置
    2. css文字属性

      • color 设置文本颜色
      • direction 设置文本方向。
      • letter-spacing 设置字符间距
      • line-height 设置行高
      • text-align 对齐元素中的文本
      • text-decoration 向文本添加修饰
      • text-indent 缩进元素中文本的首行
      • text-shadow 设置文本阴影
      • text-transform 控制元素中的字母
      • unicode-bidi 设置或返回文本是否被重写
      • vertical-align 设置元素的垂直对齐
      • white-space 设置元素中空白的处理方式
      • word-spacing 设置字间距
    3. css字体属性

      • font 在一个声明中设置所有的字体属性
      • font-family 指定文本的字体系列
      • font-size 指定文本的字体大小
      • font-style 指定文本的字体样式
      • font-variant 以小型大写字体或者正常字体显示文本
      • font-weight 指定字体的粗细
    4. css列表属性

      • list-style 简写
      • list-style-image 将图象设置为列表项标志
      • list-style-position 设置列表中列表项标志的位置
      • list-style-type 设置列表项标志的类型
    5. css表格属性 border 表格边框 border-collapse 折叠边框 width 表格宽度 height 表格高度 text-align 文字对齐 vertical-align 文字对齐 color 文字颜色 background 背景相关设置 padding 表格内边距

    6. 时间有限,逐步完善

  6. css属性值

    1. color background-color

      • white 白色
      • #FFFFFF 白色
      • rgb(255,255,255) 白色
      • rgba(255,255,255,0.3) 白色 透明度30%
      • inherit 从父元素继承相应属性的值
    2. background-image

    3. background-repeat

      • repeat 平铺
      • repeat-x 水平平铺
      • repeat-y 垂直平铺
      • no-repeat 不平铺
      • inherit 从父元素继承相应属性的值
    4. background-attachment

      • scroll 背景图片随页面的其余部分滚动(默认)
      • fixed 背景图像是固定的
      • inherit 从父元素继承相应属性的值
    5. background-position

      • left top 左上
      • left center 左中
      • left bottom 左下
      • right top 右上
      • right center 右中
      • right bottom 右下
      • center top 中上
      • center center 中中
      • center bottom 中下
      • x% y% 比例
      • xpos ypos x-y单位
      • inherit 从父元素继承相应属性的值
    6. direction

      • ltr 文本方向从左到右
      • rtl 文本方向从右到左
      • inherit 从父元素继承相应属性的值
    7. letter-spacing

      • normal 字符间距0
      • length -3px(自定义间距)
      • inherit 从父元素继承相应属性的值
    8. line-height

      • normal 合理的行间距
      • number 1.1(此数字与当前字体尺寸相乘)
      • length -3px(自定义间距)
      • % 基于当前字体尺寸的百分比行间距
      • inherit 从父元素继承相应属性的值
    9. text-align

      • left 把文本排列到左边
      • right 把文本排列到右边
      • center 把文本排列到中间
      • justify 两端对齐文本效果
      • inherit 从父元素继承相应属性的值
    10. text-decoration

      • none 无修饰
      • overline 上划线
      • line-through 中划线
      • underline 下划线
      • blink 闪烁文本
      • inherit 从父元素继承相应属性的值
    11. text-indent

      • length 0(固定缩进)
      • % 20%(百分比缩进)
      • inherit 从父元素继承相应属性的值
    12. text-shadow

      • h-shadow 水平阴影位置
      • v-shadow 垂直阴影的位置
      • blur 模糊的距离
      • color 阴影的颜色
    13. text-transform

      • none 无修饰
      • capitalize 每个单词以大写字母开头
      • uppercase 仅有大写字母
      • lowercase 仅有小写字母
      • inherit 从父元素继承相应属性的值
    14. unicode-bidi

      • normal 无修饰
      • embed 创建一个附加的嵌入层面
      • bidi-override 创建一个附加的嵌入层面 重新排序取决于direction属性
      • initial 设置该属性为它的默认值 请参阅 initial
      • inherit 从父元素继承相应属性的值
    15. vertical-align

      • baseline 元素放置在父元素的基线上
      • sub 垂直对齐文本的下标
      • super 垂直对齐文本的上标
      • top 把元素的顶端与行中最高元素的顶端对齐
      • text-top 把元素的顶端与父元素字体的顶端对齐
      • middle 把此元素放置在父元素的中部
      • bottom 把元素的顶端与行中最低的元素的顶端对齐
      • text-bottom 把元素的底端与父元素字体的底端对齐
      • length -3px(指定高度)
      • % -20%使用 line-height 属性的百分比值来排列此元素
      • inherit 从父元素继承相应属性的值
    16. white-space

      • normal 空白会被浏览器忽略
      • pre 空白会被浏览器保留
      • nowrap 文本不会换行
      • pre-wrap 保留空白符序列 但是正常换行
      • pre-line 合并空白符序列 但是保留换行符
      • inherit 从父元素继承相应属性的值
    17. word-spacing

      • normal 定义单词间的标准空间
      • length 定义单词间的固定空间
      • inherit 从父元素继承相应属性的值
    18. font

      • font-style 规定字体样式
      • font-variant 规定字体异体
      • font-weight 规定字体粗细
      • font-size 规定字体尺寸和行高
      • line-height 规定字体尺寸和行高
      • font-family 规定字体系列
      • caption 定义被按钮、下拉列表等标题控件使用的字体
      • icon 定义被图标标记使用的字体
      • menu 定义被下拉列表使用的字体
      • message-box 定义被对话框使用的字体
      • small-caption caption字体的小型版本
      • status-bar 定义被窗口状态栏使用的字体
    19. font-family

      • family-name times courier arial
      • generic-family serif sans-serif cursive fantasy monospace
    20. font-size

      • xx-small 极小
      • x-small 较小
      • small 小
      • medium 中
      • large 大
      • x-large 较大
      • xx-large 极大
      • smaller 把font-size设置为比父元素更小的尺寸
      • larger 把font-size设置为比父元素更大的尺寸
      • length 10px(把font-size设置为一个固定的值)
      • % 20%(把font-size设置为基于父元素的一个百分比值)
      • inherit 从父元素继承相应属性的值
    21. font-style

      • normal 无修饰
      • italic 斜体
      • oblique 倾斜
      • inherit 从父元素继承相应属性的值
    22. font-variant

      • normal 无修饰
      • small-caps 小型大写字母的字体
      • inherit 从父元素继承相应属性的值
    23. font-weight

      • 100 定义由粗到细的字符
      • 200 定义由粗到细的字符
      • 300 定义由粗到细的字符
      • 400 定义由粗到细的字符 等同于 normal
      • 500 定义由粗到细的字符
      • 600 定义由粗到细的字符
      • 700 定义由粗到细的字符 等同于 bold
      • 800 定义由粗到细的字符
      • 900 定义由粗到细的字符
      • normal 标准的字符
      • bold 粗体字符
      • bolder 定义更粗的字符
      • lighter 定义更细的字符
      • inherit 从父元素继承相应属性的值
    24. list-style

      • list-style-type 设置列表项标记的类型
      • list-style-position 设置在何处放置列表项标记
      • list-style-image 使用图像来替换列表项的标记
      • initial 将这个属性设置为默认值
      • inherit 从父元素继承相应属性的值
    25. list-style-image

      • none 无图形被显示
      • url('image.jpg')
      • url('./image.jpg')
      • url('http://www.xxx.com/image.jpg')
      • inherit 从父元素继承相应属性的值
    26. list-style-position

      • outside 保持标记位于文本的左侧
      • inside 列表项目标记放置在文本以内
      • inherit 从父元素继承相应属性的值
    27. list-style-type

      • disc 实心圆
      • none 无标记
      • circle 空心圆
      • square 实心方块
      • decimal 阿拉伯数字
      • decimal-leading-zero 0开头的数字
      • lower-roman i ii iii iv v
      • upper-roman I II III IV V
      • lower-alpha a b c d e
      • upper-alpha A B C D E
      • lower-greek αβγδε希腊字母
      • lower-latin a b c d e小写拉丁字母
      • upper-latin A B C D E大写拉丁字母
      • hebrew 希伯来编号
      • armenian 亚美尼亚编号
      • georgian an ban gan乔治亚编号
      • cjk-ideographic 简单的表意数字
      • hiragana a i u e o ka ki日文片假名
      • katakana A I U E O KA KI日文片假名
      • hiragana-iroha i ro ha ni ho he to日文片假名
      • katakana-iroha I RO HA NI HO HE TO日文片假名
    28. 时间有限,逐步完善

    29. css盒子模型

      • 标准模型
          div
          {
              width: 400px;
              height: 300px;
              margin: 10px;
              padding: 10px;
              border: 10px solid rgb(0,255,0);
          }
        
      • 盒子模型
    30. 时间有限,逐步完善

css常用技巧

  1. 超链接点击后hover不出现怎么办

     a:link{ background:#FF0000;}
     a:visited{background:#00FF00;}
     a:hover{background:#0000FF;}
     a:active{background:#000000;}
    
  2. 字符过长溢出div解决

     word-wrap: break-word;
    
  3. 弹窗提醒

     span{
         top: 100px;
         left: 100px;
         opacity: 0.5;
         position: absolute;
         background-color: rgba(0,0,0, 0.5);
     }
    
@耿志环 2012-∞ 冀ICP备17033181号, powered by Gitbook修订: 2019-05-16 14:46:40

results matching ""

    No results matching ""