CSS基础

选择器

• 组选择器

h1,h2,h3{
     color:red;
     } ```
<code> 所有h1,h2,h3都是红色</code>
- 派生选择器

li strong {
font-style: italic;
} 然后所有 <li><strong> 斜体</strong></li>元素 字体为斜体 ```

• id 选择器
  <p> id 选择器由＃号开头</p>

• id 选择器和派生选择器

     font-style: italic;
     text-align: right;
     margin-top: 0.5em;
   } ```
- 类选择器
```.center {text-align: center} ```
- 属性选择器
```[title]
{
color:red;
} ```

###CSS引用
-  外部样式表
```<link rel="stylesheet" type="text/css" href="my.css" />

• 内部

<style type="text/css"> hr {color: sienna;}
      p {margin-left: 20px;}
     body {background-image: url("images/back40.gif");}
</style>

• 嵌套

<style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
     body {background-image: url("images/back40.gif");}
</style>

注意，同时引用，嵌套覆盖内部，内部覆盖外部

常用属性

• 背景色

    背景色
    p {background-color: gray; padding: 20px;}
    背景图
    body {background-image: url(/i/eg_bg_04.gif);}
    background-repeat:no-repeat; 是否重复，不重复
    background-position 属性设置背景图像的起始位置。
    ／／左上角是 0% 0%。右下角是 100% 100%。
    ／／100px,100px 像素
    ／／top left，top center，top right，center left，center center，center right，bottom left，bottom center，bottom right
  
  

• 文本

缩进
      text-indent: 5em;  //缩进文本
      text-indent: 20%; //缩进文本 ,占父类的百分比
    ***********************************************************
水平对齐
      text-align:justify;//与left不同，这是两端对齐，将父类填满
    ***********************************************************
字间隔
      word-spacing: 30px;
      word-spacing: -0.5em;  //设置为负，会导致文字重合。
    ***********************************************************
字母间隔
      字母间隔是单个字母的间隔，和上面字间隔(word 单词，w o r d  字母)的区别
      letter-spacing: 30px;
      letter-spacing: -0.5em;  //设置为负，会导致文字重合。
    ***********************************************************
字符转换
      text-transform: uppercase，none，lowercase
，capitalize
    ***********************************************************
文本装饰
      text-decoration: none，underline，overline，line-through，blink
      依次效果是：没有，下划线，上划线，删除线，闪烁blink    ***********************************************************
字间隔
      word-spacing: 30px;
      word-spacing: -0.5em;  //设置为负，会导致文字重合。
    ***********************************************************

-列表

 例：ul{
            list-style:square:inside url('/img/xxx.jpg');
          }
      list-style,list-style-image,list-style-position,list-style-type....

• 轮廓（Outline）

更多

CSS

end