集腋成裘-02-css基础-01

时间：2022-11-08 20:03:41

CSS 层叠样式表(Cascading Style Sheets)(级联样式表)

1 选择器

　　1.1 写法

　　选择器是一个选择标签的过程. 选择器{属性:值;...}

　　1.2 基础选择器

　　　　标签选择器

　　　　类选择器

　　　　ID选择器

　　　　通配符选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*标签选择器*/

        span{

            font-size:200px;

        }

        /*类选择器*/

        .G{

            color: #;

        }

        .o{

            color: #;

        }

        .e{

            color: #;

        }

        .l{

            color:#;

        }

        /*id选择器*/

        #o{

            color: orange;

        }

        #g{

            color: #;

        }

    </style>

</head>

<body>

    <span class="G">G</span>

    <span class="o">o</span>

    <span id="o">o</span>

    <span id="g">g</span>

    <span class="l">l</span>

    <span class="e">e</span>

</body>

</html>

基础选择器

　1.3 符合选择器

　　　　交集选择器:标签.类/ID选择器  div.box

　　　　后代选择器:选择器 选择器 div.box div.div1

　　　　子代选择器:选择器>选择器 div.box>div.div1

　　　　并集选择器:标签,标签 div.box div.div1 p,p

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*    "."是交集

        " "是后代

        ","是并集*/

        div.div1 ul.box li,div.div1 p{

            color:red;

        }

    </style>

</head>

<body>

    <div class="div1">

        我是div中元素

        <p>

            我是div中的p

            <ul class="box">

                <li>我是li中元素</li>

            </ul>

            <ul>

                <li>我是li中元素</li>

            </ul>

        </p>

    </div>

    <div>

        我是另一个div中元素

        <p>我是div中的p标签</p>

    </div>

</body>

</html>

test1

集腋成裘-02-css基础-01

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*    "."是交集

        " "是后代

        ","是并集*/

        div.box p.p1, div.box div.div1 p,p{

            color:red;

        }

    </style>

</head>

<body>

    <div class="box">

        我是div中元素

        <p>

            我是div中的p

            <p class="p1">

                我是div中的p

            </p>

        </p>

        <p>

            <div class="div1">

                <p>我是p</p>

            </div>

        </p>

    </div>

    <div>

        我是另一个div中元素

        <p>我是div中的p标签</p>

    </div>

</body>

</html>

Test2

集腋成裘-02-css基础-01

1.4 font属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

     p{

            color:red;

            font-weight: ;

            font-style: italic;

            font-size:16px;

            line-height: 40px;

            font-family: 微软雅黑;

        }

        div{

            font:italic  16px/40px 微软雅黑 ;

        }

    </style>

</head>

<body>

    <div>

        我是另一个div中元素

        <p>我是div中的p标签</p>

    </div>

</body>

</html>

集腋成裘-02-css基础-01

1.5 小练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .content{

            width:800px;

            margin: auto;

        }

        .content h1{

            font: 28px 微软雅黑;

            text-align: center;

        }

        .content .box{

            text-align: center;

        }

        .spanTime .spanNews{

            font-size: 14px;

        }

        .spanTime{

            color:rgb(,,);

        }

        .spanNews{

            color:#;

        }

        .box input[type=text]{

            color:red;

        }

        .box input[type=button]{

            color:green;

            font-weight: ;

        }

        .content p{

            text-indent: 2em;

            line-height: 24px;

        }

        .content p span{

            color:blue;

        }

    </style>

</head>

<body>

    <div class="content">

        <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

        <div class="box">

            <span class="spanTime">2014年07月16日20:</span> <span class="spanNews">     新浪体育 评论中大奖（11人参与）</span>

            <a href="#"> 收藏本文</a>

            <input type="text" value="请输入查询条件" >

            <input type="button" value="搜索">

        </div>

        <hr>

        <p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

        <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

        <p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

        <p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>

    </div>

</body>

</html>

集腋成裘-02-css基础-01

集腋成裘-02-css基础-01的更多相关文章

  1. CSS基础&lpar;01&rpar;

    1. Css基础 1.1 CSS(层叠样式表 Multiple Styles)   CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...

  2. CSS基础01

    1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...

  3. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  4. &num; 095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 03 封装总结 01 封装知识点总结

    095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  5. 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）

    094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  6. 093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 03 static关键字（下）

    093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  7. 092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 02 static关键字（中）

    092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  8. 091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 01 static关键字（上）

    091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  9. 090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 04 使用包进行类管理（2）——导入包

    090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  10. 089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 &num; 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 使用包进行类管理（1）——创建包

    089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

随机推荐

  1. cocos2d-x内存管理

    Cocos2d-x内存管理 老师让我给班上同学讲讲cocos2d-x的内存管理,时间也不多,于是看了看源码,写了个提纲和大概思想 一．   为什么需要内存管理 1. new和delete 2. 堆上申 ...

  2. Win10切换中英输入法问题

    用此方法解决后的效果: Win10系统只剩下"美式键盘"和"搜狗拼音"两种输入法,且默认为美式键盘. 按Ctrl+Shift切换到搜狗拼音,输入完成后,再按Ct ...

  3. &lbrack;置顶&rsqb; Putty管理私钥文件

    openssh中,ssh_keygen产生的私钥,id_rsa这种密钥putty是不认识的,必须先把它转换成ppk格式, Windows上如果你安装了git,它里面bin目录下就有ssh_keygen ...

  4. opencv实现连通域

    在本文中使用图像连通域统计使用opencv中的cvFloodFill方法,可是在cvFloodFill方法中CvConnectedComp參数无法返回详细点坐标位置信息,找了些资料.给CvSeq分配空 ...

  5. 实战-CentOS6&period;8配置nfs服务

    如题 #服务端:请自行配置yum源 命令操作:yum install nfs-utils rpcbind #配置文件编辑:vi /etc/exports /data 0.0.0.0 (rw,sync, ...

  6. 搭建多系统yum服务器

    一.多系统服务器搭建 1.首先挂载光盘 2.安装vsftp 3.使用rpm -ql vsftpd查看vsftpd安装时都产生了哪些文件,找到以.server结尾的文件路径.此文件的文件名就是vsftp ...

  7. 领域驱动设计&lpar;DDD&colon;Domain-Driven Design&rpar;

    领域驱动设计(DDD:Domain-Driven Design) Eric Evans的"Domain-Driven Design领域驱动设计"简称DDD,Evans DDD是一套 ...

  8. Bitcoin Core钱包客户端的区块数据搬家指南

    最近在饭团(微信中的一个服务号)里教一些朋友学习比特币和区块链技术,为了让大家深刻地理解去中心化网络和钱包等概念,我推荐大家一定要安装经典的Bitcoin Core钱包软件,有些朋友在安装的时候没有留 ...

  9. 搭建前端监控系统（三）NodeJs服务器部署篇

    ===================================================================== 监控系统预览地址: DEMO地址    GIT代码仓库地址 ...

  10. AngularJS ui-router刷新子页面路由

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...

相关文章