css选择器

css引入方法

1.行内引入

<p style="background-color:aquamarine;color: black"></p>

2..css文件引入

div{
                background-color:yellow;
                 color:red;

         }

通过link标签引入

 <link href="文件名.css" type="text/css" rel="stylesheet">

    <!--type声明引入的文本是css，stylesheet声明引入的是css代码块-->

3.html标签引入

div{
                background-color:yellow;
                 color:red;
         }

     <div >  This is my HTML page.</div>

 

css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

 

news img {
  float: left;
  }

可用的值

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

 

css样式优先级：

由上到下，由外到内，优先级由低到高。 后加载优先级高

css基本的基本选择器：

1.标签选择器

  使用标签名作为选择器的名字

例：   div{
                background-color:yellow;
                 color:red;
         }

           p{
                background-color:yellow;
                 color:red;
          }
 
       <p >  This is my HTML page.</p>
       <div >  This is my HTML page.</div>

2.class选择器

每个html标签都有一个class属性

例：(可省略为".css") div.css{
                background-color:yellow;
                 color:red;
         }

    <div class="css">  This is my HTML page.</div>

3.id选择器

每个html标签都有一个id属性

例：

 （可省略为“#css”）div#css{
                background-color:yellow;
                 color:red;
         }

    <div id="css">  This is my HTML page.</div>

4.style选择器

<p style="background-color:aquamarine;color: black"></p>

选择器的优先级：

style   >   id选择器   >  class选择器   >  标签选择器

（平级情况下为由上到下，由外到内，优先级由低到高。 后加载优先级高）

4.css的扩展选择器

（1）关联选择器  

设置div标签里p标签的样式，嵌套标签里的样式

                   div p{

                     background-color:green;

                 }

        <div><p> wwwwwwwwww</p></div>(有效果)

         <p> wwwwwwwwww</p>（没有效果）

(2)组合选择器

把div标签和p标签设置成相同的样式，把不同的标签设置成相同的样式

div,p{

background-color:orange

}

<div>wwwwwwww</div>        <p>wwwwww</p> 这两个标签的样式是相同的

(3)伪元素选择器

css里面提供了一些定义好的样式，可以拿过来使用