前端之CSS

概念

css样式:

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。

存在方式有三种：元素内联、页面嵌入和外部引入

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'

在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式

引入外部css文件

优先级：标签>页面镶入>外部，这个仅限同样的样式冲突是才有用

元素内联：

直接在标签上应用：代码如下



<p style="background-color: aqua">shuaige</p>

效果图如下：

页面嵌入

在头部写好css样式然后应用：代码如下

<head>
    <meta charset="UTF-8">
    <title>liufeng_study</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        .css_test{
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <div>
        <p class="css_test">
            <!--这里应用指定好的CSS样式名即可-->
            shuaige
        </p>
    </div>
</body>

效果图如下：

外部引用

写一个独立的文件存储css样式代码如下：建议（在样式文件里加上标注防止出现遗忘）

html代码如下：

<head>
    <meta charset="UTF-8">
    <title>liufeng_study</title>
    <!--这里通过link导入样式，有点类似与python导入模块中的import *-->
    <link rel="stylesheet" href="study_html_css.css">
</head>
<body>
    <div>
        <p class=page_color>
            <!--这里直接应用指定好的CSS样式名即可-->
            shuaige
        </p>
    </div>
</body>

效果图如下：

CSS样式应用中通过class应用CSS样式即可，还有两种知道即可代码如下：

id应用，"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式，代码如下：

<head>
    <meta charset="UTF-8">
    <title>liufeng_study</title>
    <style>
        #name{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="name">
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            shuaige
        </p>
        <p id="name">
            liufeng
        </p>
    </div>
</body>

效果图如下：

标签应用，为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下

<head>
    <meta charset="UTF-8">
    <title>liufeng_study</title>
    <style>
        p{
            background-color: lightskyblue;
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            shuaige
        </p>
        <p>
            liufeng
        </p>
    </div>
</body>

效果图如下：

CSS常用属性

background 【背景】

background-color 背景颜色代码如下：

<div style="background-color: red">
        Hello,html
</div>

显示效果：

background-image 背景图片代码如下：

<div style="background-image: url(favicon.ico);height: 80px;" ></div>

显示效果如下：

首先确认，div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

 <div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" ></div>

显示效果如下图：

background-repeat

<body>
    <div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
    </div>
</body>

background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）

background-position-x、background-position-y

显示图片中特定的位置图标

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>

background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动；两者可以简写成：

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position:20px 40px"></div>
</body>

border 【边框】

设置边框，效果图如下图：

代码如下：

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
    <!--第一种：线的粗细为1像素，实线、红色-->
    <div style="border:1px solid red;height:10px" ></div>
    <!--第二种：线的粗细为1像素，点、蓝色-->
    <div style="border:1px dotted blue;height:10px" ></div>
    <!--第三种：线的粗细为1像素、虚线、紫色-->
    <div style="border:1px dashed purple;height:10px" ></div>

Display

代码如下：

<!--display 为none将隐藏标签-->
    <div style="display: none;">liufeng</div>
    <!--display 为inline会将块级别标签调为内联标签-->
    <div style="background-color:red;display:inline">liufeng</div>
    <!--display 为block会将内联标签调为块级别标签-->
    <a style="background-color:red;display:block">liufeng</a>

cursor 鼠标停放所显示的效果

代码如下（实际效果自己写看）：

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>
    <div style="cursor:help">停放在这里显示问号(help)</div>
    <div style="cursor:wait">停放在这里显示问号(wait)</div>
    <div style="cursor:move">停放在这里显示移动(move)</div>
    <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

浮动 float （用的比较多，用来布局使用）

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>liufeng_study</title>
    <style>
        .float-left{
            width:20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
            width: 80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>

float

　　注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

<div style="clear:both;"></div>

css样式选择器

1、标签选择器

　　为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：

<style>
        /*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/
        div{
            font-size: 19px;
        }
    </style>

<body>
    <div>
        font size test 19
    </div>
</body>

效果图如下：

2、ID选择器

　　为指定的ID设置样式，代码如下：

<style>
        /*ID选择器*/
        #i1{
            background-color:red;
        }

  </style>

<body>
/*为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同*/
<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a> </body>

效果图如下：

3、类选择器

　　class选择器，id是可以相同的，代码如下：

<style>
        /*类选择器标签*/
        .cls{
            background-color:blue;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <!--任何类型的标签都可以调用类选择器-->
    <div class="cls">
        class test div
    </div>
    <a class="cls">
        class test a
    </a>
    <span class="cls">
        class test span
    </span>
</body>

　伪类选择器

a:link { color:#ff0000; }  /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; }  /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; }  /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; }  /*鼠标按下时，超链接文字为黄色*/

　　举例：可以看一下抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0;
10             left: 0;
11             top: 0;
12             height: 48px;
13             background-color: #2459a2;
14             line-height: 48px;
15             color: white;
16         }
17         .pg-body{
18             margin-top: 50px;
19         }
20         .w{
21             width: 980px;
22             margin: 0 auto;
23         }
24         .pg-header .menu{
25             display:inline-block;
26             padding: 0 10px 0 10px;
27         }
28         .pg-header .menu:hover{
29             background-color: #BF1919;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="pg-header">
35         <div class="w">
36             <a >LOGO</a>
37             <a class="menu">全部</a>
38             <a class="menu">42区</a>
39             <a class="menu">段子</a>
40             <a class="menu">1024</a>
41             <a class="menu">爆文</a>
42         </div>
43     </div>
44     <div class="pg-body">
45     </div>
46 </body>
47 </html>

View Code

其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式

注：上面的3个选择器一般不要用标签&id选择器，用类选择器就可以

4、关联选择器

<head>
    <meta charset="UTF-8">
    <title>shuaige</title>

    <style>
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        .container li{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->
    <div class="container">
        <div style="height: 20px;background-color: red;">
            test
        </div>
        <ul>
            <li>
                li1
            </li>
            <li>
                li2
            </li>
            <li>
                li3
            </li>
        </ul>
    </div>
</body>

关联选择器

效果图如下：

关联选择器：应用场景为某标签下面的标签设置指定的样式：

下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式

.container li{
            background-color: pink;
        }

　　问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！

.container li a {
            background-color: pink;
        }

　　OK 看下面的代码

<style>
        /*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/
        .container .l .p {
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="l">
            test
                <div>
                    <ul>
                        <!--这里需要注意,他们只要是有包含关系就行,不一定非得挨着-->
                        <li class="p">
                            hello shuaige
                        </li>
                    </ul>
                </div>

        </div>

    </div>

效果图如下：

5、组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

            .container .a .cc1 {
                background-color: pink;
            }
            .container .a .cc2 {
                background-color: pink;
            }

解决方法代码如下：组合选择器1

   .container .a .cc1,.container .a .cc2  {
                background-color: pink;
            }

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

       .container .a .cc1,.cc2  {
                background-color: pink;
            }

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

/*组合选择器*/
            .container b ,.a .cc1,.cc2  {
                background-color: pink;
            }
            /*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
            .container b
            .container b .a .cc1
            .container b .cc2
　　　　　　　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

6、属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

<div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

怎么做呢？在组合选择器后面加个[type=“text”]即可

<style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style>

效果如下：

需求又来了，我想找到input标签为type为text并且name为“shuaige”的那个input标签

<div class="con">
        <input type="text" />
        <input type="text" name="shuaige"/>
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

<style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][name="shuaige"] {
            border:3px solid red;
        }
    </style>

效果图如下：

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][alex="shuaige"] {
            border:3px solid red;
        }
    </style>
</head>
<body>
    <div class="con">
        <input type="text" />
        <input type="text" alex="shuaige" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

</body>

</html>

属性选择器&自定义属性

7、background-position 图片位移

应用场景，在实际的生产环境中咱们在网页上看到的小图片不是一个一个的零散的小图片的，咱们只是看到了大图片的一部分。比如一个大图片，我只让他显示一部分并不全部显示怎么做？

可以这么想：

有一个窗口，你在窗口的一边，只能通过窗口来看外面，你不能动，我们可以通过移动这个窗口来让你看到不同的场景，当然你看到的大小和窗口的大小有关！

代码如下：

<style>
        .chuangkou{
            /*定义一个图片*/
            background-image: url('content_images.jpg');
            /*定义一个窗口,指定长和宽*/
            height: 30px;
            width:30px;
            /*设置图片不重复*/
            background-repeat:no-repeat;
            background-position: 3px 10px ;
        }
    </style>

<body>
    <div class="chuangkou">

    </div>
</body>

效果图如下：

8、内、外边距

内边距，代码如下：

<div style="background-color: green;height: 200px;">

        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    ">
        </div>
    </div>

效果图如下：

我要达到让蓝色在中间的效果怎么办呢？在绿色的基础上在进行填充，代码如下：

<div style="background-color: green;height: 100px;padding-top: 100px;">

        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    ">
        </div>
    </div>

我在原有的绿色的div标签内部的顶端又填充了100px这样看起来的效果就变成蓝色的在中间了

外边框

同样的图下面，我在蓝色的方框外面的顶部增加30px效果就向往下移动了30px

<div style="background-color: green;height: 100px;padding-top: 100px;">

        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    margin-top: 30px;
                    ">
        </div>
    </div>

效果图如下：

这里需要注意：使用padding会继承原有的颜色在内部填充，使用margin在外面扩张并且没有颜色

如果padding&margin不指定在上、下、左、右增加边框的话默认上下左右都添加边框！

9、定位position

fixed : 将某个元素固定在页面的某个位置
absolute : 绝对定位
relative：相对定位

定位方式通常与定位坐标一起使用
定位坐标：要定位的元素偏离目标位置多远的距离
Top，left，right，bottom

fixed : 将某个元素固定在页面的某个位置

特点：
   1.相对于浏览器的窗口来进行定位的
   2.固定到窗口的某个位置上，不随内容而滚动
   3.如果不设置定位坐标，就在原来的位置，否则反之

relative: 相对定位

特点：
   1.相对定位是相对于，自身的左上角为坐标点
   2.占据空间

absolute：绝对定位

特点：
   1.相对于（父级元素的定位方式（relative ）来进行定位 找祖先元素是否有定位，如果没有定位，找到body，就相对body来定位 如果找到祖先元素有定位，相对祖先元素来定位
   2.不占空间

relative: 相对定位与 absolute：绝对定位结合使用案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .all{
 8             width: 400px;
 9             height: 150px;
10             border: 1px solid red;
11             margin: 0 auto;
12             position: relative;
13         }
14         #one{
15             width: 50px;
16             height: 50px;
17             background-color: black;
18             position: absolute;
19             left: 0;
20             bottom: 0;
21         }
22         #two{
23             width: 50px;
24             height: 50px;
25             background-color: black;
26             position: absolute;
27             right: 0;
28             bottom: 0;
29         }
30         #three{
31             width: 50px;
32             height: 50px;
33             background-color: black;
34             position: absolute;
35             right: 0;
36             top: 0;
37         }
38 
39     </style>
40 </head>
41 <body>
42     <div class="all">
43         <div id="one"></div>
44     </div>
45     <div class="all">
46         <div id="two"></div>
47     </div>
48     <div class="all">
49         <div id="three"></div>
50     </div>
51 </body>
52 </html>

View Code

10、样式：overflow

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？详细情况如下图，代码

代码如下：

<div style="height:100px;background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

效果图如下：

解决方法：增加overflow样式，代码如下：

<div style="overflow:auto;height:100px;background-color:green;">
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
        tianshuai <br/>
    </div>

效果就会，在div块级标签内有个滚动条

还有一个样式：hidden超出div区域的将会自动隐藏

<div style="overflow:hidden;height:100px;background-color:green;">

11、透明度

透明度，用的比较多，需要注意，简单代码例子如下：

<div style="background-color:blue;height:100px;padding-top:30px">
        <!--这里设置内部的div的透明度-->
        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>
    </div>

效果图如下：

12、z-index

用来设置展示在浏览器中的页面的层级

posted @ 2017-02-14 01:13 crazy_6 阅读(125) 评论(0) 编辑收藏举报

刷新页面返回顶部

creazy_six

前端之CSS

概念

CSS常用属性

css样式选择器

公告