2、认识 CSS 样式

最新推荐文章于 2023-12-29 16:52:15 发布

风老魔

最新推荐文章于 2023-12-29 16:52:15 发布

阅读量685

点赞数 1

分类专栏： CSS 学习笔记文章标签： css

本文链接：https://blog.csdn.net/hj1993/article/details/79992705

版权

CSS 学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、认识 CSS 样式

1.1、css 样式的优势

css 全称为“层叠样式表（cascading style sheets）”，主要用于定义 HTML 内容在；浏览器内的显示样式，如文字大小、颜色、字体加粗等。

p{
    font-size:12px;
    color:red;
    font-weight:bold;
}

css 样式的优势：

定义某个样式，可以让不同网页位置的文字有统一的字体、字号或颜色等。
也可以单独定义某段文字或者图片的样式

1.2、css 代码语法

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

p{color:blue}

选择符（p）：又称选择器，指明网页中要应用样式规则的元素，如 p、a、h1、em等
声明（{color:blue}）：在英文大括号 “{}” 中的就是声明，属性（color）和值（blue）之间用英文冒号 “:” 分隔，当有多条声明时，中间用英文分号 “;” 分隔
最后一条声明可以没有分号，但是一般也加上分号
为使样式更易阅读，每条代码可以写在一个新行

<style type="text/css">
span{                        /*选择符span（即只给span标签内的文字加 css 样式），要是整个段落就是要 p*/
   color:blue;
}
</style>
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>

1.3、css 注释

css 样式也有注释，其语法是：

/*注释语句*/

2、CSS 样式基本知识

2.1、内联式 css 样式

css 样式可以写在哪些地方呢？从插入的形式来看可以分成三种：内联式、嵌入式和外部式三种。

内联式指的是直接把 css 代码写在现有 html 标签中
只能写在开始标签中，不能写在结束标签中
css 代码要在双引号中，多条代码可以使用分号隔开

<p style="color:red;font-size:12px">这里文字是红色。</p>

2.2、嵌入式 css 样式

嵌入式 css 样式写在当前文件中，相比较内联式，在某些情况下嵌入式要更简便。

嵌入式 css 样式，就是可以把 css 样式代码写在标签之间
嵌入式 css 样式必须写在之间，并且一般情况下嵌入式css样式写在之间

<!--将 span 标签内的文字修改成蓝色-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>嵌入式css样式</title>
        <style type="text/css">    /* 放在<style type="text/css"></style> 标签之间*/
        span{
            color:blue;
        }
        </style>
    </head>
    <body>
        <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
    </body>
</html>

2.3、外部式 css 样式

外部式 css 样式就是把 css 代码写在一个外部文件中，这个文件的后缀名为（.css）。在 head 标签中，不在 style 标签中，通过 link 标签链接到 html 文件内。

<link href='base.css' rel='stylesheet' type='text/css' />

css 样式文件名称以有意义的英文字母命名，如 main.css
rel=’stylesheet’ type=’text/css’ 是固定写法不可修改
link 标签位置一般写在 head 标签内

2.4、三种方法的优先级

如果同一个元素我们同时用了三种方法设置 css 样式，那么离设置元素越近的优先级别越高。

一般情况下：内联式（离设置元素最近）> 嵌入式 > 外部式
如果把外部式的

/*style.css*/
span{
    color:blue;
    font-size:20px;
}

<!--index.html-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>嵌入式css样式</title>
        <link href="style.css" rel="stylesheet" type="text/css">  <!--外部式-->
        <style type="text/css">   /*嵌入式*/
            span{
                color:red;
                font-size:20px;
            }
        </style>
    </head>
    <body>   <!--内联式-->
        <p>慕课网，<span style="color:pink;font-size:20px">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
    </body>
</html>

3、css 选择器

3.1、什么是选择器

如果要设置 html 样式，选择器通常是某个 html 元素，如 body、p、span 或者 h2。

选择器{
    css 样式
}

3.2、标签选择器

标签选择器也是元素选择器，即 html 中的各个标签，、、

、
、等。

p{font-size:12px;line-height:1.6em;} /*p标签设置 12px 字号，行间距 1.6em*/

3.3、类选择器

类选择器在 css 样式编码中很常见，即将要设置的内容使用合适的标签修饰起来，再给这个标签设置一个类，最后设置这个类选择器的 css 样式。

.类选择器名称{css 样式代码;}

英文圆点开头
类选择器名称可以任意，但不要中文

<!--index.html-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>认识html标签</title>
        <style type="text/css">
        .stress{              /*类选择器设置 css 样式*/
            color:red;
        }
    </head>
    <body>
        <h1>勇气</h1>   
        <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
        <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
    </body>
</html>

首先将“胆小如鼠”四个字，使用 span 标签修饰起来
使用 class=’类选择器名称’，为标签设置一个类
设置类选择器的 css 样式

3.4、id 选择器

id 选择器类似于类选择器，区别如下：

为标签设置 id = ‘ID 名称’，而不是 class=’类名称’
ID 选择符的前面是（#）号，而不是英文圆点（.)

<style type="text/css">
#stress{
    color:red;
}

</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩

3.5、类和 ID 选择器的区别

相同点：

可以应用于任何元素

不同点：

ID 选择器只能在 html 中出现一次
可以使用类选择器词列表方法为一个元素同时设置多个样式

/*正确的*/
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

/*错误的*/
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

什么时候该用 id，什么时候该用 class？

W3C标准规定，在同一个页面内，不允许有相同名字的 id 对象出现，但是允许相同名字的 class
一般网站分为头、体、脚部分，因为考虑到它们在同一个页面只会出现一次，所以用 id
其他的，比如说你定义了一个颜色为 red 的 class，在同一个页面也许要多次用到，就用class定义
另外，当页面中用到 js 或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用

3.6、子选择器

子选择器用于指定标签元素的第一代子元素，即大于符号（>)。

.food>li{border:1px solid red;}   /*class名为 food 下的子元素 li，加入红色实线边款*/

<!--index.html-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>子选择符</title>
        <style type="text/css">
        .food>li{border:1px solid red;}  /*添加边框样式（粗细为1px， 颜色为红色)*/
        .first>span{border:1px solid red;}  /*添加边框样式（粗细为1px， 颜色为红色)*/
        </style>
    </head>
    <body>
        <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
        <h1>食物</h1>
        <ul class="food">
            <li>水果
                <ul>
                    <li>香蕉</li>
                    <li>苹果</li>
                    <li>梨</li>
                </ul>
            </li>
            <li>蔬菜
                <ul>
                    <li>白菜</li>
                    <li>油菜</li>
                    <li>卷心菜</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

3.7、包含（后代）选择器

包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。

与子选择器作用直接后代不同的是，包含选择器作用于所有的子孙后代元素。

.first span{color:red;}

<!--index.html-->
.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/   
}
</style>
</head>
<body>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>

3.8、通用选择器

通用选择器是功能最大的选择器，由一个星号（*）指定，作用 html 中所有标签元素。

* {color:red;}

3.9、伪类选择符

伪类选择符，允许给 html 不存在的标签（标签的某种状态）设置样式。

/*给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色*/
a:hover{color:red;}

目前为止能兼容所有浏览器的“伪类选择符”就是 a 标签上使用（：hover），它也能放在任意标签上，如（p:hover），但是兼容性不好，所有常用的还是（a：hover）的组合。

/*鼠标滑过 胆小如鼠 四个字时的字体颜色字号变化*/
a:hover{
    color:red;
    font-size:20px;

}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

3.10、分组选择符

当想为 html 中多个标签元素设置同一个样式时，可以使用分组选择符（,）。

h1,span{color:red;}

/*将第一段全部文字和第二段文字中的“简单”，设置为粉色*/
.first,#second span{color:pink;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

4、CSS 的继承、层叠和特殊样式

4.1、继承

CSS 的某些样式是具有继承的，继承就是一种样式。它允许样式不仅应用于 html 某个特定元素，还应用于它的后代。

/*如下将 p 标签中的文本设置为红色，其子元素 span 也被设置为了红色*/
p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

但也有些样式不支持继承，如：

/*给p标签设置了边框为1像素、红色、实心边框线*/
p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

4.2、特殊

有时为同一元素设置了不同的 CSS 样式代码，那么元素会根据权值高低来决定应用的样式，权值高就用哪种 CSS 样式。权值规则如下：

标签的权值为 1、类选择符为 10、ID选择符最高为 100、继承最低为 0.1

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:yello;} /*权值为 100+10+1=111 */

/*因为类选择符权值比标签权重高，所以 p 标签中的文本显示为绿色*/
p{color:red;}  /*权值为 1*/
.first{color:green;}  /*权值为 10*/
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

/覆盖之前的粉色*/
p span{color:red;}  /*权值为 2*/
span{color:pink;}/*设置为粉色，权值为 1*/

4.3、层叠

层叠的出现亦在解决 html 中同一个元素有多个 css 样式且权值相同的情况，规则是：

处于最后面的 css 样式会被应用

/*权值相同，粉色在最后被应用*/
p{color:red;}
p{color:pink;}
<p class='first'>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

4.4、重要性

有时在做网页设计时，有些特殊情况需要将某些样式设置为最高权限，这时可以使用（！important）来解决。

！important 写在分号之前

/*p 段落文本显示为红色*/
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

在网页制作者不设置 css 样式时，浏览器会按照自己的样式来显示网页，但也有些用户会设置自己所需的样式，那么这三种样式的优先级为：

/*不管是哪种样式，！important 优先级最高*/
浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式

5、CSS 格式化排版

5.1、文字排版–字体

使用 css 样式可以为网页中的文字设置字体、字号、颜色等属性，但是需要注意的是不要设置不常用的字体，因为设置的字体样式取决于用户本地电脑上是否安装了这种字体，否则会使用浏览器默认的字体。

/*这里使用双引号*/
body{font-family:"Microsoft Yahei";}  /*比第二种兼容性好一些*/
body{font-family:"微软雅黑"；}
body{font-family:"宋体"}

页面中的按钮(button), 输入框(input)等依然用的是浏览器默认的”宋体”。解决方法: body, input, button {font-family: “Microsoft Yahei;”}

5.2、文字排版–字号、颜色

/*字体字号 12 像素，颜色灰色*/
body{font-size:12px;color:#666}

5.3、文字排版–粗体

/*span 标签文字设置为粗体*/
p span{font-weight:bold;}

5.4、文字排版–斜体

/*斜体*/
p{font-style:italic;}

5.5、文字排版–下划线

/*下划线*/
p{text-decoration:underline;}

5.6、文字排版–删除线

/*删除线*/
.oldPrice{text-decoration:line-through;}
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p>

5.7、段落排版–缩进

如中文文本段落习惯首行缩进两个文字空白，这种特殊样式可以使用以下代码实现：

/*首行缩进 2 文字空白*/
p{text-indent:2em;}  /*2em 意思是文字的 2 倍大小*/
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

5.8、段落排版–行间距（行高）

/*1.5 倍行距*/
p{line-height:1.5em;}

5.9、段落排版–中文字间距、字母间距

/*中文字间隔、英文字母间隔设置（要是英文单词则会将字母与字母分开）*/
p{letter-spacing:50px;}

/*英文单词间距设置*/
p{word-spacing:50px;}

5.10、段落排版–对齐

想为块状元素中的文本、图片设置左对齐、居中和右对齐样式，可以使用（text-align）样式：

h1{text-align:left;}  /*左对齐*/
h1{text-align:center;}  /*居中*/
h1{text-align:right;}  /*右对齐*/

6、CSS 盒模型

6.1、元素分类

html 中标签元素可以分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素。

常用块状元素：

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

常用内联元素：

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

常用内联块状元素：

<img>、<input>

6.2、元素分类–块级元素

设置 display：block 可以将元素显示为块级元素。

/*将内联元素 a 转换为块状元素，使其具有块状元素特点*/
a{display:block;}

块级元素特点：

块状元素排斥其他元素与其位于同一行，每个块状元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度。行高以及顶和底边距都可以设置。
元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

6.3、元素分类–内联元素（行内）

html 中，内联（inline）元素有、、、和 等，通过 display：inline 将元素设置为内联元素。

/*将块状元素 div 转换为内联元素*/
div{display:inline;}

内联元素特点：

和其他元素在同一行
元素的高度、宽度及顶部和底部边距不可设置
元素的宽度就是包含的文字或图片的宽度，高度由元素内部的字体大小决定，不可改变

6.4、元素分类–内联块状元素

同时具有内联元素、块状元素的特点，通过 display：inline-block 可以将元素设置为内联块状元素，、标签就是内联块状标签。

内联块状元素特点：

和其他元素都在一行
元素的高度、宽度、行高以及顶和底边距都可以设置

6.5、盒子模型（Box Model）

所有 html 元素可以看作盒子，css 盒模型本质是一个盒子，封装周围的 html 元素，包括：边距、边框、填充和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。

CSS 盒子模型

标准盒子模型

padding：内边距（有四面，padding-left、right、top、bottom）
border：填充（边框）（有四面，padding-left、right、top、bottom）
margin：外边距（有四面，padding-left、right、top、bottom）
content：内容（width 宽度、height 高度）

当指定一个 CSS 元素宽度、高度属性时，只是设置了内容区域的宽度和高度，实际的高度、宽度还需加上内边距、边框以及外边框。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<!--盒子模型示例-->
<!--盒子总宽度为 300+（25+25）+（25+25）+（25+25）=415px-->
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title>
        <style>
            div {
                background-color: lightgrey;   /*内容背景设置为浅灰色*/
                width: 300px;                  /*内容宽度设置为 300px*/
                border: 25px solid green;      /*边框即填充设置为 25px，填充颜色为绿色*/
                padding: 25px;               /*内边距设置为 25px*/
                margin: 25px;               /*外边距设置为 25px*/
            }
        </style>
    </head>
    <body>

        <h2>盒子模型演示</h2>

        <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

        <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

    </body>
</html>

6.6、盒模型–边框（一）

盒子模型的边框（border），这条线可以设置它的粗细、样式和颜色（三种属性）。

/*边框代码实现*/
div{border:2px  solid  red;}  /*缩写*/
div{                          /*完整代码实现*/
    border-width:2px;
    border-style:solid;
    border-color:red;
}

边框常见样式：

dashed：虚线          dotted：点线             solid：实线

边框常见颜色：

border-color:#888;    /*可以是十六进制颜色，也可以是常见颜色*/

边框粗细：

thin:细    medium：中等     thick：厚

6.7、盒模型–边框（二）

除了可以给边框四面设置样式外，也可以单独给某一面设置样式。

div{border-bottom:1px solid red;}  /*给 div 标签单独设置 下边框*/
div{border-top:1px solid red;}  /*给 div 标签单独设置 上边框*/
div{border-left:1px solid red;}  /*给 div 标签单独设置 左边框*/
div{border-right:1px solid red;}  /*给 div 标签单独设置 右边框*/

6.8、盒模型–宽度和高度

盒模型的宽度和高度和我们平常所说的物体的宽度、高度是不一样的，css 内定义的宽（width）和高（height），指的是内容的宽高，非模型的实际宽高。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界，高度也是同理。

6.9、盒模型–填充（内边距 padding）

内容与边框之间是可以设置距离的，称之为填充（内边距），可分为上右下左，顺序不能搞混。

div{padding:20px 10px 15px 30px;}
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
div{padding:10px;}  /*四面都设置一样，为 10px*/
div{padding:10px 20px;}  /*上下为 10px，左右为 20px，可以这样写*/

6.10、盒模型–边界（margin）

元素与其他元素之间的距离可以使用边界（margin）来设置，也可以分为上、右、下、左。

div{margin:20px 10px 15px 30px;}
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}
div{ margin:10px;}          /*四面都设置一样，为 10px*/
div{ margin:10px 20px;}     /*上下为 10px，左右为 20px，可以这样写*/

<!--两个边距为30px的盒模型-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>边距</title>
        <style type="text/css">
            div{
                width:300px;
                height:30px;
                border:1px solid red;   
            }
            #box1{margin-bottom:30px;}
        </style>
    </head>
    <body>
        <div id="box1">box1</div>
        <div id="box2">box2</div>   
    </body>
</html>

7、CSS 布局模型

布局模型与盒模型都是 css 最基本、最核心的概念，但布局模型建立在盒模型基础之上。

css 包含 3 种基本布局模型：

流动模型（Flow）
浮动模型（Float）
层模型（Layer）

7.1、流动模型

流动模型（Flow）是默认的网页布局模式，网页在默认状态下的 html 网页元素都是根据流动模型来分布网页内容的。

特点一：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，块状元素默认宽度为 100%，都以行的形式占据位置。

<!--box2 设置了长宽，其宽度不是 100%，其他元素的默认宽带都是 100 %-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>流动模式下的块状元素</title>
        <style type="text/css">
        #box1{
            width:300px;
            height:100px;
        }
        div,h1,p{
            border:1px solid red;
        }
        </style>
    </head>
    <body>
        <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
        <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
        <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 

        <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
    </body>
</html>

特点二：

流动模型下，内敛元素都会在所处的包含元素内从左到右水平分布显示（内敛元素不会像块状元素独占一行）。

<!--流动模型下，内敛元素从左往右水平分布-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>流动模式下的内联元素</title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <a href="http://www.imooc.com">www.imooc.com</a><span>强调        </span><em>重点</em>
        <strong>强调</strong>
    </body>
</html>

7.2、浮动模型

流动模型下，块状元素都是独占一行且从上往下显示；如果想设置两个块状元素并排显示，可以使用浮动模型，任何元素都可以浮动。

<!DOCTYPE>
<html>
    <head>
        <meta http='Content-Type' content='text/html; charset=utf-8'>
        <title>浮动模型</title>
        <style type='text/css'>
            div{
                border:2px red solid;
                width:200px;
                height:200px;
                float:left;     /*两个栏目并排显示，左对齐*/
                float:right;    /*两个栏目并排显示，右对齐*/
            }
            #div1{float:left;}     /*栏目一左对齐*/
            #div2{float:right;}     /*栏目二右对齐*/
        </style>
    </head>
    <body>
        <div id='div1'>栏目一</div>
        <div id='div2'>栏目二</div>
    </body>
</html>

7.3、层模型

html 中的层布局可以使 html 元素在网页中精确定位，犹如 PS 中的图层，她有三种属性。

层模型的三种形式：

绝对定位（position : absolute）
相对定位（position : relative）
固定定位（position : fixed）

7.4、层模型–绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 body 元素，即相对于浏览器窗口。

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

/*为元素设置层模型的绝对定位，需要设置*/
position:absolute;
/*而后使用 left、right、top、bottom 属性设置定位距离*/

向左是 right 属性，向右是 left属性，向下是 top 属性，向上是 bottom属性

<!--对于以前位置右上角,向左移动100象素，向下移动20象素-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>absolute样式</title>
        <style type="text/css">
        div{
            border:2px red solid;
            position:absolute;
            right:100px;
            top:20px;    
        }
        </style>
    </head>
    <body>
        <div id="div1">你好</div>
    </body>
</html>

7.5、层模型–相对定位

相对定位（relative）只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。需要设置position:relative（表示相对定位）。

<!--div 元素虽然向右偏移了 100px，向下偏移了 50px，但是块级元素 span 并没有占据 div 原有的位置，绝对定位则会把原来的位置空出来，给其他元素占据-->
<!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>

7.6、层模型–固定定位

固定定位移动的坐标是（屏幕内的网页窗口）本身，由于视图本身是固定的，因此不会随浏览器的滚动条变化而变化。除非改变浏览器窗口的显示大小。

与文档流无关，不占据空间
定位的元素和其他元素重叠

<!--div 元素向右移动100px，向下移动50px，它不随浏览器滚动条滚动而变化，固定在视图内-->
<!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:fixed;
            left:100px;
            top:50px;   
        }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p
    </body>
</html>

7.7、relative 与 absolute 组合使用

绝对定位相对于浏览器（body）窗口设置定位，使用relative 与 absolute 组合使用，可以相对于其他元素定位，其规范是：

参照定位的元素必须是相对定位元素的前辈元素
参照定位的元素必须加入：position：relative；
定位元素加入：position：absolute，便可以进行偏移定位了

<!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;}
        #box1{               /*参照定位元素*/
            width:200px;
            height:200px;
            position:relative;
          }
        #box2{                       /*定位元素*/
            position:absolute;
            top:203px;
            left:5px;         
        }
        /*下面是任务部分*/
        #box3{                       /*参照定位元素*/
            width:200px;
            height:200px;
            position:relative;       
        }
        #box4{                          /*定位元素*/
            width:99%;                  /*是参照定位元素的99%*/
            position:absolute;
            bottom:0;                  /*离底边距0*/
            left:0;                /*离左边距0*/
        }
        </style>
    </head>
    <body>
        <div id="box1">        <!--box1 是 box2 的前辈元素-->
            <div id="box2">相对参照元素进行定位</div>
        </div>

        <h1>下面是任务部分</h1>
        <div id="box3">             <!--box3 是 box4 的前辈元素-->
            <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
            <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
        </div>
    </body>
</html>

8、CSS 代码缩写，占用更少的带宽

8.1、盒模型代码简写

盒模型的外边距（margin）、内边距（padding）和边框（border）设置四个方向，按照顺时针方向设置：上右下左。

margin:10px 15px 12px 14px; /*上右下左分别设置为 10、15、12、14px*/

三种缩写方法：

一、如果 top、right、bottom、left 值相同：

margin:10px 10px 10px 10px;
margin:10px;        /*简写*/

二、如果 top 和 bottom 值相同，left 和 right 值相同：

margin:10px 20px 10px 20px;
margin:10px 20px;         /*简写*/

三、如果 left 和 right 值相同：

margin:10px 20px 30px 20px;
margin:10px 20px 30px;   /*简写*/

注意：padding、border 缩写方法和 margin 一致

8.2、颜色值缩写

CSS 样式中颜色值的设置，当设置 16 进制色彩值时，如果每两位值相同，可以缩写一半。

css 中颜色表示方法有三种：

直接使用英文单词描述，如：（color：red）
用 16 进制表示：如：（color：#000000、#FFFFFF）
用缩写 16 进制表示，如：（color：#000、#FFF）

p{color:#000000;}
p{color:#000;}       /*简写*/
p{color:#336699;}
p{color:#369}         /*简写*/

8.3、字体缩写

网页中的字体 CSS 样式也可以缩写：

body{
    font-style:italic;        /*设置字体为斜体*/
    font-variant:small-caps;  /*区分大小写，浏览器显示小型大写字母的字体*/
    font-weight:bold;       /*设置粗体*/
    font-size:12px;          /*字号 12px*/
    line-height:1.5em;       /*行间距（行高）1.5倍*/
    font-family:"宋体",sans-serif;   /*设置中文字体为宋体，英文 sans-serif*/
}

body{
    font:italic small-caps bold 12px/1.5em "宋体",sans-serif;   /*上面简写*/
}

注意：

使用这一简写至少需要指定：font-size 和 font-family 属性，其他属性没有指定将自动使用默认值。
在缩写时，font-size 与 line-height 中要加斜杠（’/’）。

一般情况下中文网站，英文少，下面缩写代码较常用：

body{
    font:12px/1.5em "宋体",sans-serif;   /*只是有字号、行间距、中文字体、英文字体设置*/
}

9、单位和值

9.1、颜色值

网页中颜色设置右很多，如：字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的几种方法：

一、英文命令颜色：

p{color:red;}

二、RGB 颜色：

与 PS 中的 RGB 颜色一致，有 R（red）、G（green）、B（blue）三种颜色的比例来配色。每一项值可以是 0-255 之间的整数，也可以是 0-100% 的百分数。

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

三、十六进制颜色：

这种方法是现在较普遍的方法，原理也是 RGB 设置，但是每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

9.2、长度值

长度单位，目前比较常用的有：px（像素）、em（行距）、%（百分比），此三种单位都是相对单位。

一、像素：

像素，相对单位。指的是显示器上的小点（CSS 规范中假设 90px=1英寸），实际情况是浏览器会使用显示器的实际像素值有关，目前大多数设计者都倾向于使用这个作为单位。

二、em：

em 是给字体设置字体 font-size 值，如果 font-size 为 14px，那么 1em=14px。如果 font-size=18px，那么 1em=18px。

p{font-size:12px;text-indent:2em;}  /*实现首行缩进 24px，即两个字体大小距离*/

特殊情况：给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。

<p>以这个<span>例子</span>为例。</p>
p{font-size:14px;}
span{font-size:0.8em;}  /*例子字体大小为 11.2px（14*0.8=11.2px）*/

三、百分比：

p{font-size:12px;line--height:130%}  /*行高为字体的 130%（12*1.3=15.6px）*/

10、CSS 样式设置小技巧

10.1、水平居中设置–行内元素

水平居中显示分为：行内元素和块状元素，而块状元素又分为定宽块状元素和不定宽块状元素。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>定宽块状元素水平居中</title>
        <style>
        div{
            border:1px solid red;
            margin:20px;
        }
        .txtCenter,.imgCenter{
            text-align:center;
        }
        </style>
    </head>
    <body>   <!--这句文字和图片要居中显示，需要给其父元素设置 text-align:center-->
        <div class="txtCenter">我想要在父容器中水平居中显示。</div>
        <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />       </div>
    </body>
</html>

10.2、水平居中设置–定宽块状元素

定宽块状元素：指的是块状元素的宽度（width）为固定值，当定宽块状元素要水平居中时，需要设置（左右 margin，值为 auto）来实现。

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>定宽块状元素水平居中</title>
        <style>
            div{
                border:1px solid red;

                width:200px;   /*定宽*/
                margin:20px auto;  /*上下margin随意设置，左右为auto*/
            }
        </style>
    </head>
    <body>
        <div>我是定宽块状元素，我要水平居中显示。</div>
    </body>
</html>

10.3、水平居中–不定宽块状元素（一）

不定宽块状元素的宽度（width）不固定，居中方法有三种：

给要居中的元素加入 table 标签
设置 display：inline 方法，将居中的元素设置为行内元素
设置 position：relative 和 left ：50% 利用相对定位方式，将元素左偏移 50%，达到居中效果

给居中的元素添加 table 标签，利用的是 table 标签的“长度自适应性”（即不定义其长度也不默认父元素 body 的长度，根据其内文本长度决定），因此可以看作一个“定宽块状元素”，再设置 margin 使其水平居中。

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>不定宽块状元素水平居中</title>
        <style>
            table{          /*第二步：为这个 table 标签设置左右 margin auto，上下随意*/
                margin:0 auto;
            }
            .wrap{
                background:#ccc;
                display:table;    /*也可以将这个元素直接转换为 table 标签*/
                margin:0 auto;   /*再设置左右 margin*/
            }
        </style>
    </head>
    <body>
        <div>
            <table>   <!--第一步：将要居中的元素放在一个 table 标签里-->
                <tbody>
                    <tr><td>
                        <ul>
                            <li>我是第一行文本</li>
                            <li>我是第二行文本</li>
                            <li>我是第三行文本</li>
                        </ul>
                    </td></tr>
                </tbody>
            </table>
        </div>
        <div class='wrap'>
            设置我所在的 div 容器水平居中
        </div>
    </body>
</html>

10.4、水平居中–不定宽块状元素（二）

除了第一一种方法外还可以改变元素的 display 类型为行内元素，再使用 text-align:center 来居中显示。

相较于第一种方法，它不能设定长度值。

<!--html 代码-->
<body>
    <div class="test">        <!--使用div标签将 h1 包裹-->
        <h1>测试其他 h1 标签</h1>
    </div>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>


</body>

/*css 代码*/
<style>
.test{     
    text-align:center;        /*div 元素居中*/
}
h1{
    display:inline;         /*把h1 元素显示为行内元素，也可以写成 .test h1*/
}

.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{                  /*ul 元素居中*/
    list-style:none;         /*list-style:none(消除li圆点) */
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{              /*li 元素居中*/
    margin-right:8px;
    display:inline;
}
</style>

10.5、水平居中–不定宽块状元素（三）

第三种方法利用相对定位，通过给父元素设置 float，然后给父元素设置 position：relative 和 left ：50%，子元素设置 position：relative 和 left：-50% 来实现水平居中。

把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间
把子元素向右偏移50%,这个50%是父元素的50%,即是wrap的50%,而此时wrap的宽度刚好就等于子元素的宽度,也是子元素本身的50%,这样刚好就居中了

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>不定宽块状元素水平居中</title>
        <style>
            .container{
                float:left;
                position:relative;
                left:50%
            }

            .container ul{
                list-style:none;
                margin:0;
                padding:0;

                position:relative;
                left:-50%;
            }
            .container li{float:left;display:inline;margin-right:8px;}

            .wrap-center{            /*子元素设置*/
                background:#ccc;
                position:relative;
                left:-50%;

            }

            .wrap{              /*父元素设置*/
                clear:both;             /*清除两侧浮动，独占一行*/
                float:left;
                position:relative;
                left:50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </div>

        <!--下面是代码任务区-->
        <div class="wrap">
            <div class="wrap-center">我们来学习一下这种方法。</div>
        </div>
    </body>
</html>

10.6、垂直居中–父元素高度确定的单行文本

有些报纸的标题在左右两侧，文本内容往往会设置成垂直居中。这里分成两种情况：父元素高度确定的单行文本、父元素确定的多行文本。

实现方法：

通过设置父元素的高度（height）和行高（行间距 line-height）一致来实现。

line-height 与 font-size 的计算值之差，在 CSS 中称为行间距，分为两半，分别加到文本行的顶部和底部。当文字内容长度大于块的宽时，内容脱离块。

<div class="container">
    <h1>hi,imooc!</h1>
</div>

/*父元素高度与行高一致*/
<style>
.container h1{
    height:100px;       /*父元素高度*/
    line-height:100px;  /*行高*/
    background:#999;
}
</style>

10.7、垂直居中–父元素高度确定的多行文本（一）

父元素高度确定的多行文本、图片的垂直居中方法有两种：

方法一：

插入 table 标签（包括 tbody、tr、td）标签，同时设置 vertical-align：middle

css 中有一个垂直居中的属性 vertical-align，父元素设置此样式时，对 inline-block 类型的子元素也有用。

<body>
    <table><tbody><tr><td class="wrap">   <!--td 标签默认设置了 vertical-align为 middle-->
        <div>
            <p>看我是否可以居中。</p>
        </div>
    </td></tr></tbody></table>
</body>

.wrap{height:500px;background:#ccc}  /*设置父元素高度*/

10.8、垂直居中–父元素高度确定的多行文本（二）

方法二

相比较于第一种方法，第二种方法兼容性较差，在 chrome、firefox 及 IE8 以上浏览器下可以设置块级元素的 display为 table-cell（设置为表格单元显示），激活 vertical-align 属性。

好处就是不用添加多余的 table 标签，但也改变了原有块状元素的性质。

<div class="container">
    <div>
        <p>看我是否可以居中？</p>
    </div>
</div>

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;
    vertical-align:middle;
}
</style>

10.9、隐性改变 display 类型

无论之前的元素是什么类型（除 display：none外），只要设置了以下两句中的一个，原有的元素显示类型将自动变为 display：inline-block（内联块状元素），那么就可以设置它的 width 和 height 了，且默认宽度不占满父元素。

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>隐性改变 display 类型</title>
        <style type='text/style'>
        .container{
            position:absolute/float:left(right);  /*设置为相对定位或者浮动模型（靠左或靠右）*/
            width:200px;
            background:#ccc;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <a href="#" title="">进入课程请点击这里</a>
        </div>
    </body>
</html>

风老魔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2、认识 CSS 样式

1、认识 CSS 样式1.1、css 样式的优势css 全称为“层叠样式表（cascading style sheets）”，主要用于定义 HTML 内容在；浏览器内的显示样式，如文字大小、颜色、字体加粗等。p{ font-size:12px; color:red; font-weight:bold;}css 样式的优势：定义某个样式，可以...
复制链接

扫一扫