• CSS


    CSS的语法
    位置
    <head>
    <style type="text/css">
    //CSS代码
    </style>

    语法
    选择器{
    属性名1:属性值1;
    属性名2:属性2;
    }
    列:
    h1{z
    font-size; --字体大小
    color: blue; --字体颜色
    }
    注意:多个属性用分号分隔

    类选择器
    语法:
    .Class属性值{
    。。。。。
    }
    步骤:
    第一步:给指定的html标签加上class属性
    第二步:在style中写
    .class属性值{
    。。。。。
    }

    ID选择器
    语法:
    #ID属性值{
    XXXXX
    }

    步骤:
    第一步:给指定的html标签加上ID属性
    第二步:在style中写
    #ID属性值{
    XXXXXXX
    }

    行内样式
    使用style属性引入样式。
    列:<h1 style="font-size:10PX;color:red">XXX</h1>

    内部样式
    在html中写style
    列h1{
    XXXXX
    }

    外部样式表表
    把CSS代码保存在以CSS结尾的文件中(层叠样式文件)
    把CSS文件引入html中;

    引入方式两种:
    第一种:链接方式
    <iink rel="stylesheet" href="文件路径" type="text/css">

    第二钟:导入方式
    <style>
    @import url("文件路径");
    </style>

    优先级
    行内样式>内部样式>外部样式(就近原则)
    ID选择器>class选择器>标签选择器

    高级选择器

    后代选择器
    父标签 子标签{
    xxxxx
    }

    交集选择器
    标签选择器(class选择器或者ID选择器){
    XXXX
    }

    并集选择器
    选择器1,选择器2,选择器3,。。。选择器n{
    XXXXXXXXXXXXX
    }

    字体样式
    font-family:字体类型
    font-size:字体大小
    font-weight:字体的粗细(bold)
    font-style:字体的倾斜(italic)
    font:倾斜 粗细 大小 类型

    文本样式
    color:颜色
    text-align:文本水平对齐方式(left丨center丨right)
    text-indent:首行缩进
    line-height:行高
    text-decoration:修饰线(underline丨overline丨line-through)
    vertical-align:垂直对齐方式(top丨middle丨bottom)
    注意:vertical-align:用于td中。

    超链接伪类
    a:link:表示没有访问
    a:visited:表示被访问后
    a:hover:鼠标悬浮
    a:active:鼠标按下未松开

    编写顺序:link>visite>hpver>active

    背景样式
    background-color:背景颜色
    background-image:url(图片地址)背景图片
    background-repeat:图片平铺方式(no-repeat,repeat,repeat-X,repeat-Y)
    background-position:图片的位置(X,Y丨X%,Y%丨center,left,right丨top,center,bottom)
    简单写法:background:颜色,图片,位置,平铺方式

    列表样式
    list-stype-type:列表样式
    list-stype-image:url(图片样式)
    list-stype-position:位置(inside丨outside)
    简单写法:list-stype:图片样式 位置

    盒子模型

    height:宽
    border:边框
    padding:内边框
    margin:外边距 

    边框
    border:简写
    border-color:颜色
    border-边框宽度
    border-style:边框的风格
    注意:边框分为上右下左,可以分别设置值
    border-color:red blue green yellow;

    外边距
    margin:外边距
    margin-top:上外边距
    margin-left:左外边距
    margin-right:右外边距
    margin-bottom:底外边距

    内边距
    padding:内边距
    padding-top:上内边距
    padding-left:左内边距
    padding-right:右内边距
    padding-bottom:底内边距

    display属性
    display:none;表示的隐藏元素
    display:block;块级元素(显示)
    display:inline;内联元素(显示)

    浮动
    float:left,right,none;
    注意:a.浮动元素会把当前的块级元素变成内联元素
    b.不在标准文档流中.(不会按普通元素排版)

    清除浮动
    clear:both(清除左右浮动);
    left(清除左浮动);
    right(清除右浮动);

    溢出处理
    overflow:none(默认)
    hidden(隐藏)
    scroll(滚动)
    auto(自动滚动)
    注意:可以通过overflow:hidden设置浮动元素的父元素的高度,使它包裹整个浮动元

    元素定位(position)
    static:默认
    relative:相对定位
    absolute:绝对定位
    fixed:固定定位(建议不要使用 部分浏览器不兼容)

    注意:a.相对布局的和决定布局如果它的直接父标签是body,那么相对位置和绝对位置
    的起始点不相同,如果他们的直接父标签的div,那么他们的起始点都在父标签的左上角。

    注意:b.绝对布局都是从父标签的左上角开始,相对布局遵从标准文档流格式。

    注意:c.绝对布局一定要设置top或者left才会生效。

    重叠关系(z-index)
    默认值为0,
    值可以是任何数,
    值越大,位置在越前面。

    透明度
    opacity:0-1 值越小越透明

     

  • 相关阅读:
    [zt]VisualStudio2005技巧集合你真的会使用断点吗?
    轻松掌握Windows窗体间的数据交互
    Real Multithreading in .NET 2.0
    [zt]petshop4.0 详解之八(PetShop表示层设计)
    9.6 english log
    浅谈“三层结构”原理与用意
    [zt]petshop4.0 详解之四(PetShop之ASP.NET缓存)
    [虚拟技术]你会选谁:Red Hat还是Ubuntu KVM虚拟化?
    [虚拟技术]Linux KVM与Xen,QEMU的性能比较
    [虚拟化平台技术]选择哪一种虚拟化平台 KVM还是Xen?
  • 原文地址:https://www.cnblogs.com/LunWeiFeng/p/6829889.html
Copyright © 2020-2023  润新知