03_CSS标签分类、特性、背景

知识点

CSS样式表的书写位置
内嵌式
外链式
行内样式表
标签分类
块元素
行内元素
行内块元素
块元素、行内元素
CSS三大特性
链接伪类
背景属性

CSS样式表的书写位置

内嵌式写法

<head>
    <style type=”text/css”>
        样式表写法
    </style>
</head>

外链式写法
写在head里

<link rel=”stylesheet” href=”1.css”>

行内样式表
写在标签上

<h1 style="font-size:30px; color:red">霸气威武</h1>

三种写法特点:
　　★ 内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
　　★ 外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
　　★ 行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）

标签分类(显示方式)

块元素

特点:
　　★ 独占一行
　　★ 可以设置宽高
　　★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
典型代表
div
h1~h6
p
ul
li

行内元素

特点：
　　★ 在一行上显示
　　★ 不能直接设置宽高
　　★ 元素的宽和高就是内容撑开的宽高。

典型代表：
span
a
strong
em
del
ins

行内块元素(内联元素)

特点：
　　★ 在一行上显示
　　★ 可以设置宽高
典型代表
input
img

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img{
            width: 300px;
            vertical-align: top;
        }
        input{
            width: 300px;
            height: 200px;
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    ![](top.jpg)
    <input type="text" name="myname"/>
</body>
</html>

块元素、行内元素转换

块元素转行内元素

display:inline;

块元素被转为行内元素就不再具有块元素的特性，而具有行内元素的所有特性

行内元素转块元素

display:block;

块元素或行内元素转行内块元素

display:inline-block;

css三大特性

层叠型

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

继承性

继承性发生的前提是包含（嵌套关系）
　　★ 文字颜色可以继承
　　★ 文字大小可以继承
　　★ 字体可以继续
　　★ 字体粗细可以继承
　　★ 文字风格可以继承
　　★ 行高可以继承

总结：文字的所有属性都可以继承。
特殊情况：
　　h系列不能继承文字大小。(实质上是继承了，h1默认的文字大小是2em,如果继承过来的文字大小为60，则h1的文字大小变为260*)
　　a标签不能继承文字颜色。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*.father{
            color: red;
            font-size: 50px;
            font-family: 宋体;
            font-weight: 700;
            font-style: italic;
            line-height: 20px;
        }*/
        .box{
            font-size: 60px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- <div class="father">
        <p>14威武</p>
    </div> -->
    <div class="box">
        <h1>威武</h1>
        <h2>nihaoh2</h2>
        <h3>nihaoh2</h3>
        <a href="#">你好</a>
        <p>你好</p>
    </div>
</body>
</html>

优先级

默认样式<标签选择器<类选择器<id选择器<行内样式<!important
　　0　　　　1　　　　10　　　100　　　1000　　100以上

注意：数字知识描述权重的大概，并不是精确的。

优先级特点
　　★ 继承的权重为0
　　★ 权重会叠加

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            color: red !important;
        }
        .box{
            color: green;
        }
        #con{
            color: yellow;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="box" id="con" style="font-size:100px;color:blue;">nihao</div>
</body>
</html>

权重叠加：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p.son{/* 权重叠加： 1+10=11 */
            color: yellow;
        }
        p{
            color: red;
        }
        .son{
            color: blue;
        }
        .father .son{/*权重叠加：10+10=10；*/
            color: green;
            font-size: 50px;
        }

        .father #baby{/*权重叠加：10+100=110；*/
            color: orange;
            font-size: 70px;
        }

    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="baby">web威武</p>
    </div>
</body>
</html>

链接伪类

a:link{属性:值;} a{属性:值}效果是一样的。

a:link{属性:值;}       链接默认状态   
a:visited{属性:值;}     链接访问之后的状态 
a:hover{属性:值;}      鼠标放到链接上显示的状态    
a:active{属性:值;}      链接激活的状态
：focus{属性:值；}     获取焦点

注意：如果四个链接伪类都使用，必须按顺序书写。

导航条案例

案例效果图

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .nav{
            text-align: center;
            height: 60px;
            background-color: #aaa;
        }
        a{
            display: inline-block;
            width: 100px;
            height: 100%;
            line-height: 60px;/*垂直方向要居中必须添加此属性*/
            vertical-align: center;
            text-decoration: none;
            font-weight: 700;
        }
        a:hover{
            background-color: #eee;
            text-decoration: underline;
        }
        .public{
            color: #f14400;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="public">天猫</a>
        <a href="#" class="public">聚划算</a>
        <a href="#" class="public">超市</a>
        <a href="#" class="public">头条</a>
        <a href="#">阿里旅游</a>
        <a href="#">电器城</a>
        <a href="#">淘抢购</a>
        <a href="#">苏宁易购</a>
        <a href="#">智能生活</a>
    </div>
</body>
</html>

背景效果

background-color 背景颜色
background-image 背景图片
Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
repeat：默认值，水平和垂直方向都平铺
no-repeat：水平和垂直方向都不平铺
repeat-x：只有水平方向平铺
repeat-y：只有垂直方向平铺
当同时有两个属性：repeat-x|repeat-y;相当于默认值repeat,水平和垂直方向都平铺。
Background-position left | right | center | top | bottom 背景定位
当只写水平方位的时候，垂直方位居中

background-position: right;

当`background-position: right;`时

当只写垂直方位的时候，水平方位居中：

background-position: top;

当`background-position: top;`时

当写两个值的时候，顺序无要求

background-position: right bottom;
background-position: bottom right;

上面的效果是一样的

写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。

background-position: 200px 50px;

当`background-position: 200px 50px;`时

Background-attachment 背景是否滚动 scroll | fixed
scroll:是指当标签滚动的时候，被跟着滚动直到消失

当div滚动的时候，图片也跟着向上走了

fixed:是指当标签滚动的时候，背景不会跟着标签滚动。

div已经滚动了，但是背景图片的位置没有动

注意：
　　当background-position: center; background-attachment: fixed;，此时的背景图不再是基于div的居中了，而是基于浏览器的body的居中，所以这个时候如果div变小，背景图片可能会看不见。
　　当background-position: center; background-attachment: scroll;，这个时候才是基于div的居中，无论div的多大，都在div的中间。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            /*无论是设置背景颜色还是背景图片都必须有高度，否则没有效果*/
            height: 400px;
            background-color: #999;
            background-image: url('1.png');
            background-repeat:no-repeat; /* repeat-x|repeat-y;这样相当于：repeat */
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>nihao</p>
        <p>nihao</p>
        <p>nihao</p>
        <p>nihao</p>
        <p>nihao</p>
        <p>nihao</p>
        ......
        <!--- 多复制几个p标签，让浏览器出现滚动条，测试background-attachment: fixed|scroll属性 ---->
    </div>
</body>
</html>

背景属性连写

background: red url('1.png') repeat-x top fixed;

注意：
　　1.连写的时候没有顺序要求
　　2.url('1.png')不能省略，其他都可以省略

练习

搜索框的案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{
            width: 470px;
            height: 30px;
            background: white url('search.jpg') no-repeat 440px center scroll;
        }
    </style>
</head>
<body>
    <input type="text" name="mytext" placeholder="请输入关键字">
</body>
</html>

带图标的列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{
            list-style-type: none;
            background: white url('li.gif') no-repeat left center scroll;
            text-indent: 1.5em;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li>
        <li><a href="#">软萌正太徐浩演绎《小幸运》</a></li>
        <li><a href="#">漫威绝逼好看的电影镜头合集</a></li>
        <li><a href="#">从没见过这么搞笑的祖孙组合</a></li>
        <li><a href="#">史上最容易挨揍的自助餐吃法</a></li>
    </ul>
</body>
</html>

购物车

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
            background:url('110.png');
            width: 67px;
            height: 32px;
        }
        a:hover{
            background: url('110.png') bottom;
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

购物车练习

五彩导航

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 120px;
            height: 58px;
            
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        a.one{
            background:url('images/bg1.png');
        }
        a.one:hover{
            background:url('images/bg2.png');
        }
        a.two{
            background:url('images/bg4.png');
        }
        a.two:hover{
            background:url('images/bg3.png');
        }
        a.three{
            background:url('images/bg5.png');
        }
        a.three:hover{
            background:url('images/bg6.png');
        }
        a.four{
            background:url('images/bg7.png');
        }
        a.four:hover{
            background:url('images/bg3.png');
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

五彩导航

最后编辑于：2017.12.07 05:53:09

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345