首页 > 代码库 > css概述

css概述

前言

1.CSS    cascading   stylesheet  级联样式表 ,外观显示(页面内容显示的方式)。CSS文档以.css作为后缀   
2、w3c推荐页面文件定义
     数据和结构   html
     样式             css
     行为             javascript

正文

CSS(cascading style sheets,层叠式样式表)
作用:设置HTML页面的布局和样式
css的语法
 选择器{样式属性;样式属性}


HTML中引入样式

 a.外部样式(外部文件),link标签引入

<script src="https://code.csdn.net/snippets/343310.js" type="text/javascript"></script>


 
  b.内部样式,style标签引入

<script src="https://code.csdn.net/snippets/343305.js" type="text/javascript"></script>

 c.内联样式,通过style属性设置

<script src="https://code.csdn.net/snippets/343319.js" type="text/javascript"></script>

注: 样式优先级别

1.内联样式>内部样式>外部样式
   
2. 在新版浏览器中内部样式和外部样式
 根据样式的引入先后顺序,后引入会覆盖前面的样式

选择器


 1.标签选择器
     标签名称{....}
 2.ID选择器
     #id {...}
 3.Class选择器
     .class {...}
 4.群组选择器
     标签名称1,标签名称2 {.....}
 5.包涵选择器
     父标签 子标签 {...}
     直接包涵
     父标签 > 子标签 {....}  IE不支持


常用样式属性


 1.字体相关属性


  1)字体颜色  color:颜色英文单词、#十六进制形式  RGB 如:color:#0099ff
 2) 字体大小  font-size
  3)字体样式  font-style
  4)字体  font-family
  5)单词间距  word-spacing
  6)字符间距  letter-spacing


 2.文本相关属性


  1)文本对齐方式  text-align:left/center/right
  2)文本与左边界的距离  text-indent
  3)文本线条  text-decoration:underline 下划线  overline 上划线  line-through 删除线 none 去掉线条


 3.背景相关属性


1)  背景色  background-color:red
2)  引入背景图片  background-image:url(...)
3)  图片平铺方式  background-repeat:no-repeat 不平铺  repeat-x 在水平方向上平铺  repeat-y 在垂直方向上平铺


 4.边框相关的属性


 1) border:线形  粗细  颜色
        线形: solid实线 、 dotted点线、  double双线 和  dashed虚线

 2) border-top:顶层边框
  3)border-bottom:底层边框
  4)border-left:左边框
  5)border-right:右边框


 5.宽度高度属性


  width:
  height:


 6.鼠标相关


  cursor:wait 漏斗形 pointer(hand)  手指型


 7.显示相关的样式


  display:none  隐藏  inline 将div变成span   block 将span转换成div


 8.超链接


  1)a:link{.....}  超链接点击之前的样式设置
  2)a:hover{....}  鼠标浮上的样式设置
  3)a:active{....}  鼠标点击的样式设置
  4)a:visited{....}  访问过后的样式设置


 9.定位相关样式


1)  position:   absolute 绝对定位:相对父标签的左上角坐标进行定位      relative 相对定位:相对当前标签默认出现的位置进行偏移
2)top:设置上边距
3)  left:设置左边距


 10.内外边距


  margin: 外边距
  padding:内边距

总结


     基本语法


      选择器{
         属性:属性值;
         .......
     }  
    选择器
    a.标签选择器
       标签名{
         属性:属性值;
      }
    b.class 选择器
       .选择器的名字{
属性:属性值;
      }
     特殊
      标签名.选择器名字{//只对相对应标签有效果
        属性:属性值;
      }
    c.id  选择器
      #选择器名字{
         属性:属性值;
     }
    d.包含选择器
    标签名1  标签名2{
     属性:属性值;
   }
    对包含在标签1中的标签2有效果
   e.群组选择器
     标签名,标签名{
         属性:属性值;
     }

样式的继承


    子标记会继承父标记的样式