css样式

css样式

文字与文字样式:单位与颜色、text、font

p{
    font-size:12px;
    color:blue;
    font-weight:bold;
}
css样式常用单位：

px; 像素

em：1em一个字符 行高（自动适应用户所使用的字体）

%：百分比

1.颜色

 

  • rgb(x,x,x) RGB值 每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66)

 

  • rgb(x%,x%,x%) RGB百分比值 0%-100% 红色：rgb(100%,0%,0%)

 

  • rgba(x,x,x,x) RGB值，透明度 a值：0.0（完全透明）与1.0（完全不透明） 红色半透明：rgba（255,0,0,0.5）

 

  • #rrggbb 十六进制数 红色:#ff0000 红色：#f00 去掉重复位

2.文本

  • color 文本颜色 red #f00 rgb(255,0,0)

  • letter-spacing 字符间距 2px -3px

  • line-height 行高 14px 1.5em 120%

  • text-align 对齐 center left right justify

  • text-decoration 装饰线 none overline underline line-through

text-indent 首行缩进 2em

字符间距 letter-spacing
//demo5.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        h1{
            letter-spacing:2px;      
        }
        h2{
            letter-spacing: -3px;
        }
        
    </style>
</head>
<body>
    <h1>标题内容就这样</h1>
    <h2>标题内容就这样</h2>
</body>
</html>
行高 line-height
//hanggao.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        p{
            font-size: 24px;
            line-height: 2em;
        }   
    </style>
</head>
<body>
    <p>
        这里是web前端开发课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案.这里是web前端开发课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案.
    </p>
</body>
</html>

行高应用line-height:40垂直居中，40为文本的高度

垂直居中文本对齐：指文字在文本框的竖直方向时居中的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        p{
            height: 40px;
            background-color: #ccc;
            font-size: 14px;
            line-height: 40px;
        }   
    </style>
</head>
<body>
    <p>
        这里是web前端开发课程网站
    </p>
</body>
</html>
文字 font

font:斜体 粗体 字号/行高 字体

font:italic bold 16px/1.5em ‘宋体’;

css背景与超链接

1.背景：

  • background : 颜色 图片 repeat

  • background-color

  • background-image : url("logo.jpg")

  • background-repeat 背景图片填充: repeat 棋盘格的填充/ repeat-x 横向填充 / repeat-y 纵向填充一列/ no-repeat 只显示一次，一张图片作为背景图片

2.超链接：

  • a : link :普通的，未被访问的链接

  • a : visited ：用户访问过的链接

  • a : hover ：鼠标指针位于链接的上方悬停

  • a : active ：链接被点击的时刻 ：伪类选择器

超链接按照以下次序：

  • a : hover必须位于a:link 和a：visited之后

  • a : active 必须位于 a:hover之后

  • Love&Hate

3.鼠标悬停放大字体：

//css
a{
    font-size:22px;
}
a:hover{
    font-size:120%;
}
//html
<a href="#">web design</a>

css列表与表格

1.列表

无序列表ul 有序列表ol共用样式

  • list-style：所有用于列表的属性设置于一个申明中。

  • list-style-image：为列表项标志设置图像

  • list-style-position：标志的位置

  • list-style-type：标志的类型

list-style-type://值的取值范围

//无序列表

  • none 无标记

  • disc 默认。标记是实心圆

  • circle 标记是空心圆

  • square 标记是实心方块

//有序列表

  • decimal 标记是数字

  • lower-roman 小写罗马数字（i，ii，iii，iv，v）

  • upper-roman 大写罗马数字（I,II,III,IV,V）

  • lower-alpha 小写英文字母

  • upper-aipha 大写英文字母

  • lower-Greck小写希腊字母

  • lower-latin 小写拉丁字母

  • upper-latin大写拉丁字母

list-style-position:inside /outside

  • inside向右缩进到列表区域之内

  • outside标号是突出在这个列表他的左侧

list-style-image:项目标号是图片的样式

  • url("img/bul1.gif")

2.表格

border

width 宽

height 高

border-collapse

table{
     50px;
    height:200px;
​
}

 

eg;//表格最外层边框table 表头单元格td 表格里面包括表头单元格：th

table,td,th{
    border:1px solid #eee;
​
}//一个像素宽 实线 灰色

 

border-collapse:合并默认的表格样式(表格边框给和单元格边框重叠成一个，更美观)

table{
    border-collapse:collapse;
}

奇偶选择器 ：nth-child(odd|even)

表格隔行显示不同的颜色

tr:nth-child(odd){
    background-color:#EAF2D3;
}

odd表示奇数个行，even表示偶数个选择器

css布局与定位

1.盒子模型

(元素什么样)

  • 盒子模型组成：content内容 、height高度、 width宽度、border边框、padding内边距、margin外边距

  • 一个盒子的实际距离宽度、高度 content+padding+border+margin

  • 总宽度=margin-left+border-left+padding-left+内容宽度+padding-right+border-right+margin-right。

//hezi.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css" media="screen">
        #box{
             100px;
            height: 100px;
            border: 1px solid;
            padding: 20px;
            margin: 10px;
        }
        
    </style>
</head>
<body>
    <div id="box">
        内容呢就是一个是下高速的盒子，老板发工资最好。
        
    </div>
</body>
</html>

//width,height表示内容的高度宽度占100px大小;

//border表示边框是1px实线宽;

//padding表示边框距离内容的内边距是20px;

//margi表示边框距离其他内容的外边距是去10px;

overflow属性

内容溢出盒子框时，overflow属性取值。

  • hidden : 超出部分不可见

  • scroll : 显示滚动条

  • auto : 如果有超出部分，显示滚动条

​
1.1页面元素的大小

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。content

  • element : 元素。

  • padding : 内边距，也有资料将其翻译为填充。

  • border : 边框。

  • margin : 外边距，也有资料将其翻译为空白或空白边。

1.2边框
border属性

  1. border-width : px 、thin（细线条）、medium（中线条）、thick（粗线条）

  2. border-style ：dashed(-----)、dotted(......)、solid(实线)、double（双实线）

  3. border-color ： 颜色

  4. border ：width style color

div{
    border-2px;
    border-style:solid;
    border-color:red;
}
div{
    border:2px solid red;
}
div{
    border-bottom:1px solid red;
}
//边框底部样式
水平分割线
.line{
    height:1px;
    500px;
    border-top:1px solid #e5e5e5;
}

 

1.3与其他元素的距离

对浏览器默认的设置清零

*{
    margin:0;
    padding:0;
}
内边距外边距组成
padding:5px; margin:5px; 上右下左
padding-top:10%; margin-top:10%; 上
padding-left padding-left 左
padding-right margin-right 右
padding-bottom margin-bottom 下

  • margin:1px 1px 1px 1px;//margin=1px;

  • margin:1px 2px 1px 4px;//top right bottom left;其中上下的值一样，但是不能省略来写。

  • margin:1px 2px;//top=bottom=1px;right=left=2px;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        div{
            100px;
            height:100px;
            margin:15px 10px 20px 30px;
            border:1px solid red;
        }
        
    </style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>
</html>

margin垂直方向外边距的合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

margin水平居中：

图片、文字水平居中:text-align:center

div水平居中 :margin:0 auto;//左侧，右侧的取值auto

eg:设置一个大盒子里面有三个小盒子，放置三幅图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css" media="screen">
        #newsimglist{
            text-align:center;
            font-size: 0;/*否则图间有空隙*/
        }
        #newsimglist img{
            height: 100px;
             100px;
            margin-left: 5px;
            border: 1px solid #0ef;
            padding :5px;
        }
​
        
    </style>
</head>
<body>
    <div id="newsimlist">
        <img src="img/tu4.png">
        <img src="img/tu4.png">
        <img src="img/tu4.png">
        
    </div>
</body>
</html>

 

2.定位机制

确定盒子在页面的哪个位置

2.1文档流flow

默认当前在页面中显示出来的位置。

  • 元素分类

    • block元素

      • 独占一行

      • 元素的height,width, margin, padding都可以设置。

      • 常见的block元素有：<div> ,<p> ,<h1>...<h6> ,<ol>,<ul>,<table>,<form>

      • a{
            display:block;
        }

        inline元素a转换为block元素，从而使a元素具有块状元素的特征。

    • inline元素

      • 不单独占用一行

      • width,height不可设置

      • width就是它包含的文字或图片的宽度，不可改变

      • 常见的inline元素<span>,<a>

      • 显示为inline元素:display:inline;

        inline类型排列有间隙问题，可以在a标签前面加一个ul标签/li/p比标签
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>D</title>
            <style type="text/css">
                a{
                    background: pink;
                }
        ​
            </style>
        </head>
        <body>
            <a href="http://www.baidu.com">百度</a>
            <a href="http://www.imooc.com">慕课网</a>
        ​
        </body>
        </html>

         

    • inline-block元素

      • 就是同时具备inline元素，block元素的特点

      • 不单独占用一行

      • 元素的height,width,margin,padding都可以设置。eg:<img>

      • 常见的inline-block元素<img>,显示为inline-block元素display:inline-block;

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>D</title>
            <style type="text/css">
                *{
                    padding: 0；
                    margin：0;
                }
                #nav{
                     300px;
                    margin:100px auto;/*水平居中*/
                    font-size: 0px;/*取消超链接边框底部的灰色线条之间的空隙*/
                }
                a{
                    display: inline-block;
                     80px;
                    height: 30px;
                    font-size: 18px;
                    text-align: center;/*水平方向上对齐方式*/
                    line-height: 30px;/*垂直方向上的居中，与超链接所在区域的高度相同*/
                    text-decoration: none;/*使超链接没有下划线*/
                    border-bottom: 1px solid #ccc;/*下划线有空白*/
                }
                a:hover{
                    color: white;/*悬停字体颜色变为白色*/
                    background-color: #ccc;/*悬停时背景颜色变为灰色*/
                }
            </style>
        </head>
        <body>
            <div id="nav">
                <a href="#">链接1</a>
                <a href="#">链接2</a>
                <a href="#">链接3</a>
            </div>
        </body>
        </html>

display属性取值：

none元素不会被显示
block 显示为block元素
inline 显示为inline元素
inline-block 显示为inline-block
2.2浮动定位float

改变盒子默认位置，让盒子左右并排排列。

div{
    200px;
    hehight:200px;
    border:1px solid red;
    float:left;
}
<div id="box1"><div>
<div id="box2"><div>

清除浮动clear：

  • both,清除左右两边的浮动。

  • left 和rigth只能清除一个方向的浮动。

  • none是默认值，只在需要移除已指定的清除值时使用。

clear清除时，footer单独显示占据一行，不出现在空位置，需要设置clear两侧属性均清除。

#footer{
    clear:both;
}
//三行一列
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
​
        *{
            padding:0;
            margin: 0;
        }
        body{
            font-size: 14px;
        }
        #container{
            margin: 0 auto;
             1000px;
            height: 500px;
            /**/
​
        }
        #header{
            height: 100px;
            background-color: #6cf;
            margin-bottom: 5px;
        }
        #main{
            height:500px;
            background-color: #cff;
            margin-bottom: 5px;
        }
        #footer{
            height: 60px;
            background-color: #6cf;
        }
​
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </div>
</body>
</html>
//一行两列float
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
​
        *{
            padding:0;
            margin: 0;
        }
        body{
            font-size: 14px;
        }
        #container{
            margin: 0 auto;
             1000px;
            height: 500px;
            /**/
​
        }
        #aside{
            float: left;
             300px;
            height: 500px;
            background-color: #6cf;
        }
        #content{
            float: right;
             695px;
            height: 500px;
            background-color: #cff;
        }
​
    </style>
</head>
<body>
    <div id="container">
        <div id="aside"></div>
        <div id="content"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
​
        *{
            padding:0;
            margin: 0;
        }
        body{
            font-size: 14px;
        }
        #container{
            margin: 0 auto;
            1080px;
            /*height: 900px;*/
            /**/
​
        }
        #header{
            height: 100px;
            background-color: #6cf;
            margin-bottom: 5px;
        }
        #nav{
            height: 30px;
            background: #09c;
            margin-bottom: 5px;
        }
        #main{
            height:500px;
            /**/
            margin-bottom: 5px;
        }
        .aside{
            float: left;
             190px;
            height: 500px;
            background:#6cf;
        }
        #aside1{
​
        }
        #aside2{
            margin-left: 5px;
        }
        #content{
            float: left;
            margin-left:5px;
             690px;
            height: 500px;
            background-color: #cff;
        }
        #footer{
            height: 60px;
            background-color: #6cf;
        }
​
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="nav"></div>
        
        <div id="main">
            <div id="aside1" class="aside"></div>
            <div id="content"></div>
        
            <div id="aside2" class="aside">
            
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

 

2.3层定位layer

改变默认，设置position属性：让网页元素像图层一样 前后层叠在一起，有叠加的效果，摆在上面的层可以遮蔽掉下面的层。

position属性(相对于谁定位)

  • static 默认值 没有定位，元素出现在正常的流中top,bottom,left,right,z-index无效

  • fixed 固定定位 相对于浏览器窗口进行定位top,bottom,left,right,z-index有效（fixed的取值可以是直接父元素或间接父元素，具体是哪个元素由值是否为static决定）

    #fix-box{
        200px;
        height:200px;
        border:1px solid red;
        
        position:fixed;
        left:100px;
        top:50px;
    }

    不占据其他位置，只为自己分配一个空白位置进行活动。

     

  • relative 相对定位 相对于其直接元素进行定位 top,bottom,left,right,z-index有效。定位为 relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在

    #box1{
        170px;
        height:190px;
        position:relative;
        top:20px;
        left:20px;
    }

    保留原始位置，覆盖一部分其他位置

     

  • absolute 绝对定位 相对于satatic定位以外的第一个父元素进行定位 top,bottom,left,right,z-index有效.

    定位为absolute的层脱离正常文本流，但与relative的区别：其正常流中的位置不再存在

    #box1{
        position:absolute;
        top:20px;
        left:20px;
    }

  • absolute和relative区别

    relative的直接父元素是直接包裹着他的元素块儿，根据直接父元素来定位。

    absolute定位是包裹者他的static元素的父元素（是absolute/relative类型）来定位，也就是间接父元素来定位。

    如果absolute找到的父元素都是static类型没有absolute/relative类型，则对body进行定位。

  • 通常relative+absolute定位 //三层定位：relative+absolute+absolute

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>D</title>
        <style type="text/css">
            #box1{
                 170px;
                height: 190px;
                border: 3px solid purple;
                background: #46e2ad;
                font-size: 32px;
                position: relative;
                top: 20px;
                left: 20px;
    ​
            }
            #box2{
                280px;
                height: 280px;
                border: 1px solid pink;
                background: #a6e2ad;
                position: absolute;
                top: 100px;
                left: 100px;
            }
    ​
        </style>
    </head>
    <body>
        <div id="box1">welcome to北京!!!
            <div id="box2">
                <img src="img/tu4.png">
            </div>
            
        </div>
    </body>
    </html>
    //文字浮在图片上，文字跟随图片动。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>D</title>
        <style type="text/css" media="screen">
            div{
                border:1px solid red;
                color: #fff;
            }
            #box1{
                 278px;
                height: 275px;
                position: relative;
            }
            #box2{
                 99%;
                position: absolute;
                bottom: 0;
            }
    ​
        </style>
    </head>
    <body>
        <div id="box1">
            <img src="img/tu4.png">
            <div id="box2">让给我们荡起双桨，小船儿推开波浪，在那桃花盛开的地方有我骂我们的家啊家象！
                
            </div>
        </div>
    ​
    </body>
    </html>

     

//通过以下属性定位（位置在哪里）

left属性、right属性、top属性、bottom属性

z-index属性：值大在上面，进行部分覆盖。

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/evident/p/11598507.html