小白的css笔记（一）

来源：互联网发布：玻璃厂加工中心编程编辑：程序博客网时间：2024/06/05 07:27

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

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

· XHTML元素必须被关闭。即必须使用类似</p>的结束标签；

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

· XHTML文档必须拥有根元素。所有的XHTML元素必须嵌套在html根元素中，即满足<html><head></head><body></body></html>这样的标签；

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

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

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

1. 浏览器缺省设置

2. 外部样式表（直接将link标签写在<head></head>标签内）

3. 内部样式表（用<style></style>标签写在<head>标签内）

4. 内联样式（在 HTML元素内部）

***外部样式表：

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

以.css为拓展名，在<head>中使用<link>标签将外部css样式表文件链接到HTML文件中。

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

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

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

***内部样式表

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

<head>

<style type="text/css">    h1{color:red}  </style>

</head>

***内联样式表

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

<p style="font-family:宋体; font-size:12px; color:#CCCCCC;">这就是内联样式的编写方法</p>

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选择器

***引伸注解：<li>标签是列表项目的定义；<ol></ol>标签代表有序列表，产生的界面列表项目前自动加上1、2、3、，<ul></ul>标签是无序列表，列表项目前黑点提示。

（1）派生选择器

li strong {   font-style:italic;   font-family:normal;}

上述代码的意义为列表中strong标签内的字体相应的样式。在列表下的，<strong>标签内的，类似这样的一种关系就叫做派生。eg：妈妈的儿子，中国的云南。

（2）id选择器#######

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

#sidebar{

    color:red;}

<p id="sidebar">我想用id为sidebar的样式</p>

id属性规定元素的唯一的id,id在HTML文档必须是唯一的。即每种标签的id值只能有一种，否则就产生冲突了。错误实例eg：<h1 id="head" id="foot">这样就是错误的。

因此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 或者 <td class="fancy">.

（4）属性选择器【】中括号

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

[title]{   color:red;}

也可以设置属性和值选择器，如下：

[title=sidebar]{    color:green;}

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

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

<h2 title="hello world">Hello world</h2>选中

<p title="student hello">Hello W3School students!</h1>选中

0 0