中文
    达人设计 V
    职业:网页设计 LV.1 分享 举报
    内容简介:《div+css学习笔记》由达人设计整理,简单易懂,便于入门学习。
    • Q Q :605034058
    • 旺旺:网页设计
    • 电话:
    • 微信:
    div+css学习笔记
    2017-06-07 15:54:21 作者:达人设计 浏览(68111) 评论(0) 喜欢(0)

    一.建站流程

    平面设计 ---- 制作 ---- 程序

    1.平面设计:ps

    2.制作:div+css

    3.程序:asp: asp.net;  php;  jsp。

    jQuery:制作和程序中常用

    二.简介

    html:超文本标记语言 (最新版本html 5.0)

    xml:可扩展标记语言

    xhtml:相当于html 4.0版本

    html标签:<html></html>  <head></head>  <div></div>  <p></p>  <br />  ……

    常用标签:<div></div>  <ul><li></li></ul>  <dl><dt></dt><dd></dd><dl>

    CSS:(Cascading Style sheet)层叠样式表

    命名:一般以英文命名 (首字母不能为数字)

    三.css 调用方法

    外联:在<head></head>之间调用 <link type="text/css" rel="stylesheet" href="css/css.css"/>

    内联:写在<head></head>之间 <style rel="stylesheet" type="text/css"></style>

    内嵌:嵌在标签里style=" "

    四.属性

    1. class (.) id (#)

    2.属性写在花括符里,每条用逗号隔开 (内嵌 style=" ")

    3.常用:weight:宽 height:高 border:边线 margin:边距(margin:0 auto;居中) padding:填充 color:颜色 font-size:字号 font-family:字体 float:浮动(使两个div在同一行上)  background:背景

    4.边线

    border:1px solid #ccc;

    border-top:1px solid #ccc;

    border-left:

    border-right:

    border-bottom:

    solid:实线 dashed:虚线 dotted:点线 double:双线

    5.边距

    margin-top:10px;

    margin-left:10px;

    margin-right:10px;

    margin-bottom:10px;

    简写

    margin:10px;

    margin:10px 20px 30px 40px; (由上面开始 顺时针方向)

    margin:10px 20px; (上下10px  左右20px)

    边距还可以是负数

    6.填充

    padding-top:10px;

    padding-left:10px;

    padding-right:10px;

    padding-bottom:10px;

    简写

    padding:10px;

    padding:10px 20px 30px 40px; (由上面开始 顺时针方向)

    padding:10px 20px; (上下10px  左右20px)

    7.文字

    font-family:"黑体", Arial;

    font-size:12px; 文字大小

    color:#555;文字颜色

    font-weight:bold;

    line-height:22px; 行高

    text-indent:2em; 首行缩进(单位em首行缩进)

    text-align:center; 水平对齐

    word-spacing;英文单词

    letter-spacing:1px;汉字或字母间距

    font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜)

    简写 font:italic bold 12px/22px  arial, "宋体";

    文字两端对齐最后一行左对齐

    text-align:justify;

    text-justify:inter-ideograph;

    文字超出显示省略号

    text-overflow:ellipsis;

    white-space:nowrap;

    *white-space:nowrap;

    overflow:hidden;

    8.背景

    background-color:#fff;背景颜色

    background-image:url(../images/index2_01.png); 背景图片

    background-repeat:no-repeat; 背景不重复 值:repeat-x:x轴重复 repeat-y:y轴重复

    background-position:10px 20px;(离左边10像素 上边20像素)  它的值可以是:lef right center top bottom

    background-attachment:fixed; 背景浮动 scroll(默认值)背景滚动

    简写:

    background: #fff url(../images/index2_01.png) no-repeat 10px 20px  fixed;

    9.大小

    weight: 宽

    height: 高

    值可以的 auto (自动搞) %;

    例如:weight:20px;  weight:auto;  weight:80%;

    min 最小值

    max 最大值

    例如:min-height:最小高度 

    10.内隐藏属性overflow

    visible:默认值。内容不会被修剪,会呈现在元素框之外。

    hidden:内容会被修剪,并且其余内容是不可见的。

    scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    inherit:规定应该从父元素继承 overflow 属性的值。

    11.显示属性 display

    常用值

    none:此元素不会被显示。

    block:此元素将显示为块级元素,此元素前后会带有换行符。

    12.单位

    常用单位:px em(1em等于1个字大) %

    13.颜色

    颜色名称:(例如 red)

    RGB值:(例如 rgb(255,0,0))

    RGB百分比值:(例如 rgb(100%,0%,0%))

    十六进制数:(例如 #ff0000)

    简写:#ff9900 #f90

    14.超链接

    a:link:选择所有未被访问的链接。

    a:visited:选择所有已被访问的链接。

    a:active: 选择活动链接。

    a:hover:选择鼠标指针位于其上的链接。

    text-decoration:none; 去掉下划线

    15.圆角

    border-radius: 5px; 所有角都使用半径为5px的圆角,此属性为CSS3标准属性

    -moz-border-radius: 5px; Mozilla浏览器的私有属性

    -webkit-border-radius: 5px; Webkit浏览器的私有属性

    border-radius: 5px 4px 3px 2px; 四个半径值分别是左上角、右上角、右下角和左下角

    16.透明度

    (1)第一种

    filter:alpha();

    background:#000;

    opacity:0.5; 

    (2)第二种

    background:rgb(0,0,0);

    filter:alpha();

    background: rgba(0,0,0,0.6);

    opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.

    filter:alpha(); 这个是为老的IE设的,可取值在0-100,其它三个0到1.

    -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。

    -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

    17.固定宽高自动,或者固定高宽自动

    max-width:300px;

    _width:expression(this.width > 300 ? "300px" : this.width);

    18.选择器

    类选择器:.box{ color:#f00; }

    Id选择器:#box{ color:#f00; }

    标签选择器:body{ color:#f00; } div{ color:#f00; } img{ height:10px; }

    分组选择器:.box1,.box2{ color:#f00; }

    子选择器:.box>div{ color:#f00; }

    后代选择器:.box .box_01{ color:#f00; }

    :first-child(首个子对象)

    19.表格

    .box table{

      border-collapse:collapse;

    }

    .box td{

      border: 1px solid black;

      line-height:20px;

    }

    20.定位

    position: relative; 

    relative 相对的(相对于其正常位置进行定位top left)

    absolute 绝对的(相对于 static 定位以外的第一个父元素进行定位 top left right bottom) 

    fixed 漂浮 (相对于浏览器绝对定位top left right bottom)

    static 默认值 没有定位

    21. 优先级:

    后面的 > 前面的

    id > class

    内嵌 > 内联 > 外联

    z-index:9999; 数字越大优先级越大,默认为零

    22.兼容

    -ms-:IE

    -webkit-:Safari 和 Chrome

    -moz-:Firefox

    -o-:Opera

    IE、FF 共用 height: 100px !important(优先级)

    .box{

      width: 100px!important;

      width: 80px;

    }

    clear:both; 清除浮动

    display:inline; 此元素会被显示为内联元素,元素前后没有换行符。

    •  最多可以输入200个字符
    双击图片添加 X
    双击图片添加 X
    支付方式 |网页设计 |联系我们 |帮助中心 |网站地图 |app |微信
    技术支持: 达人设计  版权所有:© 达人设计  邮箱:605034058@qq.com  电话:13622397622   备案:粤ICP备13034152号  地址:深圳市南山区西丽社区2506