8-14 钟申义 日志

学习总结:
设置字体大小
font-size px pt em rem

   设置字体类型
    font-family
    设置字体加粗
        font-weight     normal   lighter   bold   bolder   无单位的数字,100的整数倍,100~900

    设置字体样式
        font-style   normal    italic

    小型大写字母
        font-variant   normal   small-caps    (inherit应该从父元素继承 font-variant 属性的值)

    字体属性的简写方式
        font:style variant weight size family;

        font:itailc small-caps bold 40px chiller;

        font:size family;
文本属性
    设置字体颜色
        color颜色的单词
            #rrggbb       #ff0000:红色
            #rgb            #f00:红色     rgb(r,g,b)     rgb(r%,g%,b%)     rgba(r,g,b,alpha)     transparent 透明,相当于rgba(0,0,0,0)
    文本对齐方式
        text-align   left   center   right   justify    
        text-align:center 和 margin:auto 的区别
            1. text-align:center;  设置这个元素内部的内容(文本、行内元素、行内块)水平居中对齐,但是不会块级元素居中对齐,但是后代的块级元素会继承 text-align:center; 属性
            2. margin:auto;  让元素本身水平居中
    行高  line-height
            属性取值
                1. 以px为单位的数字,一般,行高的值与容器的高度值相同,让文本在容器中垂直居中显示。但是,如果文本有多行,不建议使用行高
                2. 无单位的数字(整数都可以),行高的值为字号的倍数
            特点
                1. 定义一行数据的高度
                2. 如果行高高度大于字体大小,换行文本将在指定的行高内,呈垂直居中的方式显示
            设置文本内容垂直居中    line-height: height
    文本的线条修饰
        text-decoration   underline  overline  line-through   none

    首行缩进
        text-indent   以px为单位的数字
    文本阴影
        text-shadow:h-shadow v-shadow blur color

    轮廓
        只能是-webkit-:chrome、safari
  八、背景
背景颜色   background-color

背景图片    background-image:url(图片路径);

背景图片的平铺    background-repeat   repeat:默认值,平铺   no-repeat:不平铺    repeat-x:x轴平铺    repeat-y:y轴平铺

背景图片的定位  background-position
                                x,y 以px为单位的数字,定义横向偏移和纵向的偏移位置
        关键字 x:left/center/right  y:top/center/bottom
        百分比  x% y%(精灵图)
背景图片的尺寸  background-size
        1. x,y 以px为单位设置具体宽高
        2. 百分比 x% y%
        3. cover:填充,覆盖 ,让背景图充满整个容器,哪怕图片显示不全也没有关系
        4. contain:包含,让容器可以完整的包含整张图片,这里图片是完整的。容器有空白区域没关系
        5. auto:默认值,背景图像的真实大小
背景图片的固定
    backgroung-attachment   scroll:默认值,背景图片会随着窗口滚动条滚动  
                                                                    fixed:背景图相对于窗口固定,窗口滚动时背景图片位置不变,但是只会在元容器内显示
背景简写
    background:color  url()  repeat  attachment  position;
    background:color/url();
背景渐变
    线性渐变
        background-image : linear-gradient(angle,color-point1,color-point2,....)
            angle   关键字   to top:从下到上   to bottom:从上到下   to left:从右到左   to right:从左到右
                       角度值    0deg:从下到上    90deg:从左到右        180deg:从上到下   270deg:从右到左
            color-point     合法的颜色值+位置    位置取值:以px为单位的数字/%
    径向渐变
        background-image : radial-gradient(半径 at 圆心x 圆心 y,color-point1,color-point2,....)
            半径    取值:以px为单位的数字,色标中必须写%,半径才有效
            圆心   圆心属性取值    1. x y,以px为单位的数字  2. x% y%   3. 关键字   x:left/center/right      y:top/center/bottom

    重复渐变
        重复的线性渐变
            background-image:repeating-linear-gradient(angle,color-point1,color-point2,..)
        重复的径向渐变
            backgrond-image:repeating-radial-gradient(半经 at 圆心x 圆心y,color-point....)
    浏览器兼容性问题(ie8.0以下不考虑)
        渐变属性,支持低版本浏览器的写法
            编写兼容低版本浏览器代码这个行为,叫css hack
            添加浏览器内核的前缀
                -moz-:Firefox
                -webkit-:Chrome/Safari
                -o-:Opera
                -ms-:IE
            当有前缀时,写方向的时候,就不再写to,方向此时定义的是起点
            当没有前缀,写方向的时候,要写to,方向定义的是终点
     八、表格
           table
        尺寸、边框、背景、字体、文本、内外边距
        table设置边框,只设置外部最大的边框,对单元格边框无效
           td/th
        尺寸、边框、背景、字体、文本、内边距 等有效
        td/th设置外边距无效
        vertical-align:设置单元格数据的垂直对齐方式   top:上对齐    middle:垂直居中对齐   bottom:下对齐
          边框合并
        border-collapse    separate:默认值,边框分离   collapse:边框合并
          边框边距
                   border-spacing
            1. 取一个值,同时设置水平和垂直边框边距
            2. 取两个值,第一个设置水平,第二个设置垂直
        表格标题位置
        caption-side   top:标题在顶部    bottom:标题在底部

        设置表格的显示规则
        table-layout
            auto
                1. 单元格的大小都会自动适应内容
                2. 表格复杂时,加载速度较慢
                3. 自动布局比较灵活
                4. 用于不确定每列大小的,并且不复杂的表格
            fixed
                1. 单元格大小取决于设置的宽高
                2. 任何情况下,都会加速加载表格
                3. 固定表格布局不够灵活
                4. 应用于明确知道每列大小的表格
    九、列表
列表项类型
    list-style-type    disc:默认,实心圆    circle:空心圆   square:实心方块   none:无
设置列表项为图片
    list-style-image:url(1.png);
列表项的位置
    list-style-position   inside   outside:默认值
列表简写
    list-style: type image position;
                            list-style: circle  square  inside

学习心得
感觉越来越适应这边的生活了。今天学习的也很充实!

标签

评论

this is is footer