zoukankan      html  css  js  c++  java
  • css规则

    css规则

    1.继承

    例:<html>

    <head>

    <style type="text/css">

    <!--

    td{font-size:12pt}

    p{color:red}

    -->

    </style>

    </hesd>

    <body>

    <table width="300" border="1" height="150">

    <tr>

    <td align="center">

    <p>css规则</p>

    </td>

    </table>

    </body>

    </html>

    <p>为最高级<td>次一级两种css用在一个属性元素上,相同的覆盖,不同的继承,

    2.组合

    例:td{font-size:12pt}

    p1{font-size:12pt}

    组合后

    td,.p1{font-size:12pt}

    3.层叠

    在样式里定义过后,在表格属性中又定义一次

    <html>

    <head>

    <style type="text/css">

    <!--

    red{color:#ff0000 limportant}

    -->

    </style>

    </hesd>

    <body>

    <table width="300" border="1" height="150">

    <tr>

    <td align="center" style="color:#0000ff" class="red">决撒地方官</td>

    </tr>

    </table>

    </body>

    </html>

    css单位

    分四大类:

    1 长度单位

    数值可以是整数,小数,正数,负数,0,后加单位(负值不要轻易使用)

    换算关系:

    1in(英寸)=6pc(派)

    1in(英寸)=72pt(磅)

    1in(英寸)=2.54(厘米)

    1cm(厘米)=10mm(毫米)

    1cm(厘米)=0.3937(英寸)

    1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

    1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸

    2 百分比单位

    3 颜色单位

    4 url单位

    div属性

    color : #999999   文字颜色

    font-family : 宋体 文字字型

    font-size : 10pt 文字大小

    font-style:itelic 文字斜体育

    font-variant:small-caps 小字体

    letter-spacing : 1pt 文字间距

    line-height : 200% 设定行高

    font-weight:bold 文字粗体

    vertical-align:sub 下标字

    vertical-align:super 上标字

    text-decoration:line-through 加?h除线

    text-decoration:overline 加顶线

    text-decoration:underline 加底线

    text-decoration:none ?h除连接底线

    text-transform : capitalize 首字大写

    text-transform : uppercase 英文大写

    text-transform : lowercase 英文写

    text-align:right 文字*右对齐

    text-align:left 文字*左对齐

    text-align:center 文字置中对齐

    这些是一些简单的文字效果,可以应用到css的页面中。 

    背景

    background-color:black 背景颜色

    background-image : url(image/bg.gif) 背景图片

    background-attachment : fixed 固定背景

    background-repeat : repeat 重复排列-网页预设

    background-repeat : no-repeat 不重复排列

    background-repeat : repeat-x 在x轴重复排列

    background-repeat : repeat-y 在y轴重复排列

    background-position : 90% 90% 背景图片x与y轴的位置  

    链接

    A 所有超连接

    A:link 超连接文字格式

    A:visited 浏览过的连接文字格式

    A:active 按下连接的格式

    A:hover 鼠标移至连接

    边框

    border-top : 1px solid black 上框

    border-bottom : 1px solid #6699cc 下框

    border-left : 1px solid #6699cc 左框

    border-right : 1px solid #6699cc 右框

    border: 1px solid #6699cc 四边框

    虚线

    <TEXTAREA STYLE="border:1px dashed pink">

    实线

    <TEXTAREA STYLE="border:1px solid pink">

  • 相关阅读:
    Tomcat设置web 点击劫持 X-Frame-Options
    Spring boot 防止 xss 攻击 和 LDAP注入
    Spring Boot
    Spring Boot 跨域设置
    SpringBoot 引入redis
    Mybatis常用增删改以及过程的xml配置文件编写
    关于mybatis的一些注意点
    盒子的定位和布局
    vuex随学笔记
    JavaScript数据结构
  • 原文地址:https://www.cnblogs.com/borter/p/9439582.html
Copyright © 2011-2022 走看看