小白的css笔记(一)

1、先解释一波htmlXHTML的区别(不用在听到这个名字的时候被吓一大跳)通过严格的编码HTML就可以符合XHTML的要求

· XHTML元素必须被正确地嵌套。标签应该成对的从内向外;

· XHTML元素必须被关闭。即必须使用类似

的结束标签;

· 标签名必须用小写字母。因为XHTML要求标签和属性对大小写敏感,可以从写html就养成这个好习惯;

· XHTML文档必须拥有根元素。所有的XHTML元素必须嵌套在html根元素中,即满足这样的标签;

 

2css层叠样式表(cascading style sheets)

    如果说网页分为结构、表现、行为三部分的话,html就是结构,css就是网页的布局表现。

   css中样式表定义如何显示html元素,不同类型的样式表可以相互层叠,其中内联样式具有最高的优先权(意思就是当标签或者属性的内容同时被几种样式表定义时,以内联样式为准)。

1. 浏览器缺省设置

2. 外部样式表(直接将link标签写在标签内)

3. 内部样式表(用标签写在标签内

4. 内联样式(在 HTML元素内部)     

 

 ***外部样式表:

  相对优势大,独立于HTML文件,可同时被多个文件引用,只需下载一次样式表,浏览器会先显示html内容再根据样式表对页面渲染,加载更快。

      .css为拓展名,在中使用标签将外部css样式表文件链接到HTML文件中。

  其中标签定义文档与外部资源的关系,最常见的就是链接样式表;link没有结束标签,且必须被正确关闭。link是空元素,仅包含属性,hreftyperel比较主要。

其中href表示被链接文档的位置,用的时候填写文档的URL或者本地文档的具体路径;rel表示被链接文档与当前文档的关系,此时被链接文档是样式表;type是规定被链接文档的MIME类型,(注:MIME是一种协议,Multipurpose Internet Mail Extentions,即用于当被链接的文档被浏览器打开时,浏览器可以自动选择用什么应用程序或者插件来打开该文档。 )


***内部样式表

    将type写入style标签的属性中,整体的位置是放在标签内部。.此处的type属性同上文。


***内联样式表

即将css样式表写在xhtml标签内部,由style属性支持,只需将css代码分号分隔开输入在style中就可以完成定义。

这就是内联样式的编写方法



3、CSS语法

主要是两部分组成,选择器和声明,

selector {declaration1;  declaration2;  declaration3;......declarationN;}

选择器是需要改变样式的html元素,声明是由属性和值构成的,用分号隔开,总体用花括号包围起来。

CSS 语法(图片摘自网络)

其中值可以用英文单词,十六进制,十六进制的缩写,以及rgb百分数表示。(注:rgb是一种色彩模式,通过调节红绿蓝三种通道的颜色来获取任何一种想要的颜色,每种色彩用百分数来表示,eg:红色RGB(100%,0%,0%))。

***由于与html混合在一起,所以尽量大小写敏感。

***可以对选择器进行分组,这样可以使html元素共享声明。

h1,h2.h3,h4,h5{
   color: Red;
}
***子元素可以继承父元素的样式,若有些浏览器无法理解继承,我们可以选择用组选择器对需要样式的元素全部进行声明。

4、CSS选择器

***引伸注解:

  • 标签是列表项目的定义;
      标签代表有序列表,产生的界面列表项目前自动加上1、2、3、,
        标签是无序列表,列表项目前黑点提示。

        (1)派生选择器

        li strong {
           font-style:italic;
           font-family:normal;
        }
        上述代码的意义为列表中strong标签内的字体相应的样式。在列表下的,标签内的,类似这样的一种关系就叫做派生。eg:妈妈的儿子,中国的云南。

         (2)id选择器#######

              可以为标有特定id的HTML元素指定特定的样式,id选择器用#来定义。

        #sidebar{   
            color:red;
        }

         id属性规定元素的唯一的id,id在HTML文档必须是唯一的。即每种标签的id值只能有一种,否则就产生冲突了。错误实例eg:

        这样就是错误的。

        因此id选择器常常用于建立派生选择器

        即使被标注为sidebar的元素只能在文档中出现一次,但是这个id选择器作为派生选择器可以被使用很多次

        #sidebar p {
        	font-style: italic;
        	text-align: right;
        	margin-top: 0.5em;
        	}
        上面的样式只会应用于id是sidebar元素的段落内,p是段落。单独的id选择器也可以发挥作用。

        (3)类选择器......(点)

        类选择器用一个点号表示,类名的第一个字符不能用数字!

        .center{text-align:center}
        class属性规定元素的类名,与id选择器不同的是,一个HTML元素可以拥有多个类,从而合并多个类中的样式。


        ****同样,类选择器也可以作为派生选择器。

        .fancy td {
        	color: #f60;
        	background: #666;
        	}
        也可以写成td.fancy  或者 .

        (4)属性选择器【】中括号

        可以为拥有指定属性的html元素设置样式,而不仅限于class和id属性。

        [title]
        {
           color:red;
        }
        也可以设置属性和值选择器,如下:

        [title=sidebar]{
            color:green;
        }

        还可以选择属性和近似的值选择器,即属性的值中包含该值的都可以被选中。

        [title~=hello]
        {
           color:red;
        }

        Hello world

        选中

        Hello W3School students!选中




      • 你可能感兴趣的:(前端)