css总结

css层叠样式表
    写法分类:
        1、内联(行内)
            写在标签里面,以属性的形式表现,属性名是style
        2、内嵌
            写在head标签里面,以标签的形式表现,标签名style
        3、外部引用
            写在head标签里面,以标签的形式表现,标签名link
    样式格式:
        样式名:样式值
        样式名1:样式值1
        ...
    选择器:找元素,找标签
    选择器格式{
        样式名:样式值;
        样式名1:样式值1;
        }
    选择器有哪些:
        标签选择器     标签名
        id选择器    #id属性值
        class选择器    .class属性值
        并列选择器    选择器1,选择器2 {}(关键符号:,)
        后代选择器    选择器1 选择器2 {}(关键符号:空格)    
        属性选择器    选择器【属性名=‘属性值’】{}
优先级:行内的是最高优先级
(权值越高 优先级越高)
行内    1000
id   100
clear   10
标签    1
*(通用选择器)    0
        color: blue;字体颜色 font-weight:bold;字体加粗background: red底色
        span文字本身
        div正行
一般样式:文本,背景,字体
     布局:定位,浮动,显示
     动画:渐变,旋转,3D

一般样式标签背景background-*
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
文本:text-*
    text-decoration
    text-transform
    text-align
    text-background
    text-indent
    line-height 行高:尽量不要换行
字体:font-*
    font-family
    font-size
    font—weight
    font—stype
    color
列表 list-*
    list-style—type
    list-style—imag
    list-style—type




布局页面时 (先把区块分好 大色块 小色块 小色块....内容)
布局:定位,浮动,显示,层级,盒子模型
浮动:float: left right
设一个父标签 设定宽高 里面随便浮动
超出部分cstyle="overflow: hidden超出隐藏 slrll滚动
 overflow-x
 overflow-y
 盒子模型:
     从里到外:内容-内边距-边框-外边框
     对应样式:内容-padding-border-margin
     盒子模型的样式分上下左右
     top left right bottom
 
    border-left-width:1px;
    border-left-style:solid
    border-left-color:red
    border-left:1px solid red;
    border : 1px solie red
   
       padding-left:10px
    padding:10px;
    padding:10px;
盒子模型自适应:box-sizing:border-box
    margin 第一个子标签设置margin会作用到父标签


定位
    postion:fixed absolute 绝对定位 relative相对定位
                  top left right bottom
    fixed:相对窗口定位 通过上下左右调整位置
    absolute:相对于body定位
    相对于最近的有position样式属性的父标签定位  到body为止
    relative相对自身定位 通常用来限制子标签的absolute
    有自身位置 通常用来微调



20180717总结
讲了语法:
1窗口:
alert();告警框、confirm();选择框、prompt();输入框
2标识符:组成:
数字、字母、下划线(不能以数字开头)、见名知意、习惯
3变量(容器):定义、赋值、使用
4数据类型:number数字、string字符串、boolean布尔、null空、undefined没有定义、object对象
5运算符:算数运算符、赋值运算符、条件运算符、逻辑运算符、三目运算符
6讲了ps切图和图层取图
7做一个判断三位数是否是水仙花数的js

posted @ 2018-07-17 17:27  收起你的小情绪  阅读(192)  评论(0编辑  收藏  举报