• css样式使用_css


    一、css简介

    css,层叠样式表(英文全称:Cascading Style Sheets),用于修饰html

    二、css选择器

    1、id选择器:利用标签id属性进行匹配

    #id值{样式设置}

    2、class选择器:利用标签的class属性进匹配

    .class值{样式设置}

    3、标签选择器

    标签类型{样式设置}

    4、层级选择器

    .c1 .c2 div{}

    5、组合选择器

    .c1,.c2,div{}

    6、属性选择器(对选择的标签再次通过属性进行筛选)

    .c1[n='chen']{}

    注:样式使用的优先级:标签上的style优先,然后根据表秀尔顺序,越靠近标签越优先

    可在头部直接通过   <link rel="stylesheet" href="css文件">  将css文件引用

    三、常见css属性

    color : #999999; /*文字颜色*/
    font-size : 9pt; /*文字大小*/
    font-style:itelic; /*文字斜体*/
    line-height : 200%; /*设置行高*/ (居中常用)
    font-weight:bold; /*文字粗体*/
    text-align:center; /*文字中间对齐*/  (居中常用)

    padding-top:10px; /*上边框留空白*/
    padding-right:10px; /*右边框留空白*/
    padding-bottom:10px; /*下边框留空白*/
    padding-left:10px; /*左边框留空白

    background-image : url(/image/bg.gif); /*背景图片*/
    background-repeat : repeat; /*重复排列-网页默认*/
    background-repeat : no-repeat; /*不重复排列*/
    background-repeat : repeat-x; /*在x轴重复排列*/
    background-repeat : repeat-y; /*在y轴重复排列*/
    指定背景位置
    background-position : 90% 90%; /*背景图片x与y轴的位置*/
    background-position : top; /*向上对齐*/
    background-position : buttom; /*向下对齐*/
    background-position : left; /*向左对齐*/
    background-position : right; /*向右对齐*/
    background-position : center; /*居中对齐*

    a:active /*按下链接的格式*/
    a:hover /*鼠标转到链接*/

    border-top : 1px solid #6699cc; /*上框线*/
    border-bottom : 1px solid #6699cc; /*下框线*/
    border-left : 1px solid #6699cc; /*左框线*/  
    border-right : 1px solid #6699cc; /*右框线*/
    border-top-color : #369 /*设置上框线top颜色*/
    border-top-width :1px /*设置上框线top宽度*/
    border-top-style : solid/*设置上框线top样式*/

    solid /*实线框*/
    dotted /*虚线框*/
    double /*双线框*/
    groove /*立体内凸框*/
    ridge /*立体浮雕框*/
    inset /*凹框*/
    outset /*凸框*/

    margin-top:10px; /*上边界*/
    margin-right:10px; /*右边界值*/
    margin-bottom:10px; /*下边界值*/
    margin-left:10px; /*左边界值*/

    position:relative|absolute|fixed 定位
    opacity:透明度级别
    z-index:层级顺序

    display:none|inline|block|inline-block 显示与否以及块级和行内标签转换

    float :right|left 让标签飘起来

  • 相关阅读:
    Go语言并发编程
    Go语言package
    大数据实践(十) Spark多种开发语言、与Hive集成
    大数据实践(九)--sqoop安装及基本操作
    Go语言错误处理
    Go语言接口
    Go语言面向对象
    数据库基础了解
    PL/SQL语句快捷输入设置
    重载操作符介绍
  • 原文地址:https://www.cnblogs.com/chenxiaozan/p/12683335.html
Copyright © 2020-2023  润新知