CSS 简介详解编程语言

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 
 
</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 style="display: none;">asdf

cursor属性：

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

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

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/11685.html