CSS学习笔记(1)

1、"DIV+CSS"这种叫法其实是一种不准确的叫法,是大家开始在对这种技术理解不透彻的情况下,给这种布局标准页面的方法

起的名字,而标准的叫法是什么呢? XHTML+CSS!

2、平时说的W3C其实是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟,W3C这个组织是做什么的呢?

简单说,就是出网页标准的,那么由W3C组织推出的标准就被称为W3C标准或Web标准。

3、什么是Web标准?

      Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合,包含我们所熟悉的HTML、XHTML、

JavaScript、以及CSS等

4、Web标准的目的?

      在于创建一个统一的用于Web表现层的技术标准,以便于通过不同浏览器或终端设备向最终用户展示信息内容。

5、采用标准好处:

      a、提高页面浏览速度。使用CSS方法,比传统的Web设计方法至少节约50%以上的文件尺寸;

      b、缩短改版时间,将表现(样式/外观)与内容(信息/数据)相分离。只要简单的修改几个CSS文件就可以重新设计一个有成

           千上万页面的站点;

c、降低网站流量的费用,带宽要求降低(代码更简洁),成本降低;

d、更容易被搜寻引擎搜索到,提高网站在百度或Google中的排名。

e、内容能被更广泛的设备所访问,包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等。

6、Web标准主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

         结构标准对应的主要语言是XHTL

         表现标准对应的主要语言是CSS

         行为标准对应的主要语言是JavaScript

     制作成一个静态页面,主要用到的就是XHTML与CSS,所以制作标准页面的技术就是XHTML+CSS

7、web标准的好处之一是"理解表现和内容分离"---那这到底是什么意思呢?

     首先必须明白一些基本概念:内容、结构、表现和行为

           a、内容:就是制作者放在页面内真正想要让访问者浏览的信息;

           b、结构:使内容更加具有逻辑性和易用性[类似于:1级2级标题、正文、列表等把它们称为结构];

           c、表现:用于修饰内容的外观的样式的东西称为表现;

           d、行为:对内容的交互及操作效果,如通过JavaScript判断表单提交等。

8、网页开发的小工具----火狐浏览器中的firebug(工具—附加组件—搜索firebug—安装)。

9、做为Web前段工作要兼容的浏览器:IE/6/7/8/9/,火狐,谷歌,苹果等

10、CSS简介

      概念:CSS是Cascading Style Sheets(层叠样式表)的简称。

      CSS可以做为html,xhtml,xml的样式控制语言。

11、CSS语法结构

      选择符{属性:值}例如:body{font-size:12px;}

      参数说明:

            a、选择符(selector):指明这组样式所要针对的对象。可以是一个XHTML标签,如body,h1;也可以是定义了特定的

                 ID或Class的标签,如#main选择符表示选择<div id="main">,即一个被指定了main为id的对象。

            b、属性(proprety):选择符的样式属性,如颜色、大小、定位、浮动方式等。

            c、值(value):是指属性的值。

            d、同时可以为一个选择符定义多个属性,每个属性之间用分号";" 分隔。

12、网页是否有CSS样式,测试--在浏览器中改变字体大小,看结果。

13、CSS定义的技巧

      a、为了将来的CSS代码优化,建议所有属性值后面都要带上分号";"。

      b、某些html标签有自己默认的CSS属性值,例如:h1标签就有自己的属性值,自动加粗显示,字号比较大。

      c、为了兼容主流的浏览器,为了统一效果建议我们在设置时,将所有元素的CSS属性,重置为标准的。

      d、不同的浏览器,有各自不同的CSS属性值---要命的,就是浏览器的兼容。

      e、就有一个比较特殊的字体想用,怎么办?--将其转为图片。

           分中英文字体。设置字体的顺序。将英文字体设置在前,中文在后。

      f、想让文字在垂直方向上居中,将行高设置为元素高度,行高=元素高度,

          文字的内容不能超过元素的宽度,也就是不能换行。

      g、CSS可以重新设置,xhtml标签默认样式。

14、CSS控制字体

             功能                        语法

            设置字号                  font-size:12px

            设置字色                  color:#00000

            设置字体                  font-family:Arial,‘宋体‘

            设置行高                  line-height:150%        line-height:1.5em

            设置字体的粗细        font-weight:normal[正常]bold[粗体]

      CSS长度单位

            相对长度单位       说明

            em                        相对于当前对象内文本的字体尺寸

            px                         像素(Pixel)推荐使用

            in                          英寸

            cm                        厘米

            mm                      毫米

            pt                         点(Point)

      CSS颜色单位

            颜色单位              说明

            十六进制              如:color:#ff0000

            颜色名称              如:color:red

            三原色单位          如:rgb(255,0,)

      一般最常用的是十六进制,三原色单位的原理【红 (r),绿(g),蓝(b)】混合而成,每个值域在0—255之间。

15、CSS字体使用注意事项,要尽量使用通用宋体,用大家电脑上都有的字体。

16、网页中加CSS的方式有4种:

      a、内联式样式表:直接写在现有的标记中如:<p style="color:red">这里文字是红的</p>

      b、嵌入式样式表:使用"<style></style>"标签嵌入到html文件的头部中<head>标记内,  

            如:<style type="text/css">

                         <!--body {background:white;color:black;} -->

                   </style>

      c、外部链接式样式表:将样式表写在一个独立的 .css文件中,然后在页面head区<head>标记内用<link>标签调用它,主要用

           于实现表现与结构分离

           如:<link href="main.css" rel="stylesheet" type="text/css>

      d、导入式样式表:导入式样式表与链接式样式表的功能基本相同,只是语法和动作方式略有不同,同样也将导入样式代码写

           在<head>标记内。

          语法:<style type="text/css">

                            @import url("basic.css");

                    </style>

      导入式,会占用html文件空间, 有些浏览器,解析会有问题,浏览器会最后读取@import中内容。将多个样式文件,导入到一

个样式文件中。

17、将CSS样式写到一个单独的文件中style.css,要使用的网页,只需要调用即可,这才是我们学习xhtml+css的核心,结构与样

式分离。

18、CSS选择符类型

      a、标签(类型)选择符

            就是针对HTML文档中的标签(哪些html标签应用哪些CSS样式),如:p{font-size:12px;} div{background:blue;}

      b、类型选择符:可以自己定义样式,应用于一个或多个网页元素,类在网页中可以出现多次,用于定义重复的样式。类以英

           文"."开头,后面的名字自己定义,类定义后还需要在网页中加入class-类名称,加以调用。

           如:.warning{属性:值}

                  <p class="waring">   </p>

                 同时给某个元素应用多个类

                  <p class="a1 a2">  </p>

      c、ID选择符:与类基本相似,只是以英文"#"开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的

          样式。

          如:#main{属性:值}

                 <p id="main">  </p>

                同时给某个元素应用多个类与ID

                 <p class="a1 a2" id="a6">  </p>

               *类名或ID名不要以数字开头。

      d、通配选择符:* {属性值},用于定义所有html元素,作用范围广泛,但是效率最低。

            *{nargin:0;padding:0}  重置所有元素的外边距与内边距,为零

      e、包含选择符(嵌套/派生):语法e1  e2 {属性:值},

           含义是所有被e1包含e2,

           如:table  td {属性:值}   #hearder  li  a {属性:值}

                优点就是不需要在单独为id为hearder的标签内,li 标签内的 a 标签单独定义class或者ID,CSS代码就少了、同样也优化

          了CSS代码。

                如果我们针对,某个元素中电子元素进行控制,可以使用嵌套的方式,不必再为子元素设置id,语法:父元素  子元素

          {属性:值}

      f、选择符分组(集体控制):将同样的样式定义用于多个选择符,选择符之间用逗号分隔。如:p,div, .waring {属性:值}

      g、标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符

            h1#content{} 白哦是针对所有id为content的h1标签

            h1.p1{} 表示针对所有class为p1的h1标签

      h、组合选择符:将以上选择符进行组合使用

            h1.p1,#content  h1{}

     CSS选择符作用?指定CSS样式所作用对象(范围)。

19、我们想针对网页中的,某一个元素或者某一些元素,设置样式---可通过不同的CSS选择符。CSS选择符就是要控制的对象。

20、CSS样式的特点

      a、继承

                网页中字元素,将继承父元素的样式(继承某些样式,因为有些子元素本身就有默认值,所以就不用父元素)。

                例如:要控制段落p中的文字大小,可以直接给body标记加样式。

      c、层叠

               网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式。

              后面定义的样式,会覆盖前面蒂尼的样式。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。