CSS入门一

2018-03-26 本文已影响0人嗷老板

一、CSS的概述

1、什么是CSS

CSS（Cascading Style Sheets）指层叠样式表，也被称为CSS样式，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高度、边框样式、边距等）以及版面的布局等外观显示样式。
CSS能够使HTML页面更好看，CSS色系的搭配可以让用户更舒服，SCC+DIV布局更佳灵活，更容易绘制出用户需求的结构。

2、CSS样式规则

CSS在使用的时候需要遵循一定的规范。具体格式为：

    选择器{属性1:属性值;属性2:属性值;...}

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用冒号隔开，每个属性之间用分号隔开。

注意：

CSS样式选择器严格区分大小写，“属性”和“属性值”不区分大小写。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。
如果属性的值是由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号，但是属性的值和单位之间不能出现空格。
在CSS代码中空格不被解析，可以用空格、Tab键、回车进行排版。

案例：

    h1{
        font-size:20px;
        color:red;
    }

二、HTML引入CSS的方式

1、行内样式

通过标签的style属性来进行样式的定义，这种方式不易于标签和样式的分离，只能在便签内使用，复用性极低，一般不建议使用。例如：

<span style="color=red;font_size:30px;">你好</span>

行内样式

2、内部样式

内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的<head>头部标签中，并且使用<style>标签进行定义，可以利用选择器给多个标签设置样式，这种方式只对其所在的HTML 页面有效，可以对多出标签统一设置样式，复用性较低。例如：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            font{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <body>
        <font>你好</font>
        <br />
        <font>CSS</font>
    </body>
</html>

内部样式

3、外部样式

外部样式又称为链入式，是将所有的样式放在一个或者多个以.css为扩展名的外部样式表文件中，通过<link>标签将样式连接到HTML文档中。这种方法的优点是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link>标记链接多个CSS样式表。例如：

font{
    font-size: 30px;
    color: red;
}
<!--上面是外部样式表文件-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="cssDemo.css"/>
    </head>
    <body>
        <font>你好</font>
        <br />
        <font>CSS</font>
    </body>
</html>

外部样式

注意：
三种样式的使用有优先级：行内样式的优先级最高；内部样式和外部样式的优先级一样，谁最后解析显示谁。

三、CSS的选择器

我们定义过CSS样式后，需要将这些样式作用在HTML便签上，首先我们要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

1、元素选择器

元素选择器是指用HTML标记名称作为选择器，按照标记名称分类，为页面中某一类标记指定统一的CSS样式。
元素选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            font{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <body>
        <font>你好</font>
        <br />
        <font>CSS</font>
    </body>
</html>

2、ID选择器

ID选择器使用‘#’进行标识，后面紧跟id名，id名即为HTML元素的id属性，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能作用于文档的某一个具体的元素。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <font id="test">你好</font>
        <br />
        <font id="test">CSS</font>
    </body>
</html>

3、类选择器

类选择器使用‘.’进行标识，后面紧跟类名，类名即为HTML元素的class属性，大多数HTML元素都可以定义class属性。类选择器最大的优势就是可以为元素对象定义单独或相同的样式。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .test{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <font class="test">你好</font>
        <br />
        <font class="test">CSS</font>
    </body>
</html>