码迷,mamicode.com
首页 > Web开发 > 详细

css美化页面

时间:2017-11-02 18:07:41      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:背景图片   数值   har   images   lap   20px   取值   并且   手动   

css美化页面

如果在我们一行文字中,想让某个文字凸显出来,使用span!

1.字体样式
font-style:字体的风格 italic normal
font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900
font-size:字体的大小 10px 2em rem pc pt
font-family:字体的类型,比如我们的楷体,隶书,宋体。。。。。

font:风格 粗细 大小 类型
在一起设置属性的时候,四种属性顺序不能颠倒!

2.文本样式
color:文本颜色 red 16进制颜色码 rgb rgba
rgb(red,green,blue)正数取值 0-255
rgba(red,green,blue,alpha)
alpha的取值必须是0-1 0不显示 1正常显示
text-align:文本元素的水平对齐方式
center left right justify(两端对齐)
line-height:文本的行高!
如果想设置文本的垂直居中line-height的值必须等于height的值
text-indent:设置首行缩进
p{
text-indent:2em; 设置p首行缩进2个字符
}
text-decoration:文本的装饰
none:默认值
underline:下划线
overline:上划线
line-through:删除线
text-shadow:文本阴影

3.display 可以实现 块元素和行内元素的互换!
inline inline-block block

4.超链接伪类

结构伪类选择器:
div:nth-of-type() :nth-child
css伪类是一个特殊的类! 它针对于我们设置的css选择器起作用!

css伪类的语法:
选择器:伪类名{
属性:属性值;

:link ==> 还没有点击超链接的样式
:visited ==> 点击之后超链接的样式
:hover ==> 鼠标悬停在超链接的样式
:active ==> 鼠标点击未释放超链接的样式

love hate
如果同时给一个选择器设置超链接伪类样式,那么顺序是必须不变的!

5.列表样式
list-style-type 列表符号样式
none 无符号
disc 实心圆
circle 空心圆
decimal 数字 .....
list-style-image 列表图片 url
list-style-position 列表符号是否被li包含,默认是ul包含
list-style 列表样式

如果同时设置了type和image 那么image会覆盖type!和书写先后顺序没关系!

6.背景样式
background-color:背景色
background-image:背景图片
background-position:背景位置
background-repeat:背景重复方式
repeat:默认方式 水平和垂直都平铺
no-repeat:不平铺,只有一个图片
repeat-x:水平平铺
repeat-y:垂直平铺

background: 背景色 背景图片 背景位置 平铺方式
虽然没有固定顺序,但是我们有个默认的写法!

如果我们相对背景图片的大小进行设置!那么请使用background-size
background-size:contain;
background-size:背景图片的尺寸
auto:默认值,使用图片的大小
cover:让整个图片正好填充整个盒子
contain:让图片自动的方法或者缩小 适应盒子的大小
percentage:使用百分比 手动的校正图片在盒子中的大小


7.渐变属性
linear-gradient:(方向,color1,color2)
to top :方向
red:第1个颜色
black:第2个颜色
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>span标签</title>
     <!--span标签
       想让某些文字凸显出来
     -->
    <style type="text/css">
       div:first-child span{
            color: red;
        }

       div:last-child span{
            color: green;
        }
       /*同时设置body中的子元素span的风格 粗细 大小 类型*/
        body>span{
            font: oblique bold 50px "楷体";
            color: red;
        }
        
    </style>



</head>
<body>
  <div><span>今天</span>是个好日子!</div>
  <div><span>明天</span>也是个好日子!</div>
  <span>a</span>bcdefg
</body>
</html>
span标签
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>字体样式</title>

    <style type="text/css">

        div{
            /*01.设置字体的类型*/
            font-family:"楷体" ;
            /*02.设置字体的风格*/
            font-style: italic;
            /*03.设置字体的大小    可以设置数值*/
            font-size:small;
            /*04.设置字体的粗细 可以设置数值*/
            font-weight: bold;
        }
        /*  简写方式==》同时设置 字体的 风格,粗细,大小 ,类型   顺序不能发生变化*/
        span{
           font:italic bolder 60px  "楷体";
        }
    </style>
</head>
<body>

<div><span>今天</span>是个好日子!</div>
<div><span>明天</span>也是个好日子!</div>
</body>
</html>
字体样式
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display属性</title>
    <!-- 实现 块元素和 内联元素的相互转换 -->

    <!-- 需求:
    01.设置块元素2和3 在一行显示
    02.设置块元素2和3  的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效
    03.我们想块元素2和3 在一行显示  但是  还能设置 宽度 高度  ???display: inline-block;
    04.把内联元素3  变成块元素  并且设置  宽度 高度
    -->
    <style type="text/css">
       div:nth-of-type(2),div:nth-of-type(3){
           /* display: inline;  内联元素*/
           display: inline-block; /*   行内块元素*/
           border: 1px solid red;
           height: 50px;
           width: 50px;
       }
       span:nth-child(3){
            border: 1px solid red;
            display:block;/*块元素*/
            height: 50px;
            width: 50px;
        }

    </style>

</head>
<body>

  <span>内联元素1</span>
  <span>内联元素2</span>
  <span>内联元素3</span>

  <div>块元素1</div>
  <div>块元素2</div>
  <div>块元素3</div>



</body>
</html>
display属性
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本样式</title>

    <style  type="text/css">
     /* 01.设置文本的颜色
       RGB:  red  green  blue
       rgb(red ,green,blue)  每个颜色的数值范围是0-255
       rgba(50,100,50,0.2) 最后一个参数  设置透明度 alpha 取值是0-1
       16进制的颜色码 #020202
        前两位代表R的分量
        中间两位代表G的分量
        后两位代表B的分量


        02.设置文本的对齐方式
          text-align  center  right  left

        03.设置文本的垂直居中
           我们设置的line-height的值要和 盒子的 height属性值一致!

        04.文本的装饰
             text-decoration: line-through;  删除线
             text-decoration: underline;  下划线
             text-decoration: overline;  上划线
        05.文本的阴影
          text-shadow:red  2px  3px 1px ;
          red:阴影的颜色
          2px:x轴的位移
          3px:y轴的位移
          1px:阴影的模糊范围  值越小  看到的文本越清晰
     */
     div{
         /*color: rgb(50,100,50);只是设置文本颜色*/
         color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/
         text-align: left;/*水平居中方式*/
         text-indent: 2em;/*首行缩进*/
         border: 1px solid red;
         height: 100px;
         line-height:100px ;  /*行高*/
         text-decoration: underline;
         text-shadow:red  2px  2px 1px ;/*文本的阴影*/
     }

    </style>


</head>
<body>
   <div>现价  500</div>
   <div>原价  900</div>
</body>
</html>
文本样式
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <!--
      a:link        我们还没有访问超链接时的样式
      a:visited     访问之后超链接的样式
      a:hover       鼠标悬停在超链接上的样式
      a:active      鼠标点击未释放
       顺序一定不能有误!
    -->


    <style type="text/css">
        a:link{
            color: red;
        }
        a:visited{
            color: greenyellow;
        }
        a:hover{
            color: deeppink;
        }
        a:active{
            color: yellow;
        }

        div[id="haha2"]:hover{
            color: red;
            text-shadow: pink 2px 2px 1px;
        }


        span:hover{
            background: red;
        }

    </style>

</head>
<body>

<span>haha</span>
  <a href="#">大家辛苦了!</a>

<div id="haha">哈哈</div>
<div id="haha1">哈哈1</div>
<div id="haha2">哈哈2</div>
</body>
</html>
超链接伪类
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>

    <style type="text/css">
        /*01.去掉列表前面实心圆点
           list-style-type: none;
          list-style-type:设置前面默认的样式
          
         02.把默认的小圆点换成图片
            list-style-image: url("../images/a.jpg");

         03.设置li和图标的关系
           li是否包含前面的小图标
           */
        li{
            list-style-position: inside;
          /*  list-style-image: url("../images/a.jpg");
            list-style-type: disc;*/
        }
    </style>
</head>
<body>
  <ul>
      <li>第1项</li>
      <li>第2项</li>
      <li>第3项</li>
      <li>第4项</li>
  </ul>
</body>
</html>
列表样式
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景样式</title>

   <style type="text/css">

       div{
           border: 1px solid red;
           height: 200px;
           width: 200px;
           background-color: aqua; /* 01.给div增加背景颜色*/
           background-image: url("../images/b.png"); /* 02.给div增加背景图片   图片会把颜色覆盖,其实颜色在图片后面*/
           background-repeat: no-repeat;/*03.设置图片的填充方式*/
           /*  background-position: 20px 10px;04.设置图片定位  设置size时 需要 注释*/
          /* background:color  image  position repeat ;  简写的规范*/
           /*
            background-size:contain;
           background-size:背景图片的尺寸
            auto:默认值,使用图片的大小
            cover:让整个图片正好填充整个盒子
            contain:让图片自动的方法或者缩小 适应盒子的大小
            percentage:使用百分比  手动的校正图片在盒子中的大小 100%;
           */
       }


   </style>


</head>
<body>
    <div></div>


</body>
</html>
背景样式
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>渐变属性</title>
    <!--
      01.线性渐变
          颜色按照从上到下或者从左到右 等顺序发生的变化
      02.径向渐变
        不是按照直线的顺序! 圆形,椭圆!从一个点向所有的方向混合!
    -->

    <style type="text/css">
        div{
            border: 1px  solid red;
            height: 200px;
            width: 200px;
            background: linear-gradient(to left top,red,green);
            /*  to top :方向
                red:第1个颜色
                black:第2个颜色
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
                */
        }

    </style>


</head>
<body>

<div></div>

</body>
</html>
渐变属性

 

css美化页面

标签:背景图片   数值   har   images   lap   20px   取值   并且   手动   

原文地址:http://www.cnblogs.com/wwlw/p/7773269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!