3.20 css样式

      今天跟着老师把官网做了一下,讲的挺快,不过大部分还是能听进去,讲完完事就开始让我们自己做,我就先做我那个学校的官网,没有啥会不会得,不会就查,有书有老师有百度,所以说没啥不会的,就看你掌握的熟不熟练,总体来说我希望老师给我压力,让我们快速的学完js然后考我们css,考完再考js,这样我们才能给自己压力,知道记忆力的一重要。 

       现在还早,还有时间努力,继续加油吧。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
内联
    写在标签里面
    style="样式"
    控制精确,代码重用性差
内嵌
    嵌在页面的head里面
    <style type="text/css"></style>
    控制没有内联的精确,代码重用性好
外部
    单独的样式文件
    引入:右键-CSS样式表-附加样式表
    引入:<link href="test.css" rel="stylesheet" type="text/cs"/>
    控制没有内联的精确,代码重用性最好
样式表用来选取元素的
标签
    根据标签名选中元素
class
    . (点)
    根据class名来筛选元素
id
    # (井号)
    根据id名来筛选出唯一元素
    不能使用数字开头(中文开头)
复合
    逗号并列
        div,span
    空格后代
        #list li
    点筛选
        div.s
标签>*,class>标签,id>class
大小
    width
        宽度
    height
        高度
背景
    background-color
        背景色
    background-image
        背景图片
    background-repeat
        背景图的平铺方式
    background-position
        背景图片位置
    background-attachment
        设置背景图片是否滚动
    background-size
        背景图的大小 200px 200px
字体
    font-family
        字体样式
    font-size
        字体大小 12px  14px
    font-style
        italic倾斜
    font-weight
        bold加粗
    text-decoration
        underline下划线
        overline上划线
        line-through删除线
        none没有,用来去掉超链接的下划线
        <a><span>默认没法调整大小
    color
        字体颜色
对齐方式
    text-align
        水平对齐方式
    vertical-align
        垂直对齐方式,配合行高使用
    line-height
        行高
    text-indent
        缩进 单位像素
边界边框
    margin
        外边距  上右下左(所有的外面)
    padding
        内边距 上右下左  (嵌套的里面的和外面的距离)
        如果加了内边距,该元素会相应的变大
    border
        1px solid #60F 简写方式  第一个边框粗细 第二个边框样式 第三个边框颜色
列表方块
    list-style
        none将列表前面的序号去掉;inside是点在里面;outside是点在外面
    list-style-image
        可以将前面的序号变为图片
格式与布局
    位置
        position 不占位
            fixed固定
                相对于浏览器边框位置固定
            absolute绝对位置
                相对于父级元素(浏览器,绝对定位的上级)
            relative相对位置
                相对于自身应该出现的位置
        top
            距离上边的距离
        right
            距离右边的距离
        bottom
            距离下边的距离
        left
            距离左边的距离
    
        float
            left
                向左流
            right
                向右流
        clear
            both
                清掉流
    z-index分层
        值越大越靠上
其它
    display
        显示block和隐藏none,不占位置
    visibility
        显示visible和隐藏hidden,占位置
    overflow
        超出范围 hidden隐藏
    透明
        opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
    圆角
        border-radius:5px;
    阴影
        box-shadow:左20px 上20px 羽化10px white;
    hover 鼠标颜色

      样式表一些代码,抄袭备注。

posted @   峰栯  阅读(122)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示