CSS与DIV的一些基础知识(1)

  最近突然想学习CSS+DIV了,因为一直在用FLEX开发,以前那些ASP.NET的东西忘的都差不多了。记得当年还是用Table开发的网站呢,呵呵好久了,最近想捡回ASP.NET,所以我从头开始,最先从css+div下手,希望自己能坚持下来吧

一.DIV+CSS布局:就好比人穿衣服,div控制页面的布局,在这里它就是一个人,而css是一种表现,就好比衣服一样,对这个人进行修饰

二.W3C标准:W3C是World Wide Web Consortium的缩写,中文就是万维网联盟,它不是一个标准,而是一些列标准的集合-结构标准(xHtml),表现标准(css),动作标准(JS)

三. Css代码写在哪里,如何控制的,它的四种样式:

      1. 行内样式:就是css代码直接写在标签内,如

 <p style="color:Black;background:#ccc;font-size:larger" title="123" >这是行内样式</p>

     2. 内嵌样式:就是整个css代码写在head标签内

     3. 链接样式:css写在一个外部文件中,在head标签内用link连接到此文件,大多数情况使用这种样式

 <link href="Styletest03.css" rel="stylesheet" type="text/css" />

      4. 导入样式:与连接样式很像,又与区别(不常用)注:一般情况使用第三种链接样式

二.Css选择器

      1.标签选择器,控制所有对应标签的

      2.id选择器,’#’

      3.类选择器,’.’

      4.通用选择器,’*’

p
{
/*这是标签选择器,针对所有P标签都应用此样式*/
color
:White;
background-color
:Red;
font-size
:12px;
}

#one
{
/*这就是id选择器,只为对应id是one的标签进行样式表现,注意使用#号*/
color
:Green;
background-color
:White;
font-size
:20px;
}

.classOne
{
/*这是类选择器,所有标签class=classOne的标签都具有此属性,并且,一个标签可以有多个类选择器的值,中间用空格分开*/
color
:White;
Background-color
:Blue;
font-size
:15px;
}

*
{
/*这是通用选择器,对html页面中的所有标签都应用样式,用*号标注*/
margin
:5;
padding
:0;
}

三.Css两种优化方式

      1.选择器的集体声明

body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

      2.选择器的嵌套声明

#div1 p a{color:red;}/*意思是在ID为div1内癿p标签内癿链接a标签癿文字

四.Css选择器的命名 常用的有三种命名法

      1. 骆驼命名:第一个单词小写,从第二个单词开始,首字母大写,如:headerBlock

      2. 帕斯卡命名:每个单词的首字母都大写,如:HeaderBlock

      3. 匈牙利命名:就是在前面加前缀,使名称容易理解,如:head_navigation

  五.盒子模型:(content,border,padding,margin)

   Css中的盒子模型和现实中的盒子一样 content(内容):表示盒子中放物品的区域空间 border(边框):就是盒子的边框 padding(内边距):就是盒中物品与盒子之间的距离(因为放在盒子中的东西不可能完全和盒子大小一样,那样也放不进去吧) margin(外边距):假如存在多个盒子,盒子和盒子之间的边距就是这个

  六.Css元素

     1.内联元素 可同行,宽度高度无效 ,比如p

     2.块状元素:不可同行,宽度高度有效,比如div

 以上为一些最基础的知识,我是看-2天驾驭DIV+CSS(全新发布2.0.2版本)这本教材学的呵呵

原文地址:https://www.cnblogs.com/80hou/p/2030380.html