首页 > 代码库 > CSS的基础样式(复习项)

CSS的基础样式(复习项)

 1.基本样式:
————宽
     属性:width
     属性值:长度值

————高
     属性:height
     属性值:长度值

————块级元素与行内元素之间的转换
     属性:  display
     属性值:block     转换为块级元素
            inline   转换为行内元素
             inline-block   转换成行内块元素
    linline-block可以设置宽高,但是不会换行

2.背景属性:
CSS可以用纯色调作为背景,也可以用图片作为背景

————背景色
     属性:backgroud-color
     属性值:   颜色

————背景图像
     属性:backgroud-image
     属性值:  图片地址

————背景平铺
     属性:background-repeat
     属性值:repeat     x,y轴平铺(默认)
             repeat-x       x轴平铺
           repeat-y      y轴平铺
           no-repeat       不平铺(图片不改变大小)

    body{background-image:url("pic1.jpg");
    background-repeat:no-repeat;}

————背景定位
     属性:bcckgroud-position
     属性值:center right left top bottom
            40%  50%
            50px   60px

————背景关联
     属性:background-anttachiment
     属性值:scroll     (背景随文档滚动,页面下滑时,图片有影响)
            fixed       (图像相对于可视区域固定,不受滚动影响【小广告】)

————背景尺寸
     属性:background-size
     属性值:长度值    百分比   
             cover (背景按比例扩大,使图像完全覆盖背景边框,多出去的部分剪掉)
            contain (背景按比例扩大,只要有任一边覆盖父级,扩大停止)


————规定背景定位
     属性:background-origin
     属性值:padding-box (背景图像相对于边框内边线定位)
           border-box  (背景图像相对于边框外边线定位)
           content-box  (背景图像相对于内容开始)

————背景绘制区域
     属性:backgroud-clip
     属性值:border-box  (图片超出边框线被减)
            padding-box  (背景超内边框被减)
            content-box  (背景超出内容框被减)


三.
————字体属性

     font-family(字体族):“宋体”,“黑体”,“arial”
     font-style(字体样式):normal(常规),italic(斜体)
                             oblique(倾斜)
     font-variant(字体变化):normal(常规),small-caps
                            (把小写字母转换成小型大写字母)
     font-weight(字体加粗):normal(常规),bold(加粗)
     font-size(字体大小):20px(写偶数)
    简写:p{
    font:italic small-caps bold 12px/1.5em arial,verdana;
    }         简写情况下font-size和 font-family必须有


四。文本属性
————1.属性:color
     
————2.缩进文本
     属性:text-indent
     属性值:正数        负数        百分比        2em(常用,文本开始空格2个)
    缩进文本只对块级元素有用

————3.水平对齐
     属性:text-align
     属性值:left        center        right

————4.垂直对齐
     属性:vertical-align
     属性值:baseline   <!-- 基线对齐(默认) -->
             top       (顶部对齐)
             middle     (居中对齐)
             bottom     (底部对齐)
             长度值
    针对行内元素。即一行字的大小不一的上下移动对齐

————5.词间隔
     属性:word-spacing
     属性值:正长度值
            负长度值

————6.字间距
     属性:letter-spacing
     属性值:正长度值
            负长度值

————7.字符转换
     属性:text-transform
     属性值: none        <!-- 无改动(默认) -->
             uppercase   <!-- 转换成大写 -->
             lowercase   <!-- 转换成小写 -->
             capitalize  <!-- 首字母大写 -->

————8.文本装饰
     属  性:text-decoration
     属性值: none            <!-- 无装饰 -->
             underline       <!-- 下划线 -->
             overline        <!-- 上划线 -->
             line-through    <!-- 贯穿线 -->

————9.文本换行
     属  性:word-wrap
     属性值:normal        <!-- 不自动换行(默认) -->
            break-word    <!-- 自动换行 -->

————10.行高
     属  性:line-height
     属性值:长度值
     
————11.文本阴影
     属性:text-shadow
     属性值: x轴 y轴   opacity(模糊值) color(颜色)
    {text-shadow:10px  10px  1px  red}


六.边框

————边框样式(table标签)
     属  性:border-style
             属性值: none   <!-- 无边框 -->边框属性
              dotted    <!-- 点线 -->
             solid     <!-- 实线 -->
             double    <!-- 双线 -->
              dashed    <!-- 虚线 -->
    说明:border-style 可以同时设置一、二、三、四个值。不同数量的值表现形式也不一样。
    四个值:
    border-style:dotted solid double dashed; 
    上边框是点线
    右边框是实线
    下边框是双线
    左边框是虚线

    说明:border-style 可以同时设置一、二、三、四个值。不同数量的值表现形式也不一样。

    三个值:
    border-style:dotted solid double;
    上边框是点线
    右边框和左边框是实线
    下边框是双线

    两个值:
    border-style:dotted solid;
    上边框和下边框是点线
    右边框和左边框是实线

————边框宽度
     属  性:border-width
     属性值: thin     <!-- 细边框 -->
             medium   <!-- 中等边框(默认) -->
             thick    <!-- 粗边框 -->
             长度值    <!-- 自定义宽度 -->

————边框颜色
     属  性:border-color
     属性值:各种类型的颜色值
    说明:同样也可以设置一到四个值,表现方式与 border-style 顺序一样。

————单方向边框
     除了可以设置四个方向不同的边框样式外,也可以单独给某一个方向设置边框。
     属  性:border-top       <!-- 上边框 -->
     border-right     <!-- 右边框 -->
     border-bottom    <!-- 下边框 -->
     border-left      <!-- 左边框 -->
     属性值:width style color(三个值的顺序可以打乱)


七:

————轮廓属性
     属  性:outline
     说明:属性跟用法都跟边框 border 大致一样。但不能分四个方式设置不同的样式。(注意outline是属性,属性值与border一样)
    注意:
    border 和 outline 的区别:
    border 在页面中会占据空间,而 outline 在页面中虽然可以设置宽度,但是不会占据页面空间。


————边框CSS合并
     table, th, td {
     border: 1px solid blue;
     }

————折叠边框
     属  性:border-collapse
     属性值:collapse
    说明:该属性定义在 table 标签上,将表格边框设置为单线边框。(还是在CSS中写,选择器为父级table,而不是<tr>,<td>)

CSS的基础样式(复习项)