• CSS样式表


    CSS 指层叠样式表 (Cascading Style Sheets),为了美化Html界面,提高工作效率.

       语法结构:

       例:                         

    基本分3种形式,其中 内联样式 有最高优先执行权.

    1. 外部样式表
    2. 内部样式表(位于 <head> 标签内部)
    3. 内联样式(在 HTML 元素内部)

    1,内联样式表

    在每一个 标签<>内写入 style="", " "内写内容,虽然控制精准,但是重用性差如果大量使用会给多写很多代码

    2,内部样式表

    必须位于<head> 内,当浏览器加在首先加载CSS样式表.

    3,外部样式表

    也必须位于<head>内,就是把 内部样式表在Html页面外建了一个.CSS结尾的文件,在head里面写一个<link>连接 把这个CSS文件连接进来,比起内部样式表来系统多执行了一步寻找文件,这里href路径必须写对,一般这个CSS文件要放在Html文件夹里. 这样写的好处就是在Html页面不会看到CSS过多代码,显得整齐.

    __________________________________________________分割线__________________________________________________________

    选择器:

    因为一个Html页面里面会有多个<div>,<p>等标签,如果我们一味的 用div{} 来写样式的话那么所有的div都是千篇一律的,如果用内联样式再改个别div那么CSS就不好使了. 所以这里我们在标签里面也分类 class 和 id 如: <div class="div1"></div>  <div id="id1"></div>

    如果我们要改 一的 div样式的话就可以 .div1{样式}    选择 class使用 . id不允许重复.

    如果要改 二的 div样式的话就可以 #id1{样式}  选择 id使用 #

    id选择器优先级高于class选择器优先级高于标签名选择器,优先级高的会覆盖掉优先级低的样式,样式表优先级高于属性的

    复合选择器

    以逗号隔开;并列关系,同时起作用如:#xx,#dd{ 样式 }
    以空格隔开,后代关系,如果p在div里面,则用 div p { 样式 }
    以点隔开的,筛选关系,p.qd { }对p进行class筛选,p里class为qd的执行样式

    __________________________________________________分割线__________________________________________________________

    引用:

    (二)样式:

    一:背景与前景
    background-color:#eeeeff;背景颜色
    background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg);背景图片(默认平铺):

    background-attachment:fixed; 背景固定
    background-attachment:scroll;背景和字一起滚动,默认是一起
    background-repeat:repeat;对齐方式,默认平铺repeat
    background-repeat:no-repeat;不平铺
    background-repeat:repeat-x;横向平铺
    background-repeat:repeat-y;纵向平铺
    background-position:center;不平铺的情况下位置放到中间
    background-position:right bottom;右下角
    background-position:right 100px bottom 100px;离右边100,离下面100,可以是负的值

    前景
    font-family:"隶书";字体名称(微软雅黑,宋体)
    font-size:12px; 字体大小,像素(12px,14px,18px)8em默认字体的8倍还可以用百分比
    font-weight:100; bold,normal 是否加粗
    font-style:inherit; italic,normal是否倾斜
    color:#09F;颜色

    文本对齐修饰
    text-decoration:underline;下划线,overline上划线,line-through删除线,none是去掉下划线,可以去掉超链接的下划线
    text-align:center;横向对齐方式
    vertical-align:middle;纵向对齐方式top.middle,bottom
    text-indent:首行缩进量,如果字体是14px,则缩进两个位28px
    line-height:行高 一般是1.5到2倍的字体大小

    二:边界与边框

    1.border类:边框

    border: 5px solid blue ;5个像素的粗细,样式是实线,颜色是blue;
    border-5px; border-style:double;border-color:red;这是分开设置粗细,样式和颜色
    border-top:5px solid red;设置上面的 border-bottom:5px solid red;设置下面的


    2.margin类:外边距

    margin:10px;四个边距都是10px; margin-top:10px; right,left,bottom;上右左下
    margin:10px 0px 10px 0px;顺序是顺时针:上右下左。

    3.padding类:内边距

    padding:10px 0px 10px 0px;顺时针,上右下左

    三:列表与方块

    默认布局方式,流式布局,上到下,左到右,相对流式布局

    width,height, 只有在绝对定位布局时可用(left,top,right,bottom)

    对ol列表:
    list-style:none;去掉有序数字 circle;是圆圈,disc圆点
    list-style-image:url(images/8.jpg);列表图片
    list-style-position:outside; 符号在边距上,inside符号在边距之内
    margin padding 默认是有边距和间距
    list-style-type:disc 类型

    四:格式与布局

    布局的时候一般最上面写上:

    *
    {
    margin:0px auto;
    padding:0px;
    }

    让所有的外距和内距为0,加了auto居中。

    1.position:
    obsolute; 绝对定位,放在页面首屏的那个位置,跟着滚动
    外层没有position=absolute或relative它按照浏览器边框定位
    如果外层有position=absolute或relative它按照外层的那个元素的边框进行定位

    fixed; 固定在页面的一个位置上,滚动屏幕,它不动,针对浏览器边框定位


    正常一个div默认占一行,确定它本来应该在的位置, 如果不设置position,则left,right,top,bottom不管用
    relative;相当于之前应当在的位置进行移动,之前的位置应该是左上角

    2.z-index:9; z轴,控制谁在上层,大的压小的

    3.溢出overflow:超出范围
    hidden隐藏 scroll出现滚动条

    4.float:浮动方向,原本默认占一行,float之后可以在一行内放多个
    float:left 从左边浮

    5.clear:both 截断流 加一行<div style="clear:both">截断浮动流

    6.cursor:pointer鼠标放到上面变形状,pointer为手

    7.margin:auto 页面居中

    8.显示方式:dispaly:none不显示/block 块换行/inline在一行上,宽和高都不可用/inline-block在一行上显示,可以设置宽和高     不显示也不占地方

    9.visibility:可视性,hidden隐藏,visible显示。不显示但是占地方

    10.超链接的:

    a:link 没访问过的效果
    {
    text-decoration:none;
    color:

    }
    a:visited 访问过的效果
    {
    color:
    }
    a:hover 鼠标放上去时候的效果
    {
    color:
    }

    11.特殊符号:&copy; 版权符号

    12.半透明效果

    <div class="box">透明区域</div>

    样式表中
    .box
    {
    opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
    }

  • 相关阅读:
    WPF XAML之bing使用StringFormat
    C#程序以管理员权限运行
    注册表REG文件编写大全
    linux 的基本操作(编写shell 脚本)
    linux的基本操作(正则表达式)
    linux的基本操作(shell 脚本的基础知识)
    linux的基本操作(RPM包或者安装源码包)
    linux的基本操作(文件压缩与打包)
    linux的基本操作(文本编辑工具vim)
    linux的基本操作(磁盘管理)
  • 原文地址:https://www.cnblogs.com/18553325o9o/p/4679092.html
Copyright © 2020-2023  润新知