css基础

一。伪类选择器

1.a:focus(获得键盘焦点时添加样式)
列子：
 .input2:focus{
        border:5px solid black;
        background-color:red;}

 <input class="input2" type="text"/>（当这个输入框获得键盘光标时添加上面样式。）

2.a:first-child(伪类来选择元素的第一个子元素,)

 li:first-child{
        list-style: none;
        font-size: 30px;
         width:200px;
            height:50px;
            background-color: #cccccc;}


<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
（把每一个UL下面的第一个LI（也就是1 和 4）改变成上面的样式。）

3.a:before(在前面加样式)  
  a:after(在后面面加样式)

#a1:before{content:"早上好，" }=最后完整的样式就是（早上好，你好）就等于在你好前面加上早上好。
#a1:before{content:"谢谢，" }=最后完整的样式就是（早上好，你好，谢谢）就相当于在你好的后面加上谢谢。
<a id="a1">你好</a>

二.复合选择器：

1.交集选择器：

2.并级选择器：

2.
ul.ol.li.p.span{
border:1px solid red;
}(并集选择器语法：)

1.
 p.p1{
        color:red;
    } (交集选择器的语法：必须同时满足两个条件)

1.
<div>
        <p class="p1">hello world</p>
    </div>
    <span>
        <a class="p1">hello world 2</a>
    </span>
    <div>
        <p class="p3">hello world 3</p>
    </div>

2.
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>

3.后代选择器：

div p{
background-color:#ccc;
}(父元素(div)下面的所有子元素都会被选中)

<div>
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
        <span> 
    <p>aaaa</p>
    </span>
    </div>
4.当一个标签，作用于多个层叠样式时，如果这些层叠样式都不一样的话，那么标签的最终样式，就等于所有层  叠样式的混合，如果这些层叠样式中有相同的声明，那么这个样式的从高到低的样式级别为：内联样式大于，嵌   入式样式表大于,外部样式表.

5.在同时相同样式声明的选择器时：元素选择器小于，类选择器小于，ID选择器。（不管在内部或者外部，ID选        择器的优先选择级都是最高的。

6.内联>内部>外部（必选选择器类型相同）如果类型不相同那么加上 (!important>内联>ID>伪元素>伪类>类>元       素)
7.选择器的权重：
    !important: 10000
    内联：     1000 
    id:     100
    class:      10
    element(元素):    1
8.通配符选择器
*{
    margin:0;
    padding:0;
}(通配符选择器)

三.CSS样式

1.CSS文本

    颜色:color:#ff0000;

    边框：border:1px solid red;

    文本从右向左：direction:rtl；

    行高：line-height:50px;

    字符间距：letter-spacing:10px;（设置单个单词于当个单词之间的距离 包括中文字体与字体的距离）

    文本水平居中对齐：text-align:center; left; right; justify;（分散对齐）

    文本修饰符:text-decoration:underline;(添加下划线) none;(默认，取消下划线) 
      缩进中文首行：tetx-indent:15px;  2em;(em代表字字体的本身大小)；2rem;(相对于浏览器默认的字体大小)

    设置文本空白方式：white-space:pre;(保留空白样式).

    设置字间距：word-spacing:10px;(设置整个单词于单词之间的距离)

    保留空格方式文本：white-space： pre; (设置元素中空白的处理方式.)  nowrap；（文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。）  pre-line；（合并空白符序列，但是保留换行符）

    控制元素中的字母：text-transform： capitalize；（文本中的每个单词以大写字母开头）
    uppercase；（定义仅有大写字母。）lowercase；（定义无大写字母，仅有小写字母。） inherit；（规定应该从父元素继承  text-transform 属性的值。）

三.长度单位：

1.常用单位
    px(piexl像素)
    em(相对目前字符的大小倍数)
2.字体样式：     
    设置字体系列：font-family:"黑体"，（前提是你的电脑装有你要设置的字体）


    设置字体大小：font-size:xx-small;  x-small;  small;  medium;  large;  x-large;  xx-large;  20px;(还有自定义像素大小) 

    设置字体风格:font-style:normal;(默认) italic;(斜体)  oblique;(倾斜)  inherit(继承父元素字体样式)

    设置字体粗细:font-weight: normal;(正常)  bold;(粗体) bolder;(定义更粗的字体) lighter;(更细字体) 也可以用数字来定义(400等于默认值 700到等于bold; 100-900;)