前端学习基础第三天

一、常见各种选择器.

标签选择器
类选择器
id选择器
后代选择器
子代选择器
交集选择器
并集选择器
伪类选择器
1，标签选择器,通过直接选择标签的方式，来对标签的内部样式进行调整

 em{
            font-style: normal;
            color: skyblue;
        }
<p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em> </p>

2，类选择器,通过 .class(类名)的形式来选中标签。

 .css{
            font-style: normal;
            color: skyblue;
        }
<p class="css">新浪体育讯　7月16日是燕京啤酒<em>[微博]</em> </p>

3,id选择器，通过#id(id的值)来获取标签。

 #char{
            font-style: normal;
            color: skyblue;
        }
<p>新浪体育讯　7月16日是燕京啤酒<em >[微博]</em> </p>
<p id="char">独一的</p>

4,后代选择器,通过使用标签 +空格 +标签会使得，div中所有的p标签样式发生变化。

 div p{
		font-size=30px;
        }
<div>
    <div>扭转空间
	<p>榫子</p>
	</div>
    <p>测试未来</p>
</div>
<p>探看人生</p>

5,子代选择器,使用 >号来对父标签和子标签的连接。样式设置的效果只对直系子标签有效。

这个样式只对 测试未来 四个字有效。
 div>p{
		font-size=30px;
        }
<div>
    <div>扭转空间
	<p>榫子</p>
	</div>
    <p>测试未来</p>
</div>

6,交集选择器,就是一个标签具有多个特征,使用多个特征来选中某个标签。

选中class="dcname"的div标签。
div.dcname{
color:red;
}
<div>
    <div class="dcname">扭转空间
	<p>榫子</p>
	</div>
    <p>测试未来</p>
</div>

7,并集选择器,就是多个标签同时选中，其中使用逗号“，”进行隔开。

div.dcname,div>div>p{
	text-align:center;
}
<div>
    <div class="dcname">扭转空间
	<p>榫子</p>
	</div>
    <p>测试未来</p>
</div>

8,伪类选择器，通过使用冒号“：” 来进行选择。

        /*顺序不能变 第一个是没有访问的样式, 第二个访问后的样式,第三个是悬浮在标签上的样式,第四个是点击时候的样式*/
        a:link{
            color: #666;
            text-decoration: none;
            font-weight: bold;
            font-size: 25px;
            font-style: normal;
        }
        a:visited{
            color: #00aaee;
            text-decoration: underline;
            /*font-weight: bold;*/
            font-style: italic;
        }
        a:hover{
            color: #ff3333;
            text-decoration: none;
            font-weight: bold;
        }
        a:active{
            color: gold;
            text-decoration: none;
            font-weight: bold;
        }
    /*    以下是工作中常用设置。*/
        a{
            font: 20px "宋体";
            background-color: #ecc000;
        }
        a:hover{
            background-color: #cccccc;
        }

<a href="http://www.baidu.com" target="_blank">百度</a>

二、常用样式设置。

1) 显示模式

块元素,块元素，是指标签可以独立占一行或者是多行。其中标签的宽和高可以进行设置。常见的块元素有: div , p , h1, h2, h3, h4, h5, h6, ul ,ol ,li 等。
行内元素,是指该标签只能放置在一行内部,且标签的宽和高不可以进行设置，即使设置了也无效。常见的行内元素有: a, span ,em ,i ,u , s, del , ins , b ,strong 等。
行内块元素，是指标签只能占用一行,但是这个行的宽度和高度可以进行设置, 常见的行内块元素有: input, img, td等。
三者之间可以相互转换。
以块元素显示为: display:block;
以行内元素显示: display:inline;
以行内块元素显示: display:inline-block;

2) 字体设置

字体风格 font-style:{ normal,italic,oblique} 正常的和斜体
字体粗细 font-weight:{ normal,bold} 正常的是400,加粗的是700.
字体大小 font-size: 25px; 单位使用px。
字体格式 font-family: “微软雅黑”,Arial,“宋体”;找不到第一种字体再去寻找第二种字体,依次下去进行。如果设置的字体都没有就是用默认的字体.
字体 font: font-style font-weight font-size/line-height font-family; 其中后面两个参数设置不可以省略.

3) 宽/高/背景/颜色/文本设置

宽设置: width:500px; width=80%;
高设置: height=30px; height=10%;
行高设置:line-height=30px;
背景颜色: background-color: red;
背景图片: background-image: url(/img/*.jpg)
文本对齐: text-align: left/ right/ center;
文本装饰: text-decoration: none /underline/ overline/ line-through /blink
颜色：color: #ffeecc;

三、练习

一：导航栏练习

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三天导航栏测试练习</title>
    <style>
        /*行内元素和行内块元素可以看作为文本*/
         .nav a{
                width: 120px;
                height: 50px;
                display: inline-block;
                background-image: url(../img/bg.png);
                text-align: center;
                line-height: 50px;
                text-decoration: none;
                font-family: Arial;

        }
        .nav a:hover{
            background-image: url(../img/bgc.png);
        }

        .nav{
            text-align:center;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#">
       网站首页
    </a>
    <a href="#">
        网站首页
    </a>
    <a href="#">
        网站首页
    </a>
    <a href="#">
        网站首页
    </a>
    <a href="#">
        网站首页
    </a>
    <a href="#">
        网站首页
    </a>
</div>
</body>
</html>

二：百度首页

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度一下,你就知道</title>
    <style>

        .div{
            text-align: center;
        }
       div  a{
                font-size: 14px;
                /*letter-spacing: 1px;*/
                color: blue;

        }
        div a.extral{
            font: bold 14px 微软雅黑;
            text-decoration: none;
            color: #222222;
        }
        div .ipt{
            width: 420px;
            height: 26px;
            display: inline-block;
        }
        div input{
            width: 100px;
            line-height: 26px;
        }
        div.it{
            margin-top: 44px;
            margin-bottom: 20px;
        }
        div a.minsize {
            font-size: 12px;

        }
        div.dmargin{
            margin-top: -14px;
        }
        div span.minsize{
            font-size: 12px;
            /*margin-top: 10px;*/
            line-height: 34px;
            color: black;
        }
    </style>
</head>
<body>
<div  class="div">[外链图片转存失败(img-9mWTU5OG-1562034192269)(https://mp.csdn.net/img/bdlogo.gif)]</div>
<div class="div">
    <a href="#">新&nbsp;闻</a>
    <a href="#" class="extral">网&nbsp;页</a>
    <a href="#">贴&nbsp;吧</a>
    <a href="#">知&nbsp;道</a>
    <a href="#">音&nbsp;乐</a>
    <a href="#">图&nbsp;片</a>
    <a href="#">视&nbsp;频</a>
    <a href="#">地&nbsp;图</a>
</div>
<div class="div it">
    <input type="text" class="ipt">
    <input type="submit" value="百度一下">
</div>
<div class="div">
    <a href="#">百科</a>
    <a href="#">文库</a>
    <a href="#">hao123</a> <strong>|</strong>
    <a href="#">更多>></a>
</div>
<div class="div it " >[外链图片转存失败(img-tcyCnYTV-1562034192273)(https://mp.csdn.net/img/ic.jpg)] <a href="#" class= "minsize">
    百度地图带你吃喝玩乐 , 全心全意为人民服务
</a></div>
<div class="div it">
    <a href="#" class="minsize">把百度设为主页</a>
    <span> </span>
    <a href="#" class="minsize">安装百度卫士</a>
</div>
<div class="div dmargin">
    <a href="#" class="minsize">加入百度推广</a><span> </span><strong>|</strong>
    <a href="#" class="minsize">搜索风云榜</a><span> </span><strong>|</strong>
    <a href="#" class="minsize">关于百度</a><span> </span><strong>|</strong>
    <a href="#" class="minsize">About Baidu</a>
</div>
<div class="div">
    <span class="minsize">&copy;2013 Baidu 使用百度前必读 京ICP证030173号</span>
</div>
</form>
</body>
</html>