HTML+CSS(2)

01选择器续

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子孙后代选择器*/
      /*  body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        body>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red}/*未访问*/
        a:visited{color: green}/*访问过*/
        a:hover{color: yellow}/*悬停*/
        a:active{color: blue}
    </style>
</head>
<body>
<a href="http://www.tedu.cn">超链接1</a>
<a href="http://www.baidu.com">超链接2</a>
<a href="http://www.youku.com">超链接3</a>
<p>p1</p>
<div>
    <p>p2</p>
    <div><p>p3</p></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>
</div>
</body>
</html>

2.选择器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #gy{color: green}
        .c1{color: yellow}
        input[type='text'],body>p{background-color: red}
        /*子元素选择器*/
        body>div>div>p{color: pink}
        a:link{color: green}
        a:visited{color: red}
        a:hover{color: yellow}
        a:active{color: pink}
    </style>
</head>
<body>
<ul>
    <li>刘备</li><li id="gy">关羽</li><li class="c1">张飞</li>
</ul>
<p>香蕉</p><p class="c1">苹果</p>
<input type="text">
<input type="password">
<div>
    <p>p1</p>
    <div><p>p2</p></div>
    <div><div><p>p3</p></div></div>
</div>
<a href="http://www.qq.com">腾讯官网</a>
</body>
</html>

3.颜色赋值

三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
五种赋值方式:
- 颜色单词赋值: red/green/blue/yellow/pink…
- 6位16进制: #ff 00 00
- 3位16进制: #f00
- 3位10进制: rgb(255,0,0)
- 4位10进制: rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
            color: #00ff00;
            color: #00f;
            color: rgb(255,255,0);
            color: rgba(255,0,0,0.2);
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: purple;
            /*设置背景图片*/
            background-image: url("../imgs/a.jpg");
            /*设置背景图片的尺寸:宽 高*/
            background-size: 100px 100px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置:横向x 纵向y 通过像素偏移值*/
            background-position: 20px 50px;
            /*控制位置:横向x 纵向y 、通过百分比*/
            background-position: 80% 80%;
        }
        #d2{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;/*这个是设置图片的宽高*/
            background-position: 90% 80%;

        }

    </style>
</head>
<body>
<div id="d2"></div>
<div id="d1">背景测试</div>
<h1>颜色测试</h1>
</body>
</html>

4.文本和字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 40px;
            /*文本水平对齐方式*/
            text-align: center;
            /*文本修饰overline上划线,
            underline下划线,line-through删除线，none去掉文本修饰*/
            text-decoration: line-through;
            /*行高,控制行间距，如果只有单行文本可以实现垂直居中*/
            line-height: 40px;
            /*文本阴影:颜色 x偏移值 y偏移值 模糊度(值越小越清晰)*/
            text-shadow: green 5px 5px 5px;
            /*字体大小*/
            font-size: 20px;
            /*加粗*/
            font-weight: bold;
            font: 30px cursive;
        }
        a{text-decoration: none}
        h1{
            font-weight: normal;/*去掉加粗*/
            /*斜体*/
            font-style: italic;
            /*设置字体*/
            font-family: cursive;
        }
    </style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>

5.文本和字体练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 30px;
            background-color: green;
            color: red;
            text-align: center;
            line-height: 30px;
        }
        span{
            font-size: 25px;
            font-style: italic;
        }
        #bx{
            font-weight: normal;
            text-shadow: blue -5px 5px 3px;
        }
        #xyj{
            text-decoration: underline;
        }
        a{
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="d1">刘德华</div><div>张学友</div>
<span>香蕉</span>
<span>苹果</span>
<h1 id="bx">冰箱</h1>
<h1 id="xyj">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

6.显示方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*块级元素 独占一行 可以修改宽高*/
        div{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        span{
            /*行内元素 共占一行 不能修改宽高*/
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
        img{
            /*行内块元素 共占一行 可以修改宽高*/
            width: 100px;
            height: 100px;
        }
        a{
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            /*如果行内元素需要修改宽高，必须将显示方式改成block或inline-block*/
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 3px;/*设置圆角,值越大越圆*/
        }
    </style>
</head>
<body>
<a href="">查看详情</a>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

7.外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*单独某个方向添加外边距*/
            /*margin-right:100px*/
            /*margin-top:50px*/
            /*四个方向添加外边距*/
            margin: 50px;
            /*上下和左右添加外边距*/
            margin: 100px 50px;
            /*上下左右 顺时针赋值*/
            margin: 10px 20px 30px 40px;
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*上下相邻两个元素彼此添加外边距,取最大值*/
            margin-top: 50px;
        }
        #s1{
            /*行内元素上下边距 无效*/
            margin-right: 50px;
        }
        #s2{
            /*左右相邻彼此添加外边距 两者相加*/
            margin-left: 30px;
        }
        #big{
            width: 200px;
            height: 200px;
            background-color: green;
            /*解决粘连问题*/
            overflow: hidden;
        }
        #big>div{
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-left: 50px;
            /*当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现
            粘连问题,给上级元素添加overflow:hidden解决*/
            margin-top: 50px;
        }
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<h1>这是h1</h1>
<p>这是p</p>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<div id="big">
    <div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

8.边框和内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 400px;
      height: 200px;
      border: 20px solid red;
      /*设置圆角,值越大越圆, 超过宽高一半为正圆(前提是正方形)*/
      border-radius: 200px;
    }
    #d2{
        width: 50px;
        height: 50px;
        border:1px solid red;
        /*给元素添加内边距会影响元素的显示宽高*/
        padding-left: 50px;
        padding-top: 50px;
    }
  </style>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<div id="d2">内边距</div>
<!--div#d1   +tab    div.c1   +tab-->
<div id="d1">边框测试</div>
</body>
</html>

9.盒子模型练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;

        }
        #d1>div{
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 25px 0 0 25px;

        }
        #d2{
            width: 50px;
            height: 50px;
            border: 5px solid green;
            border-radius: 5px;
            margin-left: 100px;
            padding-left: 125px;
            padding: 50px 0 0 50px;
            /*添加此样式后给元素添加边框和内边距则不再影响元素的宽高*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="d1">
    <div></div>
</div>
<div id="d2">哈喽</div>
</body>
</html>

10.CSS三大特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
      font-family: cursive;
    }
    #d1{
      color: red;
    }
    div{
      color: green !important;
    }
    p{color: blue;}
  </style>
</head>
<body>
<div id="d1">
  <p>这是p标签</p>
  <span>这是span</span>
  <a href="">超链接</a>
</div>
</body>
</html>

01选择器续

2.选择器练习

3.颜色赋值

4.文本和字体

5.文本和字体练习

6.显示方式

7.外边距

8.边框和内边距

9.盒子模型练习

10.CSS三大特性

相关推荐