首页 > 代码库 > #2 CSS入门

#2 CSS入门

2024-07-14 12:06:25   226人阅读

CSS: cascading style sheets(层叠样式表)

css2.0是现在我们教的版本（2013.11月教的）
css3.0是最新的版本
 
推荐一个学习CSS的网站：禅意花园（PS：顶级优秀的网站）
 
 
.dtd 文档类型定义:    这个是用来让一些低级版本的浏览器识别最新技术的命令.
eg:  IE4.0版本的,如果识别最新的ＨＴＭＬ的代码，有加上这个（ＨＴＭＬ代码上面自动生成的这个东西)
浏览器就会自动到网站下载这个东西.然后就可以识别最新的命令
 
charset=UTF-8：   写这个是为了让国外的人们可以看到中文.和显示中文,
国外的浏览器是英文版本的.所以如果没加这个的话,识别的是英文版本的.就会出现乱码....
 
 
CSS的作用:（面试的时候还可以掰几句，所以几下几个作用还是很用必要的。）
1,将内容和格式分离
2,极强的控制页面布局能力
3,做体积更小的,下载更快的,更安全网页
4,可以将许多网页同时更新,更快更容易
5,让不同的浏览器显示相同的界面
 
 
说了这么多CSS的好处，那到底怎么用呢？
 
<head>
     <style type="text/css">
          选择器,选择器{规则:值;..............}
     </style>
</head>
 
 
   CSS分类（左边的内容，右边是例子）
一,内部样式表(针对本页面有效)
1、HTML选择器:
    特点 ,选择器就是HTML元素,好处:简单..
    不足:用了这个以后的那个HTML元素的效果就回不到原来那样.
2、class(类)选择器:
    规则:  .xd{.......}    使用:  <元素 class="xd">xxxx</元素>
    优点:想用就用....
3、id选择器
    #xxx{}          <元素 id="xxx">----------------</元素>

和class的区别:  这个只能使用一次,但是不使用一次也没错,只是不规范而已
    因为这个是潜规则.就像我们看到别人乱丢垃圾.我们鄙视他.（又不能打他一顿）

1,HTML选择器
<head>
  <style type="text/css">
      b {color:"red"; font-size:50px}
   </style>
</head>

2,class选择器
<b class="xd">xxxx</b>

3,id选择器
<b id="xxx">  sssssss</b>
<p id="xxx">ssssss</b>
这样就不好了.因为只能使用一次
二,行内样式表(针对单独元素有效)
<p style="规则:值;......">xxxxxxxxxxx</p>


 
三,外部样式表(针对所有页面有效)
把那个代码写在一个*.css的文件中
写进文件的东西    只有 
b {color:"red"; font-size:50px}
其他的style type="text/css"和其他都不要加,也不能加
使用方法:
<link rel="stylesheet" href="http://www.mamicode.com/xx.css"/>

<link rel="stylesheet" href="http://www.mamicode.com/xx.css"/>
 
 
样式表的有优先级别的问题（就近原则）
 
 类型sizecolor
外部样式表50green
内部样式表60red
行内样式表20pink
元素    最终   size: 20 , color: pink
 
优先级     行内>内部>外部(就近原则)
 
 
=--------============================================================
 
情景选择器:  p  b{ size:12px; }
               这个选择器只有在这样的情况下才有用....
               <p><b>xxxxxxxxxxxxxxx</b></p>
　　　　<p><a><b>xxxxx</b></a></p>   (<p>里面有包含就会起作用)
 
如果只想<p>下面一级的可以用，但是下面两级或多级的不能用怎么办？
其实只要加上一个   >  这个符号就可以了
p>b{ size:12px; }
 
同理:
     p  .xd{}
          <p> <b class="xd"></b></p>
------------------------------------------------------------
     .xd  .xxd{}
          <p class="xd"><b class="xxd"></b></p>
------------------------------------------------------------
     #xd  .xdx{}
          <p id="xd"><b class="xdx"></b></p>
 
 
 
 
 
 
 
 


联系
我们