zoukankan      html  css  js  c++  java
  • css入门

    插入样式表

    1.外部样式表:

    <head>

    <link rel="stylesheet" type="text/css" href="a.css" />

    </head>

    2.内部样式表:

    <head>

    <style type="text/css">

    .......

    </style>

    </head>

    3.内联表

    <p style="color:red;margin:0"></p>

    语法

    css语法由3部分构成:select {property: value}

    如果值为多个单词,则要给值加引号:p {font-family: "sans serif";}

    多重声明:p {text-align: center; color:red;}

    选择器分组:h1, h2, h3, h4, h5, h6 {color: green;}

    继承:body {font-family: Verdana, sans-serif;}所有子元素都从body继承属性

    a.css第一行:@charset "utf-8";

    选择器

    派生选择器:li strong {...}用于选择元素<li><strong>...</strong></li>

    id选择器:#id1 {...}

    类选择器:.class1 {...}

    背景

    背景色:background-color:gray;

    背景图像:background-image:url(/ab/cd/e.gif);

    背景重复:background-repeat:repeat-x|repeat-y|no-repeat;

    背景定位:background-position:center|top|bottom|right|left|50% 50%|100px 200px;

    背景关联:background-attachment:scroll|fixed|inherit;

    文本

    color 设置文本颜色
    direction 设置文本方向。
    line-height 设置行高。
    letter-spacing 设置字符间距。
    text-align 对齐元素中的文本。
    text-decoration 向文本添加修饰。
    text-indent 缩进元素中文本的首行。
    text-shadow 设置文本阴影。
    text-transform 控制元素中的字母。
    unicode-bidi 设置文本方向。
    white-space 设置元素中空白的处理方式。
    word-spacing 设置字间距。

    字体

    font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
    font-family 设置字体系列。
    font-size 设置字体的尺寸。
    font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
    font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
    font-style 设置字体风格。
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight

    设置字体的粗细。

    框模型

    内边距:padding, padding-top, padding-right, padding-bottom, padding-left

    边框:border, border-top, border-right, border-bottom, border-left, ...

    外边距:margin, margin-top, margin-right, margin-bottom, margin-left

    定位

    position: static, relative, absolute, fixed

    float: left, right

    伪类

    a:link {...}

    a:visited {...}

    a:hover {...}

    a:active {...}

    LVHA顺序定义

    使用技巧

  • 相关阅读:
    jquery跨域请求jsonp
    php返回json,xml,JSONP等格式的数据
    chrome常用配置
    html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等
    jquery form表单序列号
    php实时输出内容能够
    php Xdebug调试
    jsonp的简单例子
    web调试的一些小技巧
    jq动态增加的button标签click回调失效的问题,即动态增加的button标签绑定事件$("button.class").click(function)无效
  • 原文地址:https://www.cnblogs.com/feilv/p/4078216.html
Copyright © 2011-2022 走看看