Html/Css基础学习一（Css样式）

一、Css简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

　　以上解释摘选自http://www.w3school.com.cn/css/css_jianjie.asp。CSS样式其实就是标签里面style元素里面的各种方法，每一个样式用";"分割，如果需要将多个部分定义为同一个样式，可以通过class定位，因为class名称可以重复，于是定义同一个名称可以影响所有该名称的模块。

　　CSS样式可以在不同的地方进行设置，一共有三种方式：

方式一，在标签内写样式：

<div class="c1" style="background-color: blue;height: 100px;width: 100px"></div>

　　方式二，在head里通过<style>标签写样式，通过各种选择器定位到body中的模块上：

扫描二维码关注公众号，回复： 1836460 查看本文章

    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>

　　方式三，在head标签中引用css文件，文件中通过选择器为body中的各模块定义样式：

    <link rel="stylesheet" href="practice-body.css">

二、一些基础的使用方法

1、id选择器

　　通过id查找到该模块，然后为该模块定义样式。样式放在head标签中。id选择器定位比较精准，只能对某个模块起效，因为一个HTML文件中id是不能重复的。其基础的使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="i1">用来展示id选择器定义模块样式</div>
</body>
</html>

id选择器

　　以上代码在网页上的效果如下，可以看到为该模块增加了背景色且定义了模块的长和宽。

2、class选择器

　　和id选择器类似，只不过class选择器是通过class进行定位。class选择器可以通过一个class名定位多个模块，因为HTML文件中class名可以重复，只需要将样式一致的模块class名定义为同一个就可以了。其基础的使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div class="c1">第一个模块</div>
    <div class="c1">第二个模块</div>
    <div class="c1">第三个模块</div>
</body>
</html>

class选择器

　　以上代码在网页上的效果如下，可以看到直接通过名称定义样式后，三个模块都获得了同样的样式：

3、标签选择器

　　同样的，这代表通过标签进行查找，但是会影响到html网页中的所有的标签（div或者span）。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="i1">第一个div模块</div>
    <div id="i2">第二个div模块</div>
</body>
</html>

标签选择器

　　以上代码在网页中的呈现效果如下，所有div标签都会受到该样式的影响：

4、标签层级选择器

　　如果要对标签内的标签定义样式，可以使用标签层级选择器，格式为"标签+空格+标签"。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="i1">
        <span>标签层级选择器展示</span>
    </div>
    <div id="i2">第二个div模块</div>
</body>
</html>

标签层级选择器

　　以上代码为div模块下的span标签定义了样式，网页上的展示效果如下所示：

5、class层级选择器

　　和标签层级选择器类似先通过class标签定位第一层，再通过其他标签定位第二层，其使用方法如下：

class层级选择器

　　同理还有id层级选择器，使用方法类似。

6、id组合选择器

　　通过id定位多个模块，使这几个模块使用同样的样式，基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="i1">第一个div模块</div>
    <div id="i2">第二个div模块</div>
</body>
</html>

id组合选择器

　　同理还有class组合选择器，不过这个使用不多，因为class名称可以重复，如果想使用同一个样式，class名称一致就可以了。

7、height/width/font-size/font-weight

　　一个模块的长和宽可以用height以及width来设置，字体可以用font-size，font-weight等样式来设置，大概使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="width: 80px;height: 48px;border: 1px red solid;font-size: 20px">字体大</span>
    <span style="width: 80px;height: 48px;border: 1px red solid;font-weight: 700;">字体粗</span>
</body>
</html>

模块长宽及字体设置

　　以上代码在网页上的呈现效果如下：

8、文本对齐text-align/line-height

　　text-align可以调整文字在模块中的位置，比如左对齐，居中或者右对齐；line-height则可以调整文字在模块中的上下位置。基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 80px;height: 48px;border: 1px solid red;text-align: center;line-height: 48px">1</div>
</body>
</html>

处理文字位置

text-align:right：文字右对齐
text-align:left：文字左对齐
text-align:center：文字居中
line-height:48px:因为模块高度是48px，这样定义后，会自动将文字放在高度的中心点。

9、float模块浮动

　　模块默认是往下堆叠的，通过浮动样式，可以将模块放在同一行，但是模块宽度超过外层模块的100%后还是会自动换行的。基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 80px;height: 48px;border: 1px solid red;float: left">左边</div>
    <div style="width: 80px;height: 48px;border: 1px solid red;float: left">并列左边</div>
    <div style="width: 80px;height: 48px;border: 1px solid red;float: right">最右边</div>
</body>
</html>

模块浮动

　　以上代码在网页上的效果如下：

10、margin/padding外边距和内边距

　　内外边距是指模块处于某个模块中时，内模块和外模块之间的距离，外边距用于增加两个模块的距离，内边距用于扩展内模块的面积，同理可以减少和外模块的距离。其基础使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div><h4>外边距:自己针对外围的div产生变化,外边距撑大外层 top left right bottom</h4></div>
    <div style="border: 1px solid red;height: 100px">
        <div style="background-color: blue;height: 70px;margin-top: 30px;margin-left: 10px;margin-right: 10px"></div>
    </div>
    <div><h4>内边距:自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加</h4></div>
    <div style="border: 1px solid red;height: 100px">
        <div style="background-color: blue;height: 70px;padding: 1px">内边距增加</div>
    </div>
</body>
</html>

内外边距

3、标签

3、