CSS学习笔记（一）

@达内，听课笔记

一、

1、CSS

   1、什么是CSS

      Cascading Style Sheet
      层叠样式表
      级联样式表
      样式表

   2、作用

      实现了内容与表现的分离
      提高了代码的可重用性和可维护性

2、CSS样式表使用方式

   使用方式共分三种，使用任何一种都可以更改页面的样式。

   1、内联方式

      内联样式
      将CSS样式定义在HTML的标签中
      特点：不通用，只能定义某一标签的单独样式。

   2、内部样式表

      将一系列样式定义在HTML的中
      特点:当前网页任何一个标签都可以使用，体现出可重用性。

   3、外部样式表

      将样式定义在外部的css文件中，可以由任何一个页面进行样式表的引用
      特点：真正意义的实现了样式表的可重用性

3、内联方式的CSS

   定义在HTML标签中的style属性里
   

   CSS语法:
   样式规则:属性名称:属性值
            color:red
    background-color:blue
   多个规则之间，用;进行区分
   background-color:blue;color:red;

4、内部样式表

   样式内容出现在中的
   


   样式组成:选择器和样式声明
   选择器:决定哪些元素能够使用定义好的规则
   样式声明:由一对大括号包围着所有的样式规则


   选择器
   {
/*样式规则*/
属性名称:属性值;
属性名称:属性值;
   }

5、外部样式表

   step1:创建一个文件已css作为后缀
   step2:在文件中写样式相关代码
         选择器
{
属性名称:属性值;
}
   step3:在页面中对css文件进行引用
         
   
   

6、CSS样式表特征

   1、继承性

      大部分的样式属性是可以被继承的
     
       

     


      body
      {
font-size:12px;
      }

    2、层叠性

       可以为一个标签定义多个样式
       不冲突时，多个样式可以合并成一个
       h1
       {
color:red;
       }
       h1
       {
background-color:yellow;
       }
       h1
       {
font-size:20px;
color:green;
       }


       合并后:
       h1
       {
color:red;
background-color:yellow;
font-size:20px;
       }

    3、优先级

       样式定义冲突时，会根据样式规则的优先级进行应用样式

       内联样式1000    ID0100    伪类0010    类0010    元素0001

       其次：内部样式表和外部样式表,就近原则

    4、调整优先级

       !important
       语法 ：
       选择器{属性:属性值 !important;}

7、选择器

   规定了哪些元素能够使用定义好的样式

   1、通用选择器

      表示:*
      可以与任何一个元素匹配
      多数用在设置网页整体的默认样式
      *
      {
font-size:12px;
font-family:"Microsoft Yahei";
      }

   2、元素选择器

      由html元素名称作为选择器
      作用：用于修改当前选择器所对应的元素的默认样式
      表示:元素名称
      p{font-size:12px;}
      div{color:red;}

   3、类选择器

      语法:.className{}
      注意:类名不能以数字开始
           .1234 错误
   .font
      使用:能够附带class属性的元素都能使用类选择器,将元素的class属性设置为类名即可


      一个标签也可以同时引入多个类选择器
     

      表示div同时引用了c1类样式和c2类样式


      类选择器和元素选择器结合使用:
      能够实现对某种元素中不同样式的细分控制。又称之为"分类选择器"
      语法:元素选择器.类选择器{}
        p.important{}

   4、id选择器

      特点:作用于指定id属性值得元素上
      语法:#idName{}


      #header{ .... }
     

      id属性:
        1、标识元素的唯一的值
2、引用样式表中的id样式

   5、群组选择器

      选择器的声明是以逗号","隔开的选择器列表
      作用:将相同的规则用于多个元素中
      语法:选择器1,选择器2,..{}

   6、后代选择器

     

 

     

      作用:根据元素的位置关系(层次)找到元素，然后改掉样式
      语法:选择器1 选择器2{}
      div span{}  /*div里所有的span
      div .s1{}

   7、子代选择器

      子代：只描述父子关系的,标签嵌套也局限于父子关系的嵌套
     

 

     

      span.s1是fieldset的子代元素
      span.s2是fieldset的子代元素吗?不是!是div的子代元素,是fieldset的后代元素。
      语法:
      选择器1>选择器2{}
      fieldset>span{}
      fieldset>.s1{}

   8、伪类选择器

      作用:为一些选择器添加特殊的效果,多数表示的是一个元素(选择器)的不同状态
      语法: 通过 : 作为结合符
          选择器:伪类选择器
      伪类的分类:
        链接伪类
动态伪类
目标伪类
元素状态伪类
结构伪类
否定伪类
     链接伪类:
        :link 尚未访问的链接
:visited 访问过的链接状态
a:link{}
a:visited{}
     动态伪类:
        :hover 鼠标悬停在元素上的状态
:active 元素被激活时的状态
:focus 元素获取焦点时的状态


     需要掌握:
       :link
       :visited
       :hover
       :active

8、选择器的优先级

   

   div{color:blue;}
   #d1{color:green;}
   .red{color:red;}
   优先级:
   内联>ID>类(伪类)>元素


      

9、颜色

   #rrggbb : 6位16进制数字
      每一位的范围:0-9 A-F
      #3A7765
      #000080 : 蓝色
      #B9E5FC : 
      #FFAA11 -> #FA1

10、尺寸

    在HTML中哪些元素适合使用尺寸属性
    1、所有的块级元素
       div,p,h1...ul ol li
    2、大部分行内元素不适合使用尺寸属性
       span
    3、存在width与height属性的元素
       img,table ... ...

11、边框

    border:边框
    方向:
    left,right,top,bottom
    大小:
    width
    样式:
    style
    颜色:
    color
    border:四个方向的 大小 样式 颜色
    border:大小 样式 颜色;
    border-方向:大小 样式 颜色;
    border-颜色:
    border-样式:
    border-大小:
    border-方向-颜色:
    border-方向-样式:


    border-bottom-width:10px;
    border-style:solid;
    border-bottom:1px solid black;

12、边框阴影

    box-shadow:向方框添加阴影
    box-shadow:h-shadow v-shadow blur spread color inset
    h-shadow:必选，水平阴影偏移距离
    v-shadow:必选，垂直阴影偏移距离
    blur : 可选，模糊程度
    spread : 可选，阴影尺寸
    color : 可选阴影颜色
    inset : 可选，将外部阴影改为内部阴影(outset)

13、图片边框

    由图像作为元素的边框显示效果
    border-image:src width repeat
      repeat:
         repeat: 平铺
round : 铺满
stretch : 拉伸
    border-image-source:图片的路径
      border-image-source:url(img/aa.jpg);
    border-image-width:图片边框宽度
    border-image-repeat:边框平铺
      repeat,round,stretch

14、轮廓

    轮廓(outline)是绘制于元素周围的一条线，在边框的外围
    语法:
     outline:color style width;
     outline-color:
     outline-style:
     outline-width:

二、

1、外边距-margin 

   1、取值
      margin:10px; -->上下左右各10px
      margin:5px 10px; -->上下5px 左右10px
      margin:5px 10px 5px;-->上5px 左右10px 下5px
      margin:5px 10px 5px 10px;
       上5px 右10px 下5px 左10px
   2、外边距合并
      当上下外边距相遇时，它们将形成一个外边距，称之为合并外边距。最终的边距距离，以数值大的为准。

2、内边距 - padding

   1、什么是内边距
      内容区域与边框之间的空间
      注意:会扩大元素边框所占用的区域
   2、赋值
      padding:value;
      内边距属性值可以为像素、百分比，不能是负数
      padding-left:
      padding-right:
      padding-bottom:
      padding-top:


      padding:value(上下) value(左右);
      padding:v1(上) v2(左右) v3(下);
      padding:v1(上) v2(右) v3(下) v4(左);

3、CSS重写

   目的：去除有些标签默认显示效果
      hn
      p
      ul
      ol
      dl dt dd
   方式：将margin padding 全部设置为0 , 将 list-style-type:none;

4、背景图像

   1、背景图像尺寸

      属性:background-size
      取值:
        v1 v2 : 宽度 高度
v1% v2% : 原始大小的百分比
cover : 扩展背景图像，使背景图完全覆盖背景区域
contain:将图像扩展至最大尺寸，使宽度和高度自适应内容区域(按比例拉伸)

   2、背景图片固定

     属性:background-attachment
     值:
        scroll:滚动，默认值
fixed : 背景图像固定

   3、背景定位

     属性:background-position
     值:
        left
right
top
bottom
center
x% y%:第一个值表示水平偏移量，第二个值，垂直偏移量
x y:x表示水平偏移量，y表示垂直偏移量

   4、背景绘制区域(颜色)

      属性:background-clip
      取值:
border-box:背景被裁剪到边框,默认值
padding-box:背景被裁剪到内边距框
content-box:背景被裁剪到内容框

   5、背景定位区域(图像)

      属性:background-origin
      取值:
border-box:
padding-box:
content-box:

  6、背景属性

     在以个属性中声明所有的相关的背景属性
     语法:
     background:color url() repeat attachment position;


     background:red url(user.jpg)  no-repeat -35px 25px;

5、渐变

   raidal-gradient([size at postion])
   size:半径
   postion:
     left
     top
     bottom
     right
     x y : 距离左上方圆心定位

三、

1、控制字体

   1、指定字体

      属性:font-family:value value value;

   2、字体大小

      font-size:value;

   3、字体加粗

      font-weight:
      取值:
         bold : 加粗 
normal : 正常
value :
     100
     200....900...
     400 : normal
     900 : bold

   4、字体样式(斜体)

      font-style:
      取值:
         normal
italic

   5、小型大写字母

      font-variant
      取值:
         normal
small-caps

   6、字体属性

      font:font-style font-variant font-weight font-size font-family;


      font:12px Times,New York,微软雅黑

2、控制文本格式

   1、文本颜色

      属性:color

   2、文本水平对齐方式

      text-align:left/center/right

   3、文字线条修饰

      属性:text-decoration
           none
   underline 下划线
   overline 上划线
   line-through 删除线

   4、行高

      注意:如果行高的高度高于文本自身的高度的话，那么文本将在这段区域内垂直居中显示
      属性:line-height
      取值:
         常用值 与所在容器设置相同高度

   5、首行文本缩进

      属性:text-indent
      取值:缩进的距离 比如:20px

   6、文本阴影

      属性:
       text-shadow:h-shadow v-shadow blur color;

   7、文本溢出

      1、处理空白

         white-space:normal/nowrap

      2、文本溢出

         text-overflow:
取值:
    clip:不显示
    ellipsis:使用 ... 替代溢出文本
注意:text-overflow属性，配合着 overflow:hidden 联用
否则，text-overflow无效果

   8、文本换行

      1、长单词换行

         long long long
longlonglong
属性:word-wrap
取值:
    noraml
    break-word

      2、文本换行

         word-break:
取值:
   normal 正常
   break-all:不关心单词显示完整的问题，该换就换
   keep-all:当单词到达边界处后根据半角空格" "和连字符"-"

3、表格

   1、表格特有属性

      1、边框合并

         属性:border-collapse
取值:
      separate(默认值)
      collapse(边框合并)

      2、边框边距

         table的属性cellspacing
注意:必须是border-collapse为separate的时候才有作用
属性:border-spacing
取值:
     v1 : 水平和垂直方向的距离都是v1
     v1 v2 : v1表示水平间距,v2表示垂直间距

      3、标题位置

         属性:caption-side
取值:
      top: 默认
      bottom: 靠下

      4、显示规则

         固定布局
属性:table-layout
取值:
      auto : 列宽度由单元格内容来决定
      fixed : 列宽度由表格宽度和列宽决定，不受内容所影响