前端学习 -- Css

Css:Cascading Style Sheets

CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。

编写位置：

　　1，内联样式：

　　　　将样式编写到标签的style属性中

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>超链接</title>

    </head>

    <p style="color:red;">

        风起檐飞雪

    沟壑巧遁形

    置身大漠里

    踏浪烟波中

    </p>

</html>

效果：

如果对其他标签起作用，内联样式就需要复制到其他标签去，这样就显得比较麻烦，无法复用，不易维护。

　　2.内部样式表

　　将样式表编写到head中的style标签中

　　使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护

　　如下对所有的P元素进行样式设置，实现样式的复用

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>雪后漫步</title>

        <style type="text/css">

        P{

            color:red;font-size:20px;

        }

        </style>

    </head>

    <p>

    风起檐飞雪

    沟壑巧遁形

    </p>

    <p>

    置身大漠里

    踏浪烟波中

    </p>

</html>

效果：

缺点：比如我有多个html文件想要公用同一样式，如上两种方式就无法解决，引出如下的实现方式。

　　3.外部样式表

　　将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

　　将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

　　分别定义两个文件：

style文件
html文件

　　style.css文件：

P {

    color: green;

    font-size: 20px;

}

　　Demo1.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>雪后漫步</title>

    <!--  <style type="text/css">

      P{

          color:red;font-size:20px;

      }

      </style>-->

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<p>

    风起檐飞雪

    沟壑巧遁形

</p>

<p>

    置身大漠里

    踏浪烟波中

</p>

</html>

效果：

Css基本语法：

Css注释：作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

/*

*/

CSS的语法：

选择器{

　　声明块1;

　　声明块2;

　　}

选择器：

通过选择器可以选中页面中指定的元素，
并且将声明块中的样式应用到选择器对应的元素上

声明块：

声明块紧跟在选择器的后边，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构，
这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间使用;隔开，
声明的样式名和样式值之间使用:来连接。

如：选择器就是p,声明块就是{}包住的地方。

P {

    color: green;

    font-size: 20px;

}

块元素，内联元素

div就是一个块元素

所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" href="css/new_file.css" />

    </head>

    <body>

        <div style="background-color: black;color: white;">春眠不觉晓</div>

        <div style="background-color: green;color: red;">春眠不觉晓</div>

    </body>

</html>

span是一个内联元素（行内元素）

所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" href="css/new_file.css" />

    </head>

    <body>

    <span>春眠不觉晓</span>

    <span style="color:red;font-size: 20;">处处闻啼鸟</span>

    </body>

</html>

子元素和后代元素选择器

元素之间的关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

<div id="d1">

            <span>我是div标签中的span</span>

            <p><span>我是p标签中的span</span></p>

        </div>

        <div>

            <span>我是body中的span元素</span>

        </div>

为div中的span设置一个颜色为绿色

后代元素选择器

　　- 作用：
　　- 选中指定元素的指定后代元素
　　- 语法：
　　祖先元素后代元素{}

#d1 span{

         color: greenyellow;

        }

为div的子元素span设置一个背景颜色为黄色
子元素选择器
　　- 作用：
　　- 选中指定父元素的指定子元素
　　- 语法：
　　父元素 > 子元素

　　 IE6及以下的浏览器不支持子元素选择器

div > span{

        background-color: yellow;

        }