css入门

2019-01-02 本文已影响0人 mihope

CSS 全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

格式

css 样式由选择符和声明组成，而声明又由属性和值组成.

    <style type="text/css">
        p {
            font-size: 12px;
            color: red;
            font-weight: bold;
            text-align: left;
        }
    </style>
    <!-- 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号 -->

css：/*注释语句*/;
Html:<!--注释语句-->

分类

内联样式

css 样式表就是把 css 代码直接写在现有的 HTML 标签中。

    <p>这里是<span style="color:blue">welooky</span>博客站点</p>

嵌入式

css 样式代码写在当前的文件中,在<style type="text/css"></style>标签之间。一般情况下嵌入式 css 样式写在<head></head>之间。

外部式

就是把 css 代码写在一个单独的外部文件中，以“.css”为扩展名。

<!-- 在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内 -->
<link href="base.css" rel="stylesheet" type="text/css" />

优先级：内联式 > 嵌入式 > 外部式。并遵守就近原则。

选择器

每一条 css 样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

<style type="text/css">
    /* 标签选择器 */
    h3{
        font-size:12px;
        line-height:1.6em;
    }
    /* 类选择器 */
    .focusText{
        color:red;
    }
    /* ID选择器 */
    #username{
        color:green;
    }
    /* 子选择器：作用于直接后代 */
    .food>li{
        border:1px solid red;
    }
    /* 后代选择器：作用于所有子后代元素 */
    .first  span{color:red;}
    /* 通用选择器：作用于所有标签元素 */
    * {color:red;}
    /* 伪类选择器 */
    a:hover{color:red;} /* 鼠标滑过的状态 */
    /* 分组选择符 */
    h1,span{color:red;}/* 多个标签元素设置同一个样式 */
</style>
<body>
    <h3>印第安老斑鸠</h3><br/>
    <span id="username">周杰伦</span>
    <p class="focusText">沙漠之中怎么会有泥鳅,话说完飞过一只海鸥,大峡谷的风呼啸而过,是谁说没有.</p>
</body>

在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

可以使用类选择器词列表方法为一个元素同时设置多个样式

<style type="text/css">
    .stress{
        color:red;
    }
    .bigsize{
        font-size:25px;
    }
</style>

<p>到了<span class="stress bigsize">三年级</span>下学期时...</p>

层叠和权重

继承

某些样式是具有继承性的，允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。

<style type="text/css">
    p{border:1px solid red;}/*不具有继承性*/
    p{color:red;}/*标签中的所有子元素文本*/
</style>

权重

同一个元素设置了不同的 CSS 样式代码,权值高的起作用。

权值的规则：标签的权值为 1，类选择符的权值为 10，ID 选择符的权值最高为 100
若多个 css 样式具有相同权重值,处于最后面的 css 样式会被应用。遵守：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

<style type="text/css">
    p{color:red;} /*权值为1*/
    p span{color:green;} /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/

    p{color:red!important;}
</style>

为某些样式设置具有最高权值，使用!important 语句来改变样式权重。

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important 优先级样式是个例外，权值高于用户自己设置的样式

排版样式

<style type="text/css">
    p{
        font-family:"Microsoft Yahei";/*字体*/
        font-size:12px;/*字号*/
        color:#666;/*颜色*/
        font-weight:bold;/*粗体*/
        font-style:italic;/*斜体*/
        text-decoration:underline;/*下划线*/
    }

    body{
        /* 在缩写时 font-size 与 line-height 中间要加入“/”斜扛 */
        font:12px/1.5em  "宋体",sans-serif;/*字号、行间距、中文字体、英文字体*/
    }
    p{
        text-indent:2em;/*文本段设置2个空格缩进，2em指文字的2倍大小*/
        line-height:2em;/*行间距*/
    }

    h1{
        letter-spacing:20px;/*文字间距*/
        word-spacing:50px;/*英文单词间距*/
    }

    div{
        text-align:center;/*居中对齐*/
    }
</style>

颜色：

p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}

长度：

p{font-size:12px;text-indent:2em;} /*em就是本元素给定字体的font-size值*/
/*但当给font-size设置单位为em时，此时em计算的标准以它的父元素的font-size为基础*/
p{font-size:12px;line-height:130%}/*设置行高（行间距）为字体的130%*/

配色表

元素分类

块状元素

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

设置 display:block 就是将元素显示为块级元素。

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

通过代码 display:inline 将元素设置为内联元素。

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变

内联块状元素

<img>、<input>

display:inline-block 就是将元素设置为内联块状元素。

元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型

在 CSS 中，一个独立的盒子模型由 content（内容）、border（边框）、padding（内边距）和 margin（外边距）4 个部分组成。

盒子模型图

边框

三个属性：粗细、样式和颜色。

<style type="text/css">
    div{
        border-width:2px;/*thin|medium|thick（但不是很常用），最常还是用象素（px）*/
        border-style:solid;/*dashed（虚线）| dotted（点线）| solid（实线)*/
        border-color:#888;
    }
    /* 只为一个方向的边框设置样式： */
    div{
/*      border-top:1px solid red;
        border-right:1px solid red;
        border-left:1px solid red; */
        border-bottom:1px solid red;
    }
</style>

宽度和高度

css 内定义的宽（width）和高（height），指的是填充的内容范围，内容宽高。

一个盒子实际所占的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。通过设定 width 和 height 来控制内容所占的矩形大小，内边距、边框和外边距分别用 padding、border 和 margin 来表示。

块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的 100%.

填充 padding

元素内容与边框之间是可以设置距离的，称之为“填充”，即 padding。填充也可分为上、右、下、左(顺时针)。

<style type="text/css">
    div{
        padding:20px 10px 15px 30px;
        /* padding:10px;    上、右、下、左padding一样 */
        /* padding:10px 20px;   上下填充一样为10px，左右一样为20px */
    }
</style>

边距 margin

设置方式和 padding 类似。padding 在边框里，margin 在边框外。

行内元素之间的水平margin：当两个行内元素紧邻时，它们的距离为第一个元素的margin-right加上第二个元素的margin-left。
块级元素之间的垂直margin：两个块级元素之间的距离不是第一个元素margin-bottom和第二个元素margin-top的总和，而是两者的最大值。这个现象称为margin的“塌陷”现象，即较小的margin塌陷到较大的margin中。
嵌套盒子之间的margin：子块的margin以父块的content为参考。
设置为负值的margin：会使被设为附属的快像相反的方向移动，甚至覆盖在另外的块上。

布局模型

流动模型（Flow）

默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%，以行的形式占据位置。
内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型 (Float)

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动。可以通过浮动使两个块状元素并排显示

<style type="text/css">
div{
    border:2px red solid;
    width:200px;
    height:400px;
    float:left;
}
/*
#div1{float:left;}
#div2{float:right;}
 */
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>

层模型（Layer）

static 定位

HTML 元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top,bottom,left,right 影响。

绝对定位(position: absolute)

设置 position:absolute(表示绝对定位)，作用:将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。

<style type="text/css">
/* 实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 */
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    top:20px;
    right:100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>

相对定位(position: relative)

正常文档流中的偏移位置，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
</style>
</head>
<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
</html>

偏移前的位置保留不动

固定定位(position: fixed)

固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed;属性功能相同。

<style type="text/css">
/* 定位于浏览器视图右下角的div */
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    bottom:0;
    right:0;
}
</style>

Relative 与 Absolute 组合使用，相对于其它元素进行定位。

1、参照定位的元素必须是相对定位元素的前辈元素;
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
/* 把box4定位到图片(box3)的底部 */
#box3{
    width:200px;
    height:200px;
    position:relative;
}
#box4{
    width:100%;
    position:absolute;
    bottom:0px;
}
</style>
</head>
<body>
<div id="box3">
    <img src="http://hefeicity.cn/blog/css-hezi.gif">
    <div id="box4">盒子模型</div>
</div>
</body>
</html>

对齐

对齐详解
 css 实例