CSS基础总结

一、CSS 层叠样式表

1.CSS的使用方式

  • 写在标签内的style属性中 行内式 内联式

      <html标签 style="样式属性:取值;...">
    
  • 写在 <style> 标签内

      <style type="text/css">
      	选择符{
      			样式属性:取值;...
      		}
      <style>
    
  • 写到外部css文件中,用<link>关联到HTML中

      <link rel="stylesheet" type="text/css" href="样式表文件地址(.css)">  
    
  • @import可以引入css文件,用于css文件中引入另一个css文件

      @import url("样式表地址");   
    

2. CSS的格式

选择器{
		属性1:值;
		属性2:值;
	}

3.CSS的长度单位

  • px : 像素
  • em : 相对于默认大小 倍数
  • % :百分比
  • pt(磅) cm(厘米) mm(毫米) 绝对单位

4.颜色表示

  • 颜色的英文单词

    red orange yellow green cyan blue purple black white pink gray

  • rgb方式

      rgb(123,45,178)
      rgb(0~255,0~255,0~255)
      rgb(百分比,百分比,百分比)
    
    • rbg(255,0,0) 红色
    • rbg(255,255,255) 白色
    • rgb(0,0,0) 黑色
    • rgb(100,100,100) 灰色。 只要三个都一样,就是灰色
  • 十六进制

          #34afa1
          #ff0000   红色    简写 #f00
          #00ff00   绿色    简写 #0f0
          #0000ff   蓝色    简写 #00f
          #ffffff   白色	简写 #fff
          #000000   黑色    简写 #000
          #cccccc   灰色    简写 #ccc
          #336699           简写 #369
    

5. CSS注释

  • /* 注释 */

6.CSS选择器

  • HTML元素(标签)选择器

  • ID选择器 #id名

  • CLASS选择器 .类名

  • 全局选择器 *

  • 关联选择器-后代元素选择器 选择器 选择器

      例如:
      .nav li{...}
      #box div{...}
      div .list{...}
      .container li{...}
    
  • 关联选择器-子元素选择器 选择器>选择器

      例如:(子元素选择器,孙元素不选择) 
      ul>li{....}
    
  • 关联选择器-相邻选择器 选择器+选择器

      例如:(选择紧贴在E元素之后的F元素)
      E+F{...}
    
  • 关联选择器-兄弟选择器 选择器~选择器

      例如:(选择E元素所有兄弟元素F)
      E~F{...}
    
  • 组合选择器 两种基本选择器的组合

  • 伪类选择器 love-hate(a标签为例)

    • a:link:向未被访问的链接添加样式
    • a:visited:向已被访问的链接添加样式
    • a:hover:当鼠标悬浮在元素上时,向元素添加样式
    • a:active:向被激活的元素添加样式(点击的时候)

7. 选择器的优先级

  • 内嵌样式>嵌入外部样式表/内部样式表

    • 嵌入外部样式表与内部样式表根据定义的先后顺序来定义,最后定义的优先(就近原则)
  • 行内 > ID > Class > Tag(html标签选择符)

  • !important

      例如:
      .box{
      	color:gray !important;
      	}
    
  • 组合选择器

    • ID权重100
    • class权重10
    • Tag权重1

二、CSS的属性

1. 字体属性

  • font-family: 衬线字体(serif) 非衬线字体(sans-serif)

  • font-style : 字体风格 normal(默认)/italic(斜体)/oblique(强制变斜)

  • font-weight : 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)

  • font-variant : 字变形 noraml(默认)/small-caps(小型大写字母)

  • font-size : 字体大小

  • font : 统一设置

      font:[style/weight/variant] size family
      注意:
      前面三个可写可不写,后面两个必须写且顺序不可交换(必须放在其他属性后面)
    

2.颜色属性

  • color 值:字母/rgb/16进制

3.文本属性

  • letter-spacing :字母/符间距

    • normal(默认0px)
    • 像素:-0.3px(允许使用负值)
  • word-spacing :字/ 单词间距

    • normal(默认0px)
    • 像素:1.5px(允许使用负值)
  • text-decoration :文本能修饰

    • none(默认)
    • underline 下划线
    • overline 上划线
    • line-through 中划线 删除线
    • blink 定义闪烁的文本
  • text-align:横向排列

    • left(默认)
    • right
    • center
    • justify(两端对齐)
  • vertical-align:垂直对齐方式((图片和文字在一行时多使用 ))

    • baseline:将支持valign特性的对象的内容与基线对齐
    • sub:垂直对齐文本的下标
    • super:垂直对齐文本的上标
    • top:将支持valign特性的对象的内容与对象顶端对齐
    • text-top:将支持valign特性的对象的文本与对象顶端对齐
    • middle:将支持valign特性的对象的内容与对象中部对齐
    • bottom:将支持valign特性的对象的文本与对象底端对齐
    • text-bottom:将支持valign特性的对象的文本与对象顶端对齐
    • <percentage>:百分比指定由基线算起的偏移量。可以为负值,基线对于百分数来说就是0%
    • <length>:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0(CSS2)
  • text-indent:文本的首行缩进

    • 常用单位
      • 像素(50px)
      • 百分比
      • em(2em代表两个字)
  • line-height:设置行间距离,不允许使用负值

    • 常用单位
      • normal(默认)

      • 数字

      • 百分比

      • px

      • em

          注意:
          line-height:200px;
          font:30px "Mcrosoft";
          此时line-height的设置失效
          因为font把它给覆盖了
          可使用以下方式同时设置:
          font:30px/200px "Microfost";
        
  • text-transform:设置对象中的文本的大小写

    • none(默认)
    • capitalize(每个单词以大写字母开头)
    • uppercase(转换为大写字母)
    • lowercase(转换为小写字母)
  • text-shadow:向文本添加阴影

      例如:(可以同时设置多个阴影,中间用“,”分开)
      h2{
      	text-shadow:5px     5px     5px    green,...;
      			  水平方向  竖直方向  模糊度  模糊颜色
      }
    

4.背景属性

  • background-color

    • 设置背景色,或设置为transparent(透明)
  • background-image

    • 背景图片(支持多重背景图)
      • url("图像地址1"),url("图像地址2")
  • background-repeat

    • 背景重复
      • repeat:背景图像在纵向和横向上重复平铺
      • no-repeat:背景图像不重复平铺
      • repeat-x:横向重复平铺
      • repeat-y:纵向重复平铺
  • background-attachment

    • 背景附件
      • scroll:背景图像是随对象内容一起滚动,是默认选项
      • fixed:背景图像固定在页面上静止不动,只有其他的内容随滚动条滚动
  • background-position(背景不能平铺)

    • 背景位置(如果只给一个值,另一个默认为center)

        例如:
       	background-position:  left     top;
        (left/center/right)水平位置  垂直位置(top/center/bottom)
        background-position:  20px  50%;
        (单位可以是px/百分比%) x坐标 y坐标
      
  • background

    • 综合属性
      • background:背景颜色|背景图像|背景重复|背景附件|背景位置(各属性没有先后顺序,以空格分开)

          例如:
          background:red url('./123.png') no-repeat 100px 10px;
        

5.边框属性

  • border-style

    • 边框样式
      • border-top-style

      • border-right-style

      • border-bottom-style

      • border-left-style

          样式有如下:
          dotted(点线)  dashed(虚线) solid(实线)  double(双实线)
          groove(3D凹线) ridge(3D凸线) inset(内嵌效果) outset(外凸效果,3D浮出线)
        
  • border-color

    • 颜色值
    • transparent(透明色)
  • border-width

    • 宽度(px)
  • border

    • 边框综合(顺序随便)
      • border:边框颜色 边框样式 边框宽度
  • border-radius

    • 圆角边框
      • border-radius:25px 10px 15px 30px (四个角为原形)
      • border-radius:50px 10px(对称圆角边框)
  • border-image(CSS3)

    • 花样边框
      • url('图片地址')
      • 图片使用的边框线宽度(数字)
      • 图片宽度(数字)可省略
      • 图片填充方式 (可省略)
        • stretch:把图片拉伸到整个边框区域

        • repeat:重复填充

        • round:重复并自动调整图片大小

            例如:
            border-image:url('aa.png') 35 25 25 15;
            border-image:url('bb.png') 36 round;
          

6.鼠标光标属性

  • cursor(该属性写在dody中就可以了)
    • cursor:auto(默认值)/形状取值/url('图像地址');

        形状取值:
        text:文字选择器
        crosshair:十字架
        wait:等待
        help:帮助
        pointer:小手
        move
        progress
      

7.列表属性

  • list-style-type

    • disc:实心圆
    • circle:空心圆
    • square:小方框
    • decimal:阿拉伯数字1,2,3...
    • lower-rowan:小写罗马数字i ,ii, iii...
    • upper-roman:大写罗马数字I,II,III...
    • lower-alpha:小写英文字母a,b,c..
    • upper-alpha:大写英文字母A,B,C..
  • list-style-image

    • none/url('图片地址')
  • list-style-position

    • inside:标示在li里面
    • outside:标示在li外面
  • list-style

    • 复合属性(经常用none表示不设置)

        例如
        ol{
        	list-style:square inside url('cat.jpg');
         }
      

8.表格属性(设置给table)

  • table-layout

    • 表格布局方式
      • auto(默认)布局将基于各单元格的内容,可能定义单元格宽度为100px,但结果不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢。
      • fixed平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。
  • border-collapse

    • 行和单元格的边是合并还是独立
      • separate:独立(默认)
      • collapse:合并
  • border-spacing(不设置border-collapse时才有用)

    • 当表格边框独立时,行和单元格的边框在横向和纵向上的间距
    • 该属性作用等同于标签属性cellspacing(单元格边框)。border-spacing:0;等同于cellspacing="0"
    • 只有当表格边框独立(即<'border-collapse'>属性等于separate时)此属性才起作用
    • 如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距
    • 如果只提供一个值时,作用于横向和纵向上的间距
  • caption-side

    • 表格标题在table上面还是下面
      • top
      • bottom
  • empty-cells

    • 没有内容的单元格隐藏还是显示
      • show(默认)
      • hide

三、CSS-精灵图

  • 通过使用background的坐标来设置截取图片的哪部分作为背景图(坐标为负)

      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<meta charset="UTF-8">
      	<title>精灵图</title>
      	<style>
      		p{
      			width:25px;
      			height:25px;
      			border:1px solid #ccc;
      		}
      
      		.p1{
      			background:url('../../dist/images/iconlist.png') no-repeat 0px -125px;
      	
      		}
      
      		.p2{
      			background:url("../../dist/images/iconlist.png") no-repeat -25px -225px;
      		}
      
      		.p3{
      			width:55px;
      			height:55px;
      			background:url("../../dist/images/fenju.jpg") no-repeat -27px -95px;
      		}
      	</style>
      </head>
      <body>
      	<h1>精灵图</h1>
      	<hr>
      
      	<p class="p1"></p>
      	<p class="p2"></p>
      	<p class="p3"></p>
      </body>
      </html>
    
posted @ 2017-07-26 21:33  blue星期天  阅读(157)  评论(0编辑  收藏  举报