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、层叠
网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式。
后面定义的样式,会覆盖前面蒂尼的样式。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。