CSS/CSS3笔记

设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>Biubiubiu</title>
    <style>
        body{background: #b3d4fc;}
        p{background: blanchedalmond;}
        h1{background: darkmagenta;}
        div{background: blue;}
    </style>
</head>
<body>
<h1>hello-world!!</h1>
<div>
    有自己的颜色
    <p>独立开来</p>
</div>
</body>
</html>
View Code

 

设置背景图片（填充满）

 body{background-image: url("https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png")}

 

横向填充图片（纵向填充）

body
        {
            background-image: url("https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png");
            background-repeat: repeat-x;
        }

 

改变图片位置，不影响文本阅读

body
        {
            background-image: url("https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png");
            background-repeat: no-repeat;
            background-position:center top;
        }

 

background-position:25% 50%;
            /*图像放在水平方向 1/4,垂直方向 1/2处*/

 

background-position:20px 50px;
            /*如果设置值为 20px 50px，图像的左上角将在元素内边距区左上角向右 20 像素、向下 50 像素的位置上*/

 

简写背景属性

body
        {
            background: #b3d4fc url("https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_a7be0fddcecc410b58952915635bee6e.jpg" ) no-repeat right top;
        }

定义顺序：

 

指定图像随着页面滚动

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

 

英文大小写操控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GDK">
    <title>Title</title>
    <style>
        p.uppercase{text-transform: uppercase;}
        p.lowercase{text-transform: lowercase;}
        p.capitalize{text-transform: capitalize;}
    </style>
</head>
<body>
<p>Hiweur fsfs dsf Dkjdfs</p>
<p class="uppercase">adasda Djkfsdf sdf fD</p>
<p class="capitalize">adsad fsd Dasd sfD</p>
<p class="lowercase">dsf Dkjdfsh kjkDD</p>
</body>
</html>
View Code

 

添加文本阴影

<style>
        h1{text-shadow:3px 2px #318fe1}
    </style>

 

链接点击颜色变化

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Title</title>
    <style>
        a:link {color:#FF0000;}    /* unvisited link */
        a:visited {color:#00FF00;} /* visited link */
        a:hover {color:#FF00FF;}   /* mouse over link */
        a:active {color:#0000FF;}  /* selected link */
    </style>
</head>

<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
View Code

 

链接样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
        a.one:link {color:#ff0000;}
        a.one:visited {color:#0000ff;}
        a.one:hover {color:#ffcc00;}

        a.two:link {color:#ff0000;}
        a.two:visited {color:#0000ff;}
        a.two:hover {font-size:150%;}

        a.three:link {color:#ff0000;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#66ff66;}

        a.four:link {color:#ff0000;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:monospace;}

        a.five:link {color:#ff0000;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}
    </style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>
View Code

 

指定列表标记图像

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
        ul
        {
            list-style-image:url('https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(36).png')
        }
    </style>
</head>

<body>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
</body>
</html>
View Code

 

CSS分组

   <style>
        p,h1,h2{
            color: coral;
        }
        body,footer{
            background: #318fe1;
        }
    </style>

 

隐藏元素：

hidden

p.hidden{visibility: hidden;}
...
<p class="hidden">Biubiubiu</p>
/*尽管隐藏了依然会占用空间位置*/

 

none

p.hidden{display: none;}
...
<p class="hidden">Biubiubiu</p>

 

设置文字在图像前

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>title</title>
    <style>
        img
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
        }
        p{
            background-position: center;
            color: brown;
        }
        h1.position{text-align: center;}
    </style>
</head>

<body>
<h1 class="position">This is a heading</h1>
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_164404qas98559n01slq07.jpg" width="1980" height="1080" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
View Code

 

滚动显示溢出内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
div.scroll
{
    background-color:#00FFFF;
    width:100px;
    height:100px;
    overflow:scroll;
}

div.hidden 
{
    background-color:#00FF00;
    width:100px;
    height:100px;
    overflow:hidden;
}
</style>
</head>

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>
View Code

 

内容溢出自动处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
div 
{
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow:auto;
}
</style>
</head>

<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>

<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>

</html>
View Code

 

鼠标样式更改

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
View Code

 

图片随窗口大小浮动调整

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
</body>
</html>
View Code

 

文本首字母设置特殊格式

<style>
        p:first-letter
        {
            color:#ff0000;
            font-size:xx-large;
        }
</style>

 

鼠标移到指定位置出现下拉菜单

<!DOCTYPE html>
<html>
<head>

  <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
  <meta charset="utf-8">
  <style>
  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }
  </style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>W3Cschool教程</p>
    <p>www.w3cschool.cn</p>
  </div>
</div>

</body>
</html>
View Code

 

下拉菜单

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
        <a href="http://www.w3cschool.cn">W3Cschool教程 1</a>
        <a href="http://www.w3cschool.cn">W3Cschool教程 2</a>
        <a href="http://www.w3cschool.cn">W3Cschool教程 3</a>
    </div>
</div>

</body>
</html>
View Code

 

左/右对齐下拉菜单

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">左</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">W3Cschool教程 1</a>
    <a href="#">W3Cschool教程 2</a>
    <a href="#">W3Cschool教程 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content">
    <a href="#">W3Cschool教程 1</a>
    <a href="#">W3Cschool教程 2</a>
    <a href="#">W3Cschool教程 3</a>
  </div>
</div>

</body>
</html>
View Code

 

导航栏下拉

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>
View Code

 

图片廊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>


div.img
{
  margin: 2px;
  border: 1px solid #000000;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}    
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>


<body>
<div class="img">
 <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="javascript;:"><img src="/statics/images/course/klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
</body>
View Code

 

设置透明图片

<!DOCTYPE html>
<html>
<head>
    <style>
        img
        {
            opacity:0.3;
            filter:alpha(opacity=40); /* For IE8 and earlier */
        }
        img:hover
        {
            opacity:1.0;
            filter:alpha(opacity=100); /* For IE8 and earlier */
        }
    </style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg" width="150" height="113" alt="klematis">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg" width="150" height="113" alt="klematis">

<p><b>Note:</b> In IE, a &lt;!DOCTYPE&gt; must be added for the :hover selector to work on other elements than the &lt;a&gt; element.</p>
</body>
</html>

 

具有背景的文本框文字

<!DOCTYPE html>
<html>
<head>
    <style>
        div.background
        {
            width: 500px;
            height: 250px;
            background: url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg) repeat;
            border: 2px solid black;
        }
        div.transbox
        {
            width: 400px;
            height: 180px;
            margin: 30px 50px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity:0.6;
            filter:alpha(opacity=60); /* For IE8 and earlier */
        }
        div.transbox p
        {
            margin: 30px 40px;
            font-weight: bold;
            color: #000000;
        }
    </style>
</head>
<body><div class="background">
    <div class="transbox">
        <p>This is some text that is placed in the transparent box.
            This is some text that is placed in the transparent box.
            This is some text that is placed in the transparent box.
            This is some text that is placed in the transparent box.
            This is some text that is placed in the transparent box.
        </p>
    </div>
</div>
</body>
</html>
View Code

 

图片拼合技术

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('/statics/images/course/img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('/statics/images/course/img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('/statics/images/course/img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
View Code

 

根据浏览器大小变换背景颜色

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body {
            background-color:lightgreen;
        }

        @media screen and (max-width: 300px) {
            body {
                background-color:lightblue;
            }
        }
    </style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
    <!--
    function resize_window() {
        window.open ('pro12.html','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
    }
    //写成一行
    -->
</SCRIPT>

</body>
</html>
View Code
posted @ 2019-03-04 21:44  Hk_Mayfly  阅读(193)  评论(0)    收藏  举报