css入门

作者: mihope | 来源:发表于2019-01-02 16:17 被阅读0次

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 实例

css入门

格式

分类

内联样式

嵌入式

外部式

选择器

层叠和权重

继承

权重

排版样式

元素分类

块状元素

内联元素

内联块状元素

盒模型

边框

宽度和高度

填充 padding

边距 margin

布局模型

流动模型（Flow）

浮动模型 (Float)

层模型（Layer）

对齐

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

AndroidWorld

大前端