zoukankan      html  css  js  c++  java
  • css的应用

    边框设置:

    border-width  设置边框的宽度

    border-style 设置边框的样式

    border-color 设置边框的颜色

    border 设置所有的边框,border:10px solid black 宽度 样式 颜色

    border-top -bottom  -left  -right 设置上下左右的边框

    border-radius 设置圆角边框

    border-radius:20px/15px 设定四个圆角,圆心距离边框的左右边距离20px,距离上下边框15px

    背景设置:

    background-image 设置背景图片 background-image:url();

    background-repeat 设置背景重复方式

    background-attachment 设置背景是否随着滚轮移动,fixed不随着滚轮移动而移动

    background-color 设置背景颜色

    background-size 设置背景图像的尺寸

    css基本选择器:

    根据类选择元素:.tmp{}  <p1 class="tmp"> </p>

    根据ID选择元素: #id1{}   <p1 id="id1"> </p>

    根据属性选择元素:  [ href ] {}   <a href="123.html">  </a>

    :  选择器动作:  a:hover{}   <a> </a>

    css 文本位置:

    Text-align 对齐文本 center居中 left左对齐

    direction 文本方向 ltr ( left  to  right)

    letter-spacing  指定字母间距

    Word-spacing  指定单词间距

    line-height   指定行高

    text-indent  首行缩进

    text-decoration  设置文本装饰  underline 下划线   overline 上划线  line-through 中划线

    text-transform  设置文本大小写转换(仅仅英文) capitalize 首字母大写  uppercase 全部字母大写   lowercase 全部字母小写

    font-family 设置字体

    font-size 设置字体大小

    font-style 设置字体样式

    text-shadow 设置阴影  text-shadow:10px 10px 1px red; 水平偏移  垂直偏移  模糊程度 颜色

    css 过渡:

    transition-delay 变形延时

    transition-duration 颜色变化延时

    transition-property 直接变化的元素

    transition-timing-function:ease(sfs)slow fast slow

    ease-in (sf)

    ease-out (fs)

    ease-in-out (sfs)

    transform:ratate (30deg) 顺时针旋转30度

    scale (1.5) 放大1.5倍

    transform-origin:设置变换锚点

    css动画:

    animation-iteration-count:动画的循环次数

    animation-delay

    animation-duration

    定义hover可以设置动画的起始等等变化

    盒子模型

    内容、填充、边框、边界

    padding-top  -left -right  -bottom

    padding:上右下左

    background-clip:content-box 只在中间填充

    margin-外边距

    opacity 透明度

  • 相关阅读:
    Google的Java常用类库 Guava资料
    Java 理论与实践: 哈希
    7 款开源 Java 反编译工具
    Eclipse传递main函数参数
    Java程序员常用工具类库
    Eclipse 安装插件
    学习Javascript的8张思维导图
    java开发者最常去的20个英文网站
    关于工作效率的心得分享
    ProtoBuf开发者指南
  • 原文地址:https://www.cnblogs.com/ZQUACM-875180305/p/9455219.html
Copyright © 2011-2022 走看看