zoukankan      html  css  js  c++  java
  • css笔记总结1

    1 font 设置字体样式

    font-size/line-height设置字体大小px 字号大小

    font-style设置字体风格 斜体 

    normal:默认值,浏览器会显示标准的字体样式。
    
    italic:浏览器会显示斜体的字体样式。
    
    oblique:浏览器会显示倾斜的字体样式。

    font-weight 字体粗细  

    font-family 设置字体类型比如微软  normal、bold、bolder、lighter、100~900(100的整数倍)。

    2 外观属性

    color :文本颜色   line-height 行间距  color:transparent 是全透明

    line-height :行间距  (px em % 三种)

    text-align:水平对齐(left right center)

    text-indent:首行缩进

    text-decoration:(none:默认,定义标准文本,underline定义下划线,overline:文本上的一条线,line-through穿越文本的一条线)

    3伪类选择器 链接伪类选择器 link (未访问)visited(已访问) hover(鼠标移动在链接上) active (选定的链接)还有before和after

    4 块级元素:<h1-6><p> <div><ul><ol><li>

    块级元素的特点:(block-level) 
    (1)总是从新行开始
    (2)高度,行高、外边距以及内边距都可以控制。
    (3)宽度默认是容器的100%
    (4)可以容纳内联元素和其他块元素。
    行内元素(inline-level)
    <a><strong><b><em><i><del><s><ins><u><span(1)和相邻行内元素在一行上。
    
    (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
    
    (3)默认宽度就是它本身内容的宽度。
    
    (4)行内元素只能容纳文本或则其他行内元素。(a特殊 a里面可以放块级元素 )
    标签显示模式转换display 块转行display:inline 行转块 display:block
    5 文本属性
    white-space:设置元素空白的处理方式
    normal:默认处理方式
    pre 保留空格 当文字超出边界时不换行
    nowrap:不保留空格,强行在同一行内显示所有文本,直到文本结束或br标签
    pre-wrap:保留空格 当文字碰到边界时换行
    pre-line 不保留空格 保留文字的换行 当文字碰到边界时换行
    direction:规定文本方向
    ltr默认从左到右
    rtl从右到左
    6列表属性
    list-style-type:列表项标志的类型
    none是去除标志
    square 方框
    circle 空心圆
    upper-alph; & disc; 实心圆
    list-style-image将图片设置为列表项标志
    list-style-position:列表项标志的位置
    inside和outside

    页面布局:

    1. 边框 

      border-style:边框样式

    • solid 默认,实线
    • double 双线
    • dotted 点状线条
    • dashed 虚线

    border-color:边框颜色

      border-width:边框宽度

      border-radius:圆角

    • 1个参数:四个角都应用
    • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
    • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
    • 4个参数:左上、右上、右下、左下(顺时针

     border: 简写

    • border: 2px yellow solid;

    box-shadow:边框阴影

    • 第一个参数是左右位置
    • 第二个参数是上下位置
    • 第三个参数是虚化效果
    • 第四个参数是颜色
    • box-shadow: 10px 10px 5px #888;
    • https://www.cnblogs.com/caoyc/p/5757005.html  具体看这个

    盒子模型

    padding位于控制内容与边框之间的距离

    margin用于控制元素与元素之间距离

     一个参数,应用于四边。

      两个参数,第一个用于上、下,第二个用于左、右。

      三个参数,第一个用于上,第二个用于左、右,第三个用于下。

    display: none不显示 block 显示块级元素  inline显示内联元素 inline-block行内块元素 list-item显示列表元素

    visbility visible元素可见  hidden 元素不可见 collapse 当表格使用时,此值可删除一行或一列,不影响表格布局

    float right/left/none

    clear:none/left/right/both

     clip 剪裁图像

    rect 剪裁定位元素 auto是默认值 无剪切 上右下左 的顺序提供偏移值  区域外的部分是透明  必须制定position:absolute 

    例如:clip:rect(0px,60px,200px,0px);

    overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

    visible 默认值 内容不会被修剪 会呈现在元素框之外

    hidden 内容会被修剪并且其余内容不可见

    scroll 内容会被修剪且浏览器会显示滚动条以便查看其余内容

    auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余内容

    10-position规定元素的定位类型

    static 默认值,没有定位 遵从正常的文档流

    relative 相对定位元素 相对于正常位置进行定位,遵从正常的文档流

    absolute 绝对定位,脱离文档流

    fixed 绝对定位元素,固定在浏览器的某处

    通过以下四种属性进行定位 left right top bottom z-index

    11-z-index元素层叠顺序

    z-index仅在定位元素上有效(例如position:absolute)

    可以指定负数属性值(-1)

    12-outline 边框轮廓

    out-width 轮廓宽度out-color轮廓颜色 out-style轮廓样式

    13-zoom 缩放比例

    14 cursor 鼠标类型形状

    15-transform transition 动画效果

    transform 转换 变形

    origin 定义旋转基点 (left top center right bottom 坐标值) transform-origin:50px 50px;transform-origin:left

    rotate 旋转  skew 扭曲 scale 缩放 translate 移动

    transition:平滑过渡

    transition-property:变换的属性(none(是没有属性改变), all (所有属性改变) ,具体属性)

    transition-duration :变换持续的时间

    transiton-timing-function:变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))

    transition-delay:变换延迟时间

    transition:缩写



     
  • 相关阅读:
    CSS改变插入光标颜色caret-color简介及其它变色方法(转)
    Javascript常见性能优化
    安装和使用Karma-Jasmine进行自动化测试
    宝塔 ftp 不能连接 列出时出错
    windows 开机总动运行bat文件
    PHP回调函数--call_user_func_array
    php 获取数组第一个key 第一个键值对 等等
    ssi的使用 开启 配置等
    go get请求 json字符串转为结构体
    php protected 类型如何获取
  • 原文地址:https://www.cnblogs.com/asasas/p/9455295.html
Copyright © 2011-2022 走看看