前端开发之CSS

一、CSS样式的引入方式

1、行内式

在标签的style属性中写CSS样式，比如<p style='color:red'>你好</p>，这种方式耦合性太强不建议使用

2、嵌入式

在<head>标签内添加<style>标签，在其中用标签选择器选择需要应用样式的标签然后在后面的{}中写CSS样式，CSS代码的重用性不高，也不是太建议使用

3、链接式

在<head>标签内添加<link>标签，rel='stylesheet' href='CSS文件路径' 这种方式耦合度低，代码重用性高，推荐使用

二、标签选择器

1、基本选择器

标签名 {CSS}

#id值 {CSS}

.class值 {CSS}

* {} 所有标签都应用

2、组合选择器

后代选择器

条件值1 条件值2 ... {CSS}

子代选择器

条件值1>条件值2 {CSS}

毗邻选择器

条件值1+条件值2 {CSS}

兄弟选择器

条件值1~条件值2 {CSS}

多元素选择器

条件值1 条件值2,条件值3 条件值4 {CSS}

多条件选择器

标签名属性值 {} 属性值为class属性或id

3、属性选择器

以下所有选择器中的标签可以省略

标签[属性] {}

标签[属性=值] {}

标签[属性~=值] 属性具有多个空格分隔的属性值，其中一个值等于指定的值

标签[属性^=值] 属性值以指定值开头

标签[属性$=值] 属性值以指定值结尾

标签[属性*=值] 属性值包含指定值

4、伪类选择器（可以操作本身或者后代标签）

标签:link {CSS} 链接没有被访问时添加该CSS

标签:visited {CSS} 链接被访问后添加该CSS

标签:hover {CSS} 鼠标移动到该链接上时添加该CSS

标签:active {CSS} 鼠标点击该链接时添加该CSS

标签:before {CSS} 在指定标签内的最前面添加内容

标签:after {CSS} 在指定标签内的最后面添加内容

三、CSS继承与优先级

子元素会继承父元素的样式，继承的优先级为0。

行内标签优先级1000，id值优先级100，class值优先级10，标签名优先级1。最终优先级按数值总和排序，如果优先级一样，最后定义的生效，但如果样式中某个属性有!important则该属性按该样式设置为准。

四、文本相关样式

文字颜色 color

水平对齐方式 text-align left 左对齐 right 右对齐 center 居中 justify 两端对齐

文字大小 font-size

文本行高 line-height 文字高度加上下空白的总高度该属性等于height时为垂直居中

元素内容的垂直对齐方式 vertical-align:-4px #应用于图片，调整文字与图片的对齐位置

设置或删除文本的装饰 text-decoration:none

字体系列 font-family

文字粗细 font-weight lighter/bold

字体斜体 font-style

首行缩进 text-indent

字母间距 letter-spacing

单词间距 word-spacing

文本大小写转换 text-transfrom: capitalize/uppercase/lowercase

五、背景相关样式

背景色 background-color

背景图 background-image

是否及如何重复背景图 background-repeat repeat/norepeat/repeat-x/repeat-y

背景图的开始位置 background-position

透明度 opacity 0~1

六、边框相关样式

边框宽度 border-width

边框样式 border-style

边框颜色 border-color

上边框样式 border-top-

下边框样式 border-bottom-

左边框样式 border-left-

右边框样式 border-right-

七、列表相关样式

用图像替换列表项前面的标记符号 list-style-image: url('图像路径')

设置列表项标记符号的位置 list-style-position inside 标记算作文本的一部分 outside 标记不算文本的部分

设置列表项标记符号的类型 list-style-type circle 空心圆 squire 正方形 upper-roman 大写的罗马字母 lower-alpha 小写字母

一次设置列表项标记符号的所有属性 list-style

八、display相关样式

none 隐藏该标签

block 该标签设置为块级标签

inline 该标签设置为内联标签

inline-block 该标签为内联标签可以设置块级标签的属性即width和height，另外一种方法就是让内联标签float

九、内边距padding和外边距margine

上外边距 margin-top

下外边距 margin-bottom

左外边距 margin-left

右外边距 margin-right

居中 margin:0 auto

padding设置同margine

让<body>标签显示紧贴浏览器窗口，设置<body>的margin属性为0

解决重叠在父标签中设置样式 overflow:hidden

十、float属性

float: left/right 块级标签往左或往右浮动，半脱离文档流，会挤占文本区域

解决父级标签和其兄弟标签重叠

1、在<style>标签内添加样式

.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
        font-size:0;
}
然后用<div class="head clearfix"></div>标签将父级标签包裹，这种方法利用的是clear语法清除浮动效果，但是需要注意clear语法只对有该属性的标签本身起作用。
2、在父级标签中添加overflow:hidden属性，该属性的意义是将后代标签中超出父级标签的部分隐藏，在父级标签没有设置高度的情况下需要计算后代标签的高度才能确定在哪里hidden，因此父级标签就会被撑开

十一、position属性

position:relative 相对定位，不脱离文档流，相对自己的原始位置进行定位，根据top,bottom,left,right的值进行上下左右移动，根据z-index值确定层叠关系，一般用于父级标签

position:absolute 绝对定位，完全脱离文档流，优先根据设置relative的祖先元素定位，如果没有就根据<body>标签定位，并且该标签变为块级标签

position:fixed 固定，标签固定于窗口的指定位置

十二、子标签的默认宽度和高度

当子元素为块级标签，它的默认宽度为父元素的宽度，默认高度为0

当子元素是内联标签，如果该标签不是img或input标签其宽度需要靠内容撑起来，如果是img或input标签需要单独设置宽度和高度，其不受父元素宽高的影响。

十三、后台布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .pg-header{
           height: 48px;
           width: 100%;
           background-color: #204982;
           position: fixed;
           top:0;
           left: 0;
        }
        .left{
            position:absolute;
            left:0;
            top:48px;
            bottom:0;
            width:200px;
            background-color: darkgray;
        }

        .right{
            position:absolute;
            right:0;
            left:200px;
            top:48px;
            bottom:0;
            overflow:auto;
            background-color: wheat;
        }
    </style>
</head>
<body>


<div class="pg-header"></div>
<div>
    <div class="left">

    </div>
    <div class="right">
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>

    </div>
</div>

</body>
</html>

View Code

十四、响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*======================================初始化=====================*/
            *{
             margin: 0;
             padding: 0;
                  }

            body{
                font-size: 12px;
            }

            a{
              text-decoration: none;
            }

        /*======================================header区域设置=====================*/
        .header{
               height: 44px;
               width: 100%;
               background-color: #2459a2;
               position: fixed;
               top:0;
               left: 0;
        }



        .header_content{
            width: 80%;
            height: 44px;
            background-color: #2459a2;
            margin: 0 auto;
            line-height: 44px;
            position: relative;

        }


/*======header区part1:logo ===========*/


               .logo{

                    float: left;
                    width: 121px;
                    height: 23px;
                    margin-top: 9px;

                }

/*======header区part2:action-menu =====*/

               .action-menu{
                    float: left;
                    margin-left: 30px;
                }

                .action-menu a.tb{
                            color: #c0cddf;
                            padding: 0 10px;
                            text-align: center;
                            margin-left: -3px;
                            display: inline-block;


                        }

                .action-menu a.tb:hover {
                    color: #fff;
                    background-color: lightslategrey;

                }

                 .action-menu a.active, .action-menu a.active:hover {
                                color: #fff;
                                background-color:#204982;;

                            }

/*======header区part3:key-search =====*/

                 .key-search{
                         margin-top: 5px;
                         float: right;
                    }


                 .key-search a.search-icon-box, .search-txt {
                        float: left;
                    }

                .search-txt {

                    color: #333;
                    line-height: 25px;
                    padding: 2px 2px 2px 5px;
                    height: 25px;
                    width: 91px;

                }

                .key-search a.search-icon-box {
                    border: 1px solid #e0e0e0;
                    background-color: #f4f4f4;
                    width: 30px;
                    height: 31px;
                    border-left: 0;
                }


                .key-search a.search-icon-box span.search-icon{
                    background: url("images/icon.png") no-repeat 0 -197px;
                    float: left;
                    height: 12px;
                    width: 11px;
                    margin-left: 10px;
                    margin-top: 9px;
                }

/*======header区part4:action-nav =====*/

                .action-nav {
                       float: right;
                       margin-right: 10px;
                    }

                 .action-nav a {
                        color: white;
                        padding: 14px 18px;

                    }

                .action-nav a:hover{
                    background-color: lightslategrey;
                    color: white;
                }
 /*======================================content区域设置=====================*/

             .content-box {
                    background-color: #ededed;
                    padding-top: 44px;
                    height: 100%;
                }

             .content {
                    width: 960px;
                    margin: 0 auto;
                    height: auto!important;
                    overflow: hidden;
                    min-height: 713px;
                    padding: 6px 28px;
                    background-color: #fff;
                    /*overflow: hidden;取消后看看效果*/
                }

        /*===============================响应式布局=====================*/



         @media(max-width:1050px) {


          .action-menu a.item{

              display: none;
              background-color: gold;
              border: dashed 1px rebeccapurple;

              color: black;





          }

             .action-menu a.active{

                 padding: 0 25px;

             }

             .action-nav{

                 float: left;

                 margin-left: 80px;

             }

             .key-search{
                 float: right;
                 margin-right: 100px;
             }




          .action-menu:hover a.item{
              display: block;


          }



         }



        @media(max-width:810px) {

             .key-search{
                 display: none;
             }

            .action-nav{
                display: none;
            }
        }



    </style>
</head>
<body>



    <!--header结构-->
    <div class="header">

         <div class="header_content">

               <div class="logo">
                   <a href="/"><img src="images/logo.png" alt=""></a>
               </div>

               <div class="action-menu">

                        <a href="#" class="tb active">全部</a>
                        <a href="#" class="tb item">42区</a>
                        <a href="#" class="tb item">段子</a>
                        <a href="#" class="tb item">图片</a>
                        <a href="#" class="tb item">挨踢1024</a>
                        <a href="#" class="tb item">你问我答</a>
               </div>

               <div class="key-search">

                    <form action="/" method="post">
                        <input type="text" class="search-txt">

                        <a href="#" class="search-icon-box" >
                            <span class="search-icon"></span>
                        </a>
                    </form>

               </div>

               <div class="action-nav">

                    <a href="#" class="register-btn">注册</a>
                    <a href="#" class="login-btn">登录</a>
               </div>

         </div>
    </div>


    <!--content结构-->

    <div class="content-box">

        <div class="content">


        </div>
        
    </div>



</body>
</html>

View Code

十五、模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bottom {
    width: 100%;
    height: 1200px;
}
<!-- 设置遮罩层-->
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    opacity: 0.2;
    background-color: #0f0f0f;
}
<!-- 设置模态框 -->
.modality {
    border:1px solid red;
    background-color: darkgoldenrod;
    width: 200px;
    height: 200px;
    position: fixed;
    top:200px;
    left:600px;
    z-index: 100;
}
<!-- 将模态框隐藏 -->
.hiden {
    display: none;
}
    </style>
</head>
<body>
    <div class="bottom">
            <a href="">python</a>
            <a href="">html</a>
            <a href="">css</a>
            <a href="">java</a>
            <a href="">javascript</a>
            <a href="">golang</a>
    </div>
    <div class="mask hiden"></div>
    <div class="modality hiden"></div>
</body>
</html>

View Code

十六、css补充之媒体查询实现响应式页面

@media screen and (max-width:780px) {样式} 当屏幕宽度小于等于780像素时应用其中的样式

posted @ 2017-09-21 12:12 魅力宁波阅读(179) 评论(0) 收藏举报

刷新页面返回顶部

美好生活

前端开发之CSS