CSS是什么?

CSS 指层叠样式表，样式定义如何显示HTML元素。

css样式的类型

插入样式表的方法有三种:

• 内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。样式都是使用在<style>标签之中。

• 外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况时，可以直接通过改变一个外部文件来改变整个站点的外观。样式使用都是通过<link> 标签链接到样式表。<link> 标签在（文档的）头部。

• 行内样式表：当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

多重样式优先级:行内样式表>内部样式表>外部样式表>浏览器默认样式

注意： 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

css选择器

css的基本选择器分为四种:

• 全局选择器：选择所有元素，用*表示。

/* 全局选择器 */
* {
   font-size: 14px;
  }

• 标签选择器：选择指定标签元素。设置所有div标签元素背景为蓝色。

/* 标签选择器 */
div {
     background-color: blue;
    } 

• id选择器：可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。设置元素属性id="box":

/* id选择器 */
#box {
      color: red;
     } 

• 类选择器：class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 box 类的 HTML 元素背景颜色均为绿色。

/* 类选择器 */
.box {
      background-color: green;
     } 

层次选择器：

• 后代选择器：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。也可以是：.A B{...} 的形式A是类名，B是标签）。

<style>
  div p{
    text-align:center;
  }
</style>
<!--div标签下的p标签中的文字居中对其-->
<div><p>center</p></div>

• 子选择器：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A>B{...}（A、B为HTML元素/标签）。也可以是：.A>B{...} 的形式A是类名，B是标签）。

<style>
  .box>p{
    color: yellow;
  }
</style>
<div class="box">
    <p>天气好</p><!-- 文字是黄色 -->
    <div>
        <p>天气好</p><!-- 文字不是黄色 -->
    </div>
</div>

• 相邻兄弟选择器：指定目标选择器必须处与某个选择器相邻（只会选择相邻第一个元素），语法格式：A+B{...}（A、B为HTML元素/标签）。也可以是：.A+B{...} 的形式A是类名，B是标签）。

<style>
   p+h1 {
         color: red;
   }
</style>       
<p>天气好</p><!-- 文字不是红色 -->
<h1>天气好</h1><!-- 文字是红色 -->
<h1>天气好</h1><!-- 文字不是红色 -->

• 兄弟选择器：该选择器会选择当前元素之后的所以相邻指定元素（具有相同的父元素的兄弟元素），语法格式：A~B{...}（A、B为HTML元素/标签）。也可以是：.A~B{...} 的形式A是类名，B是标签）。

<style>
   div~p {
          color: red;
         }
</style>       
<div>
   <p>天气好</p><!--文字不是红色的-->  
   <div>
       <p>天气好</p><!--文字不是红色的-->    
   </div>
   <p>天气好</p><!--文字是红色的-->
</div>

id选择器与类选择器的区别

1.在HTML文档中，id选择器会使用一次，而且仅一次。类选择器就可以在多个元素中使用。

2.不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

代码正确：

.color{
       color:red;
      }
.bigsize{ 
       font-size:25px; 
      }
<p class="color1 bigsize">今天天气真好</p>

代码错误：

#color{
       color:red;
      }
#bigsize{ 
       font-size:25px; 
      }
<p id="color1 bigsize">今天天气真好</p>

3.id能包含更多含义，类似于类，可以独立于元素来选择id。

注：标准中说id必须是唯一的,并且不能包含空格。如果加了空格，违反了标准,通过就id获取不到该元素。所以CSS和js都不会起作用。而class则没有这个限制

:nth-child() 选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

  <style>
        /* :nth-child()选择器是选择同一父元素下的子元素，
        先从右边选择指定子元素，再与"："前的元素匹配，
        匹配成功执行变化否则不执行。 */ 
        ul li:nth-child(3) {
            color: green;
        }
        /* 选择同一父元素下的第一个子元素， */ 
        ul li:first-child {
            color: blue;
        }
        /* 选择同一父元素下的最后一个子元素 */ 
        ul li:last-child {
            color: red;
        }
  </style>     
  <ul>
     <h2>1</h2>
     <li>2</li><!-- 字体不是蓝色 -->
     <li>3</li><!-- 字体是绿色 -->
     <li>4</li><!-- 字体不是绿色 -->
     <li>5</li><!-- 字体为红色 -->
  </ul>

:nth-of-type()选择器

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

  <style>
        /* :nth-of-type()选择器是选择同类型中的同级兄弟元素，
        先从左边确认需要匹配的元素，寻找":"后的同类型的同级兄弟元素是否存在，
        若存在则执行变化否则不执行。*/
        ul li:nth-of-type(3) {
            color: red;
        }
         /* 选择同类型中的第一个同级兄弟元素 */ 
        ul li:first-of-type {
            color: blue;
        }
         /* 选择同类型中的最后一个同级兄弟元素 */ 
        ul li:last-of-type {
            color: green;
        }
  </style>  
  <ul>
     <h2>1</h2>
     <li>2</li><!-- 字体是蓝色 -->
     <li>3</li><!-- 字体不是红色 -->
     <li>4</li><!-- 字体是红色 -->
     <li>5</li><!-- 字体为绿色 -->
  </ul>
    

css规则

1.命名的规则：见名知意。

2.css不要写太多的嵌套，一般最好不要超过三层。

3.多使用类选择器（class）。

css的背景属性（Backgrounds）

背景颜色

background-color属性是用来定义元素的背景颜色的。 设置页面的背景颜色：

body {
      background-color:#000;
     }

css中，颜色值通常有三种定义方式：

• 十六进制 - 如："#fff000"

• RGB颜色表 - 如："rgb(255,0,0)"

• 颜色英文名称 - 如："red"

背景图像

background-image属性是描述元素的背景图像的。 默认图像是平铺显示的。background-repeat

body {
      background-image:url('logo.jpg');
     }

背景图像的水平或垂直平铺

background-repeat属性用来设置背景图像的平铺情况。

background-repeat的属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	不平铺

背景图像的定位

background-position属性是设置背景图像的起始位置。

background-position的值

1.直接输入方向关键词：

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right 如果仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

2.输入两个百分比值，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果只规定了一个值，那么另一个值将是50%。

3.输入两个像素值或任何其他的 CSS 单位值，第一个值是水平位置，第二个值是垂直位置。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

背景的简写属性

background:#ffffff url('logo.png') no-repeat right top;

当使用简写属性时，属性值的顺序为：:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上属性无需全部使用，可以按照页面的实际需要使用。

css的文本格式

文本颜色

color属性设置文本颜色。

h1 {color:#fff;}
h2 {color:rgb(255,0,0);}
p {color:red;}

文本对齐方式

text-align属性设置文本的水平对齐方式。

属性值

值	描述
center	水平居中
left	向左对齐
right	向右对齐

文本的修饰

text-decoration 属性用来设置或删除文本的装饰。

实例：

a {text-decoration:none;} /* 去下划线 */
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;}/* 每个单词首字母变成大写 */

text-indent属性是用来指定文本的第一行的缩进。

css的字体

字体系列

font-family属性是设置文本的字体系列。

font-family可以设置多个字体用来储备，多个字体系列是用一个逗号分隔指明，如果遇到浏览器不支持第一个字体时可以尝试使用下一个字体。

注：如果字体系列的名称超过一个字，它必须用引号，

p{font-family:"黑体",Times,serif}

字体样式

font-style属性是定义文字的字体样式的。

属性有三个值：正常显示文本、以斜体字显示的文字、文字向一边倾斜（和斜体非常类似，但不太支持）。

p.normal {font-style:normal;}/*正常字体*/
p.italic {font-style:italic;}/*斜体*/
p.oblique {font-style:oblique;}/*倾斜的文字*/

字体大小

font-size属性是定义文本的大小的。

h1 {font-size:40px;}
p {font-size:14px;}