CSS学习笔记(1)

ゝ一世哀愁。 2022-08-07 16:46 218阅读 0赞

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">

</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\{属性：值\}

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

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

样式。

如：\#main\{属性：值\}

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

\*类名或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、层叠

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

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

CSS学习笔记(1)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS学习笔记

相关 CSS学习笔记

相关【CSS】学习笔记1 使用CSS样式表

相关 CSS学习笔记

相关 CSS学习笔记(1)

相关 css学习笔记

相关 CSS学习笔记

相关 CSS学习笔记1

相关 CSS学习笔记1-CSS属性

相关 CSS学习笔记