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>
五彩导航
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,510评论 32 459
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,730评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,301评论 0 11
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 719评论 0 4
  • 前几天无意间看了一下自己上个月的账单,才发现原来我也是个剁手族(捂脸跑过ing)。 经济独立以来,我基本上是本着“...
    Serena爱折腾阅读 818评论 1 28