CSS 简介详解编程语言

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   !--让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 hello world /div !--引用css样式中的a2属性 -- 

 span goodbye 

 /body 

css选择器：

1.标签选择器

div{ 

 background-color:red; 

 div /div 

2.class选择器

.bd{ 

 background-color:red; 

 div /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 

 input type="text"/ 

 input type="password"/ 

 /div 

 /body 

CSS常用属性:

background属性

background-color

background-image

background-repeat

 div 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 /div 

 div /div 

 /body 

dispaly属性：

隐藏或显示样式或字体

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

display:none  隐藏不显示

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

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

 span asdf 

 span asdf 

cursor属性：

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

 body 

 li css提供的cursor值 /li 

 span pointer 

 span help 

 span wait 

 span move 

 span crosshair 

 /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 /div 

 div /div 

 /div 

 /body 

 /html 


 


  


 div 

 div 1111 /div 

 div 2222 /div 

 div /div #加上词句为强制显示父标签，不然上面两个子div float后父div背景颜色就被冲掉了 

 /div 

 显示父标签样式
内外边距

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

 div 

 div /div 

 /div 

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

 div 

 div /div 

 /div 



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

position 位置固定：

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

fixed   固定浏览器窗口位置 

 body 

 a 返回顶部 /a 

 div id="content" /div 

 a href="#content" 返回顶部 /a 

 /body 



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

 body 

 div 

 h1 修改数据 /h1 

 a hello /a 

 /div 

 /body 



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

 div 

 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