css学习（一）-CSS基础、css选择器

最新推荐文章于 2023-04-09 01:46:49 发布

bwshqh

最新推荐文章于 2023-04-09 01:46:49 发布

阅读量1k

点赞数

分类专栏： css css学习文章标签： css3 html 布局

本文链接：https://blog.csdn.net/bwshqh/article/details/50757570

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

1）理论：

一.CSS基础：
1.css3的新特性：
a.强大的css3选择器
b.抛弃图片的视觉效果
c.背景的变革
d.盒模型变化
e.阴影效果
f.多列布局与弹性盒模型布局
g.web字体和web font图标
h.颜色与透明度
i.圆角与边框的新法
j.盒容器的变形
i.css3过渡与动画交互效果
j.媒体特性与Responsive布局
2.使用css3的好处：
a.减少开发与维护的成本
b.提高页面性能
3.渐进增强：
a.在设计的时候先考虑低端设备用户能否看到所有的内容，然后在此基础上为所有高端用户进行设计。这称为“优雅降级”
二.css选择器：
1.基本选择器：
a.通配选择器：(*)用来选择所有元素
b.元素选择器：(E)用来坂HTML元素
c.ID选择器：根据元素ID来找到对应的元素
d.类选择器：以独立于文档元素的方式来指定元素的样式。类选择器在一个页面中可以有多个相同的类名
e.多类选择器：如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到匹配的元素
f.群组选择器：将具有相同样式的元素分组在一起
2.层次选择器：
a.E F（后台选择器）: F包含在E元素内
b.E>F（子选择器）：F元素是E元素的子元素
c.E+F（相邻兄弟选择器）：F紧邻在E元素后面
d.E~F（通用选择器）：位于匹配E元素后面所有匹配的F元素
3.动态伪类选择器：
a.E:link（链接伪类选择器）：未访问过的链接或锚点
b.E:visited（链接伪类选择器）：已访问过的链接或锚点
c.E:active（用户行为伪类选择器）：匹配元素被激活，常用于锚点与按钮上
d.E:hover（用户行为伪类选择器）：鼠标停留时激活
e.E:focus（用户行为伪类选择器）：元素获得焦点

2）实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css basic</title>
    <style type="text/css">
        *{margin: 0;padding:0;}
        .clearfix:after,    .clearfix:before{display:table;content:""}
        .clearfix:after{
            clear:both;
            overflow: hidden;
        }
        .demo{
            width:250px;
            border:1px solid #ccc;
            padding:10px;
            margin:20px auto
        }
        .demo *{
            background: orange;
        }
        ul{
            background: grey;
        }
        li {
            list-style:none outside none;
            float:left;
            height:20px;
            line-height: 20px;
            width:20px;
            border-radius: 10px;
            text-align:center;
            background: #f36;
            color:green;
            margin-right: 5px;
        }
        #first{
            background: lime;color:#000;
        }
        #last{
            background: #000;color:lime;
        }
        .item{
            background: green;
            color:#fff;
            font-weight: bold;
        }
        .item.important{
            background: red;
        }
    </style>
</head>
<body>/home/abc/test/css/2-1.html
<ul class="clearfix demo">
    <li class = "first" id = "first">1</li>
    <li class="active">2</li>
    <li class="important item">3</li>
    <li class="important">4</li>
    <li class="item">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li class = "last" id ="last">10</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        body{
            width:300px;
            margin:0 auto;
        }
        div{
            margin:5px;
            padding:5px;
            border:1px solid #ccc;
        }
        div div {
            background: orange;
        }
        body > div{
            background: green;
        }
        .active + div{
            background: lime;
        }
        .active ~ div{
            background: red;
        }
    </style>
</head>
<body>
    <div class ="active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4
        <div>5</div>
        <div>6</div>
    </div>
    <div>7
        <div>8
            <div>9
                <div>10</div>
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .download-info{
            text-align: center;
        }
        .btn{
            background-color: #0074cc;
            *background-color:#0055cc;
            background-image: -ms-linear-gradient(top,#0088cc,#0055cc);
            border-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
            border-image: -webkit-linear-gradien(top,#0088cc,#0055cc);
            border-image: -o-linear-gradient(top,#0088cc,#0055cc);
            border-image: -moz-linear-gradien(top,#0088cc,#0055cc);
            border-image: linear-gradient(top,#0088cc,#0055cc);
            border-image: linear-gradient(top,#0088cc,#0055cc);
            background-repeat: repeat-x;
            display: inline-block;
            *display:inline;
            border:1px solid #cccccc;
            *border:0;
            border-color: #ccc;
            border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
            border-radius: 6px;
            color: #ffffff;
            font-size: 20px;
            font-weight: 20px;
            font-weight: normal;
            filter:progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);
            filter: progid:dximagetransform.microsoft.gradient(enabled=false);
            line-height: normal;
            padding:14px 24px;
            text-align: center;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
            text-decoration: none;
            vertical-align: middle;
            *zoom:1;
        }

        .btn:hover{
            background-position: 0 -15px;
            background-color: #0055cc;
            *background-color:#004ab3;
            color:#ffffff;
            text-decoration: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
            text-decoration: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
            -webkit-transition:background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -ma-transition:background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
        }

        .btn:active{
            background-color: #0055cc;
            *background-color:#004ab3;
            background-color: #004099 \9;
            background-image: none;
            outline: 0;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
            color:rgba(255,255,255,0.75);
        }

        .btn:focus{
            outline:thin dotted #333;
            outline:5px auto -webkit-focus-ring-color;
            outline-offset:-2px;
        }
    </style>
</head>
<body>
    <div class = "download-info">
        <a href="#" class = "btn">View project on GitHub</a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .accordionMenu{
            background: #fff;
            color:#424242;
            font:12px Arial,Verdana,sans-serif;
            margin: 0 auto;
            padding: 10px;
            width:500px;
        }
        .accordionMenu h2{
            margin:5px 0;
            padding: 0;
            position: relative;
        }
        .accordionMenu h2:before{
            border:5px solid #fff;
            border-color: #fff transparent transparent;
            content:"";
            height: 0;
            position: absolute;
            right: 10px;
            top:15px;
            width:0;
        }
        .accordionMenu h2 a{
            background: #8f8f8f;
            background: -moz-linear-gradient(top,#cecece,#8f8f8f);
            background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
            background: -webkit-linear-gradient(top,#cecece,#8f8f8f);
            background: -o-linear-gradient(top,#cecece,#8f8f8f);
            background: linear-gradient(top,#cecece,#8f8f8f);
            border-radius: 5px;
            color:#424242;
            display: block;
            font-size: 13px;
            font-weight: normal;
            margin:0;
            padding: 10px 10px;
            margin:0;
            padding: 10px;
            text-shadow: 2px 2px 2px #aeaeae;
            text-decoration: none;
        }
        .accordionMenu :target h2 a,
        .accordionMenu h2 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active{
            background: #2288dd;
            background: -moz-linear-gradient(top,#6bb2ff,#2288dd);
            background: -webkit-gradient(linear,left top,left bottom,from(#6bb2ff),to(#2288dd));
            background: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
            background: -o-linear-gradient(top,#6bb2ff,#2288dd);
            background: linear-gradient(top,#6bb2ff,#2288dd);
            color:#FFF;
        }
        .accordionMenu p{
            margin:0;
            height:0;
            overflow: hidden;
            padding: 0 10px;
            -moz-transition:height 0.5s ease-in;
            -webkit-transition:height 0.5s ease-in;
            -o-transition: height 0.5s ease-in;
            transition: height 0.5s ease-in;
        }

        .accordionMenu :target p{
            height:100px;
            overflow: auto;
        }
        .accordionMenu :target h2:before{
            border-color: transparent transparent transparent #fff;
        }
    </style>
</head>
<body>
    <div class="accordionMenu">
        <div class = "menuSection" id ="brand">
            <h2><a href="#brand">Brand</a> </h2>
            <p>Lorem ipsum dolor...</p>
        </div>
        <div class = "menuSection" id = "promotion">
            <h2><a href = "#promotion">Promotion</a></h2>
            <p>Lorem ipsum dolor sit amnt2...</p>
        </div>
        <div class="menuSection" id = "event">
            <h2><a href ="#event">Event3</a></h2>
        <p>Lorem ipsum dolor sit emet...3</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        :lang(en){
            quotes: '"' '"';
        }
        :lang(en) {background: red;}

        :lang(fr){
            quotes:'<<' '>>';
        }
        :lang(fr) q {background: green;}
    </style>
</head>
<body>
<p>target is test
<q cite="www.test.comet">
    build a future where people live in harmony with nature
</q>we hope they succeed.</p>
</body>
</html>