CSS 简介

需要具备的基础知识

在继续学习之前，你需要对下面的知识有基本的了解：

HTML
XHTML

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

style应用的方式：

style样式的应用有三种方式：

1.在标签上面通过style属性设置.

<body>
    <div style="background-color: red;color: green;">
        hello world<br>
        welcome to china
    </div>

</body>

2.将sytle样式写在<head></head>中，然后使用class引用样式.免代码重用，和代码可以避简洁.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .logo {
            background-color: red;
            font-size: 18px;
            border: 1px;
        }
        .logo a{                            <!--a标签拥有logo属性,并引用自己的属性 -->
            font-size: 56px;
         
        }
 
        .logo a,p{                          <!--a和p标签同时拥有logo属性 -->
            font-size: 56px;
            background-color:yellow;
        }
    </style>
</head>
 
<body>
<div class="logo">              <!--让a标签和p标签同时拥有logo属性 -->
    <div>div标签</div>
    <a>a标签</a>
    <p>p标签</p>
 
    </div>
</body>
</html>

3.将sytle样式写入common.css文件中然后倒入使用.这种方法支持多个文件使用同一个css样式文件.代码简洁方便，推荐使用.

#css/common.css文件：
.a1{
            background: red;
        }
.a2{
            background: yellow;
        }
.logo {
            font-size: 56px;
            background-color:lightslategrey;
        }
.c {
            font-size: 20px;
            background-color: red;
}

########################################
#html文件

<head>
<link rel="stylesheet" href="css/common.css"/>    <!--倒入css样式文件 -->
</head>

<body>
    <div class="a2">hello world</div>　　　　　　　　<!--引用css样式中的a2属性 -->
    <span class="logo">goodbye</span>

</body>

css选择器：

1.标签选择器

div{ 
		background-color:red;
		 }
		 
<div > </div>

2.class选择器

.bd{
		 background-color:red;
		  }
		  
<div class='bd'> </div>

3.id选择器

#idselect{ 
		background-color:red;
		 }
		 
<div id='idselect' > </div>

上述三种选择器使用最广泛的为class选择器

4.关联选择器　

#idselect p{ 
		background-color:red;
		 }
		 
<div id='idselect' >
		 <p> </p> 
		</div>

5.组合选择器

#让cc1和cc2应用同一个样式

.c1 #il a .cc1,.cc2{ 
				background-color:red;
				 }

6.属性选择器

<head>
.conn input[type='text']{ 
			width:100px; height:200px;
			 }

</head>
<body>			 
<div class="conn"> 
				<input type="text"/>
				<input type="password"/>
				</div>
				
</body>

CSS常用属性:

background属性

background-color

background-image

background-repeat

    <div style="background-color: red">hello world</div>　　　　　　　　　　　　#设置背景颜色
    <div style="background-image:url('image/4.gif'); height: 80px;"></div>　　#设置背景图片属性，div特别大，图片特别小时图片叠加
    <div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>　　#不要重复

background-position(背景位移)

height:31px;				#挖洞的高和宽
width:26px;
background-position  #移动图片位置

border(边框)属性：

solid 表示实线，边框颜色是红色

dotted表示虚线

<body>
<h2>border</h2>
<div style="border: 20px solid red;height: 10px"></div>
<div style="border: 2px dotted red;height: 10px"></div>
</body>

dispaly属性：

隐藏或显示样式或字体

块级标签和内联标签是可以相互转换的

display:none 隐藏不显示

display:block display设置为block时由内联标签变为块级标签

display:inline display设置为inline时由块级标签变为内联标签

<span style="background-color: red">asdf</span>
<span style="display: none;">asdf</span>

cursor属性：

鼠标放在不同位置显示不同的图标

<body>
<ul>
    <li>css提供的cursor值</li>
    <p>
        <span style="cursor:pointer;">pointer</span>
        ||
        <span style="cursor:help;">help</span>
        ||
        <span style="cursor:wait;">wait</span>
        ||
        <span style="cursor:move;">move</span>
        ||
        <span style="cursor:crosshair;">crosshair</span>
    </p>
</ul>
</body>

float(浮动)　

页面的布局，通过设置float属性来布局页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .w-letf{
            width:20%;                  <!--宽度-->
            background-color: red;      <!--背景-->
            height:500px;               <!--高度-->
            float: left;                <!--向左漂移-->
        }
        .w-right{
            width: 80%;
            background-color: green;
            height: 500px;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="w-letf"></div>
    <div class="w-right"></div>
</div>
</body>
</html>

<div style="background-color: red;">
    <div style="float: left;">1111</div>
    <div style="float: left;">2222</div>
    <div style="clear: both;"></div>            #加上词句为强制显示父标签，不然上面两个子div float后父div背景颜色就被冲掉了

</div>

显示父标签样式

内外边距

padding(内边距)：增加自己本身的高度和宽度

<div style="background-color: green;height: 200px ">
       <div style="background-color: red;height: 50px;padding-top: 20px"></div>
       
    </div>

margin(外边距)：外面增加高度和宽度

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

        <div style="background-color: red;height: 50px;margin-top: 20px"></div>
    </div>

margin:0 auto; -->想让页面居中，加上此参数即可

position 位置固定：

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

fixed - 固定浏览器窗口位置

<body>
 <a style="position: fixed;left: 30px;top: 30px;">返回顶部</a>
    <div id="content" style="height: 2000px;background-color: greenyellow"></div>

    <a style="position: fixed;right: 30px;bottom: 30px;"href="#content">返回顶部</a>
</body>

relative
absolute　　(默认放在浏览器的)右下角
这两个放在一起用

<body>
    <div style="position: relative;background-color: beige;width: 300px;margin: 0 auto;height: 300px">
        <h1>修改数据</h1>
        <a style="position: absolute;right: 0;bottom: 0px;">hello</a>
    </div>
    
</body>

overflow
　　　　auto 　　　--当内容超出div大小时，设置为overflow:auto会出现滚动条.
　　　　hidden 　　--隐藏，当内容超过div大小时，多出的内容将被隐藏

<div style="height: 100px;background-color: greenyellow;overflow: auto">
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>

</div>

<div style="height: 100px;background-color: greenyellow;overflow: hidden">
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>

</div>

不让页面有边距方法；
想让整个页面无边框，给body加上样式即可

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div style="height: 100px;background-color: greenyellow;overflow: hidden">
    hello world<br>
    hello world<br>
    hello world<br>
    hello world<br>
</div>

</body>

透明度 opacity
z-index
z-index 值越大越靠近显示，值越小越靠近底层

<body>
hello html/css/js
<div style="height: 2000px;"></div>
<input type="button" value="提交数据"/>
<div style="z-index: 1;opacity: 0.5;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black"></div>
<div style="z-index: 2;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px">
    <div style="background-color: white;width: 300px;height: 100px;">
        <input/>
        <input/>
        <input/>
    </div>
    </div>
</body>

页面布局代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
           body{
            margin: 0 auto;
        }
        .pg-header{
            background-color: darkslateblue;
            height: 48px;

        }
        .pg-body .menu{
            background-color: cornflowerblue;
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            overflow: auto;

        }
        .pg-body .content{
            background-color: chartreuse;
            position: absolute;
            right: 0;
            top: 50px;
            bottom: 0;
            left: 210px;
            overflow: auto;
        }


    </style>
</head>
<body>
<div class="pg-header">页面布局</div>
    <div class="pg-body">
        <div class="menu">
            <a>123</a>
            <a>123</a>
            <a>123</a>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
        </div>
        <div class="content">
            abcd
            <div style="height: 1000px;">
                <h1 style="color: #FF6600">fdafdaf</h1>
            </div>
        </div>
    </div>

</body>
</html>

posted @ 2016-01-26 18:06 梦徒阅读(329) 评论(0) 编辑收藏举报

刷新页面返回顶部

梦徒

CSS 简介

CSS 简介

需要具备的基础知识

CSS 概述

margin:0 auto; -->想让页面居中，加上此参数即可

position 位置固定：

公告