蛰思园

CSS 学习笔记

—

由

druculac
于

CSS教程

  • css：casading style sheets
  • css一般有下图构成。H1是选择的元素，后面就是要改变的属性和值。


  • /*This is a comment*/：注释语句。
  • 可以自定义一个id，来作为selector。此例中，后面可以设定<p>的id为para1，这样就将其应用到paragraph中了。

    <style>

    #para1

    {

    text-align:center;

    color:red;

    }

    </style>

  • 定义样式类，也可以说是样式组。先定义了class center，然后再<h1>中调用此class

    .center {text-align:center;}

    <h1 class=”center”>Center-aligned heading</h1>

  • 设定某一元素的class，此例中只有<p>标签的center class才起作用，其他元素的此class不起作用。

    p.center {text-align:center;}

    <p class=”center”>This paragraph will be center-aligned.</p>

  • External style sheet，外部css文件

    <head>

    <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

    </head>

外部的css文件如下：不用html, style等标签

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url(“images/back40.gif”);}

  • Internal style sheet

    <head>

    <style>

    hr {color:sienna;}

    p {margin-left:20px;}

    body {background-image:url(“images/back40.gif”);}

    </style>

    </head>

  • Inline styles，

    <p style=”color:sienna;margin-left:20px;”>This is a paragraph.</p>

 

  • body {background-color:#b0c4de;}：背景颜色。后面的颜色值可以为#××××××，red，rgb(255,0,0)三种方式
  • body {background-image:url(‘paper.gif’);}：背景图片
  • 定义背景图片只有x轴重复

    body

    {

    background-image:url(‘gradient2.png’);

    background-repeat:repeat-x;

    }

  • 设定背景图片的位置

    body

    {

    background-image:url(‘img_tree.png’);

    background-repeat:no-repeat;

    background-position:right top;

    }

  • 缩写css，顺序为color, image, repeat, attachment, position

    body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

  • background-attachment:fixed; 固定图片
  • a {text-decoration:none;}：去掉修饰，可以将url的下划线去掉。同样也可以做删除线，下划线等等

    h1 {text-decoration:overline;}

    h2 {text-decoration:line-through;}

    h3 {text-decoration:underline;}

  • 大小写，上下标

    p.uppercase {text-transform:uppercase;}

    p.lowercase {text-transform:lowercase;}

    p.capitalize {text-transform:capitalize;}

  • 缩进：p {text-indent:50px;}
  • h1 {letter-spacing:2px;}：字符间距
  • 行间距

    p.small {line-height:70%;}

    p.big {line-height:200%;}

  • 改变文字方向，

    <style>

    div.ex1

    {

    direction:rtl;

    unicode-bidi:bidi-override;

    }

    </style>

  • P {word-spacing:30px;}：增加单词之间的间距
  • P {white-space:nowrap;}：取消自动换行
  • img.top {vertical-align:text-top;}：图片的对齐，此时为顶端对齐
  • h1 {text-shadow:2px 2px #FF0000;}：文字阴影

 

  • p{font-family:”Times New Roman”, Times, serif;}：定义字体，浏览器按顺序看是否能加载。Fallback功能
  • p.italic {font-style:italic;}：字体样式
  • p {font-size:14px;}：字体大小
  • p {font-size:0.875em;} /* 14px/16=0.875em */：用em单位来替代px，16px=1em
  • 设定字体的轻重

    p.normal {font-weight:normal;}

    p.light {font-weight:lighter;}

    p.thick {font-weight:bold;}

    p.thicker {font-weight:900;}

  • 设定字符的变形

    p.normal {font-variant:normal;}

    p.small {font-variant:small-caps;}

  • 多个字符样式的缩写

    p.ex2{font:italic bold 12px/30px Georgia,serif;}

 

  • 链接的样式

    a:link {color:#FF0000;} /* unvisited link */

    a:visited {color:#00FF00;} /* visited link */

    a:hover {color:#FF00FF;} /* mouse over link */

    a:active {color:#0000FF;} /* selected link */

  • 链接的修饰，a:link {text-decoration:none;}，其他3个也类似
  • 链接的背景，a:link {background-color:#B2FF99;}，其他3个类似
  • 多个链接的css属性

    a:hover,a:active

    {

    background-color:#7A991A;

    }

 

  • ul.a {list-style-type: circle;}：列表的样式
  • ul{list-style-image: url(‘sqpurple.gif’);} ：用图片作为列表的头
  • 是列表的css样式适用于所有浏览器

    ul

    {

    list-style-type: none;

    padding: 0px;

    margin: 0px;

    }

    ul li

    {

    background-image: url(sqpurple.gif);

    background-repeat: no-repeat;

    background-position: 0px 5px;

    padding-left: 14px;

    }

  • 缩写列表的样式，ul {list-style: square url(“sqpurple.gif”); } ，顺序是type，position，image

 

  • 设定表格的border，包含th和td

    table,th,td

    {

    border:1px solid black;

    }

  • 将border合并成一个，不管原先是不是一个

    table

    {

    border-collapse:collapse;

    }

    table,th, td

    {

    border: 1px solid black;

    }

  • 表格的宽和高

    table

    {

    width:100%;

    }

    th

    {

    height:50px;

    }

  • 表格元素的对齐

    td

    {

    text-align:right;

    }

    td

    {

    height:50px;

    vertical-align:bottom;

    }

  • Td {padding:15px;} ：表格内容和border的间隙
  • 表格的颜色背景等

    table, td, th

    {

    border:1px solid green;

    }

    th

    {

    background-color:green;

    color:white;

    }

 

  • Box model，每个元素如一个box，content只是其中一部分。所以宽高的设置要计算。


    Total element width = width + left padding + right padding + left border + right border + left margin + right margin

  • Border的样式
  • dotted: Defines a dotted border
  • dashed: Defines a dashed border
  • solid: Defines a solid border
  • double: Defines two borders. The width of the two borders are the same as the border-width value
  • 定义border的宽度

    border-width:5px;

    border-width:medium; //thin, medium, or thick

  • 定义border颜色

    border-color:red;

    border-color:#98bf21;

  • 定义上下左右的border

    p

    {

    border-top-style:dotted;

    border-right-style:solid;

    border-bottom-style:dotted;

    border-left-style:solid;

    }

    可以缩写成border-style:dotted solid;

  • Border样式的四种缩写：
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted
  • border的缩写：

    p

    {

    border:5px solid red;

    }

  • 定义顶端border

    p

    {

    border-style:solid;

    border-top:thick double #ff0000;

    }

 

  • Outline的设置，其实与border差不多。但是outline的宽高并不被计算入element的宽高，而border就要计算进去。

    p

    {

    border:10px solid red;

    outline:green solid thick;

    }

 

  • Margin的设置。可以用cm，px，%做单位

    margin-top:100px;

    margin-bottom:100px;

    margin-right:50px;

    margin-left:50px;

  • 缩写的margin，margin:100px 50px;
  • Padding与margin和border等设置类似

 

  • 将几个元素的style设置为一样的

    h1,h2,p

    {

    color:green;

    }

  • 元素style的嵌套。下例中，如果在div中调用了marked class，然后这个div里面的p的颜色就会是white。相当于此div的背景是red，但是将字体的颜色变为white，而不是blue

    p

    {

    color:blue;

    text-align:center;

    }

    .marked

    {

    background-color:red;

    }

    .marked p

    {

    color:white;

    }

 

  • h1.hidden {visibility:hidden;} ：隐藏元素，但还是占用空间
  • h1.hidden {display:none;} ：隐藏元素，但不占用空间
  • li {display:inline;} ：将li这个block元素显示成inline方式
  • span {display:block;} ：将span这个inline元素显示成block方式

 

  • 固定位置的元素，会覆盖显示其他的元素。

    p.pos_fixed

    {

    position:fixed;

    top:30px;

    right:5px;

    }

  • 相对位置，相对于普通的位置，可以调整正负px。但是原先占用的space还是一样会占用，即使将其相对位置调高或者调低了。

    h2.pos_left

    {

    position:relative;

    left:-20px;

    }

  • 绝对位置，不占用原来的space了。会覆盖显示其他元素。

    h2

    {

    position:absolute;

    left:100px;

    top:150px;

    }

  • 覆盖元素。Z-index定义了z轴方向，谁应该更前端，谁更后端。可以是正负值。越大越靠前。如果没有定义，那么代码中后面的会覆盖前面的。

    img

    {

    position:absolute;

    left:0px;

    top:0px;

    z-index:-1;

    }

  • 将图片切成一个矩形，用clip。

    img

    {

    position:absolute;

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

    }

  • 滑动条的结构

    div.scroll

    {

    background-color:#00FFFF;

    width:100px;

    height:100px;

    overflow:scroll;

    }

  • 将滑动条隐藏。默认隐藏

    div.hidden

    {

    background-color:#00FF00;

    width:100px;

    height:100px;

    overflow:hidden;

    }

  • 定义鼠标的动作，当鼠标指到文字上时。

    <span style=”cursor:auto”>auto</span><br>

    <span style=”cursor:crosshair”>crosshair</span><br>

    <span style=”cursor:default”>default</span><br>

    <span style=”cursor:e-resize”>e-resize</span><br>

    <span style=”cursor:help”>help</span><br>

    <span style=”cursor:move”>move</span><br>

    <span style=”cursor:n-resize”>n-resize</span><br>

    <span style=”cursor:ne-resize”>ne-resize</span><br>

    <span style=”cursor:nw-resize”>nw-resize</span><br>

    <span style=”cursor:pointer”>pointer</span><br>

    <span style=”cursor:progress”>progress</span><br>

    <span style=”cursor:s-resize”>s-resize</span><br>

    <span style=”cursor:se-resize”>se-resize</span><br>

    <span style=”cursor:sw-resize”>sw-resize</span><br>

    <span style=”cursor:text”>text</span><br>

    <span style=”cursor:w-resize”>w-resize</span><br>

    <span style=”cursor:wait”>wait</span><br>

 

  • 文字环绕图像，将图像设置到最右边，剩下的文字在左边环绕显示。

    img

    {

    float:right;

    }

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注