CSS的学习和应用

1，css的层叠样式

 内联样式表：写在开始标签中，在html元素内部               <div style=“color red”>名称</div>

    内部样式表：写在网页的<head>部分（只能让那个作用于本网页）                <head>                     <style type="text/css">                     样式的定义                     <style>                <head>

    外部样式表：引用在网页的<head>部分，使用<link>标记引入代码                <head>                     <link rel ="stylesheet" type="text/css">                     href="样式表的css文件"                <head>        优先级：内联>内部=外部（位置决定） 2,css的文本

    缩进文本：text-inden 属性  单位（em）前面接数字              p {text-indent: 5em;}     水平对齐：text-aligh （left，right，center）              将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。     字符转换：text-transform（uppercase，lowercase）              h1 {text-transform: uppercase}     文本装饰: text-decoration(underline下划线 overline上划线 line-through贯穿线）              a {text-decoration: none;}              a:link a:visited {text-decoration: underline overline;}        背景： size（大小，接数值）color（颜色）tansparent（透明）              repeat img（后接图片 url）     字间隔 ： word-spacing              p.spread {word-spacing: 30px;}              p.tight {word-spacing: -0.5em;}

             <p class="spread">              This is a paragraph. The spaces between words will be increased.              </p>

             <p class="tight">              This is a paragraph. The spaces between words will be decreased.              </p>     字母间隔：letter-spacing              h1 {letter-spacing: -0.5em}              h4 {letter-spacing: 20px}

            <h1>This is header 1</h1>             <h4>This is header 4</h4>

    ul-li去掉圆点，ol—li去掉前面数字：              list-style：none     背景的重复：background-repeat

3，css的字体

    字体的属性：font-family                body {font-family: sans-serif;}     字体的风格：font-style：                normal - 文本正常显示                italic - 文本斜体显示                oblique - 文本倾斜显示                eg： p.normal {font-style:normal;}                     p.italic {font-style:italic;}                     p.oblique {font-style:oblique;}     字体大小：font-size：                eg：h1 {font-size:60px;}                    h2 {font-size:40px;}                    p {font-size:14px;}

4，元素选择器

     最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。             html {color:black;}             h1 {color:blue;}             h2 {color:silver;}      子元素选择器（Child selector）:             h1 > strong {color:red;}      相邻兄弟选择器:             h1 + p {margin-top:50px;}      伪类             selector : pseudo-class {property: value}      伪元素       ：first-letter 向文本的第一个字母添加特殊样式。                   :first-line 向文本的首行添加特殊样式。                   :before 在元素之前添加内容。                   :after 在元素之后添加内容。

   

posted @ 2016-03-27 22:25  长鼻子蘑菇象  阅读(217)  评论(0)    收藏  举报