从零开始学习前端开发 — 2、CSS基础

新澳门萄京娱乐场官网 1

最近一直忙于新岗位上的工作,有段时间没写博客啦,今天抽点时间写出来分享下咯。^_^

一、CSS简介

近期主要负责公司的WAP项目,碰到了不少的疑问,所以要提醒下大家啦,做一个项目之前不能急于动手,先要分析下网站的布局还有看一些跟项目有关的总结文章,把一些需要注意的细节地方,用笔记本记下来。我只想说:前期工作不做好,后期你就等着被折腾吧~~

 1.CSS是什么

现在的WAP一般都会分为触屏版和标准版,对于触屏版本,大家都会知道用到html5+css3来重构,减少很多图片的处理,还有就是宽度自适应的问题等等,其实今天我主要是谈下标准版本的,至于触屏版先一笔带多了,以后会出此类文章。

CSS是Cascading Style
Sheets的简称,中文称为层叠样式表。特点:实现了表现与结构相分离 

先前在腾讯MXD上看到一篇WAP网站的文章,写得不错,关于平时WAP重构需注意的问题,结合那边文章自己也总结了下:

2.css基础语法

在WAP标准版里,语义化的标签,和图片合并技术,现阶段不是很适合应用在手机网站上,因修饰图片不是很多,我们更多的是用单个图一般片来处理好些。其他问题主要分为一下几方面:

css是由选择符和声明两大部分组成,声明由属性和值组成。

一、盒模型

语法: 选择符{
        属性:值;
        属性:值;
      }

推荐文章:CSS盒模型的定义>>

注: (1)属性和值用冒号连接    (2) 一条声明结束要添加分号    (3)属性和属性不分先后顺序

尽量不要为页面的元素指定高度;

3、样式表的创建

UCWeb和GO浏览器不支持宽度,自动100%显示页面;

1.内联样式(行间样式,行内样式)

UCWeb不支持左右边框,支持上下边框。

语法:<标记 style=”属性:值;”></标记>

页面使用100%宽度,兼容性最佳;

eg:  <h1 style=”color:red;”>内联样式</h1> 

UCweb和GO浏览器不支持宽度,100%显示页面。

2.内部样式(嵌入式样式)

S60平台最为普遍的宽度为240px和320px,所以如果你要为页面指定一个宽度,只有一个选择:240px

语法: 

UCweb和GO浏览器不支持宽度,100%显示页面。

<head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
</head>

二、颜色,背景和字体

注:一般将style标签放置在head部分

必须要显示的图案,不要用背景图,直接使用标签;

3.外部样式

避免同时出现多种文字大小,部分浏览器的字体大小是由用户设置的;

(a)首先需要创建一个外部css文件(后缀名为.css)

不要过分纠结于粗体和斜体,这取决于手机自带字体的特性。

    使用link标签引入css文件

为每一个有背景图的元素添加背景色;

    语法: <link rel=”stylesheet” type=”text/css”
href=”css文件路径”/>

背景色和文字颜色组合使用,也能产生很好的视觉效果;

  eg:

UCWeb和GO浏览器不支持宽度,自动100%宽度显示页面。

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

如果你的页面使用的是100%的宽度,背景图最好使用可以平铺或重复的图片。

 

三、文本处理

   
注:
rel(relationship的简称)用来设置当前文件和引入的文件之间的关系

设计时尽量避免左对齐之外的对齐方式;

(b)使用@import的方式引入css文件(import方式现使用较少,老程序员的代码可能会出现如此写法)

部分浏览器链接的下划线是否出现不可控,取决于用户的设置;

    语法: @import “css文件路径”;

字间距和文本缩进,尽量避免使用。

  eg:

合理的使用行高让页面的可读性更好;不支持指定行高的浏览器也有默认的行高。

<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

UCWeb支持文本居中;但不支持右对齐。

  

四、选择符与伪类

注:link和@import引入外部样式的区别:

大部分浏览器不支持定义已访问连接的颜色,设计时请注意链接的背景色不要与该浏览器默认已访问的连接色接近;

(1)link属于html标签,除了可以引入css文件外还可以引入其他文件,@import属于css范畴,只能引入css文件(老祖宗的区别)

连接的颜色可以指定,连接是否带下划线取决于浏览器的设置。

(2)link加载的css文件和页面同时加载,@import引入css文件在页面加载完成后载入(加载顺序的区别)

合理的使用全局选择符;提升效率;

(3)link是html标签,所有浏览器都支持,@import低版本浏览器不支持(浏览器支持的区别)

class和id选择符是可以放心使用的。

(4)link支持js改变DOM样式,@import不支持(对js支持的区别)

可以通过选择符支持的差异,来为不同的浏览器实现不同的效果

 

五、其他

4、样式表的优先级

说明下:position:fixed在手机里面兼容性不是很好,尤其是在UC里面,如果要求比较高的话,老老实实用JS写吧

在没有出现!important的时候,采取就近原则(离被设置的元素越近,优先级越高)

六、各大门户WAP2.0版使用的DTD与标签

内联样式>内部样式>外部样式

这个东西仅供我们参考下

当出现!important的时候,它的优先级最高

尽量避免使用table

!important>内联样式>内部样式>外部样式

推荐使用文档类型为:xhtmmobileprofile1.0或1.1

5、css注释

推荐使用的标签包括:div,p,span,ul,li,br,img等

语法:
/*注释内容*/(********注意区分CSS注释和html注释,出错难以发现*******)


 二、css选择器

 

基本选择器


1.id选择器

语法: <标记
id=”***”></标记>

      #id名{属性:属性值;}

  eg: <h1
id=”test”>测试数据</h1>

   #test{color:red;}

注:a)id名是唯一的,不能出现同名的id    b)
id选择器的优先级最高    c)
id名要语义化命名(下划线连接法,驼峰命名法)

2.class选择器(类选择器)

语法:<标记
class=”***”></标记>

    .类名{属性:属性值;}

eg: <a href=”#”
class=”nav”>新闻资讯</a>

  .nav{color:red;}

注:a)可以给具有相同样式的元素添加同一个class名    b)类选择器的优先级仅次于id选择器

注:还可以使用类名词列表的方式设置样式

  语法: <a href=”#” class=”nav
news”>新闻资讯</a>

      .news{color:pink;}

3.标签选择器(类型选择符,元素选择符)

语法:标记名称{属性:属性值;}

eg: a{text-decoration:none;}

注:1)如果想改变某个元素的默认样式时,可以使用类型选择符;

  2)当统一文档某个元素的显示效果时,可以使用类型选择符;

4.通用选择器(通配符)

语法:*{属性:属性值;}

常用写法: *{margin:0; padding:0;}

注:*匹配html根元素下的所有标签元素

组合选择器


 5.群组选择器(多元素选择器)

语法:
选择符1,选择符2,选择符3{属性:属性值;}

eg: .box,.uls,p{color:black;}

6.后代选择器(包含选择器)

语法:选择符1
选择符2{属性:属性值;}

eg: 

 div p {color: yellow;}


<div>
    <p>xxxxxx</p>
    <div>
        <p>xxxx</p>
    </div>
</div>

 注:a)选择符1和选择符2必须是包含与被包含关系

7.子元素选择器

语法:父标签>字标签{属性:属性值}

eg:

div > p {color: yellow;}

<div>
    <p>xxxxxxx</p>
    <p>xxxxxxx</p>
</div>

注:匹配所有div标签里嵌套的子P标签,之间用>分隔。

8.毗邻元素选择器

语法:选择器+毗邻选择器{属性:属性值}

eg:

div + p {color: yellow;}

<div>xxxx</div>
<p>xxxxx</p>

注: 匹配所有紧随div标签之后的同级标签P,之间用+分隔(只能匹配一个)。

属性选择器


7.属性选择器:

注释:只有在规定了 !DOCTYPE 时,IE7 和
IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

 

1.属性选择器

新澳门萄京娱乐场官网, 

  设置所有具有title属性的标签元素;

<style type="text/css">
[title]
{
color:red;
}
</style>

<h2 title="Hello world">Hello world</h2>
<a title="a1" href="http://xxxx.com.cn">某某某网址</a>

2.属性和值选择器

下面的例子为 title=”xxx”
的所有元素设置样式:

 

<style type="text/css">
[title=use]
{
border:5px solid blue;
}
</style>


<h1>可以应用样式:</h1>
<img title="use" src="/i/w3school_logo_white.gif" />
<br />
<a title="use" href="http://xxxxx.com.cn">某某某网址</a>
<hr />

<h1>无法应用样式:</h1>
<p title="unuse">Hi!</p>
<a class="W3School" href="http://xxxx.com.cn">某某某网址</a>

3.属性和值选择器 – 多个值

下面的例子为包含指定值的 title
属性的所有元素设置样式。适用于由空格分隔的属性值

<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>

<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello  students!</h1>
<hr />

<h1>无法应用样式:</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello students!</p>

下面的例子为带有包含指定值的 lang
属性的所有元素设置样式。适用于由连字符分隔的属性值:

<style type="text/css">
[lang|=en]
{
color:red;
}
</style>

<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式:</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>

新澳门萄京娱乐场官网 1

 

伪类选择器


 8.伪类选择器

语法:
选择符:hover{属性:属性值;}

(1)超链接a的四个状态

a) a:link
链接没有被访问过时的状态(超链接的初始状态)

b) a:visited 链接被访问过后的状态

c) a:hover 鼠标滑过时的状态

d) a:active 鼠标按下时的状态

记忆方法:爱恨原则

L o
V e H
A t e

注:为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;

eg: a{color:red;}
a:hover{color:green;}

注:除了可以给a添加滑过状态,还可以给其他元素添加滑过状态

eg: .uls li:hover a{color:red;}

当滑过li时,li中的a字体颜色变为红色

(2) before、after

P:before 在每个<p>元素的内容之前插入内容;

P:after 在每个<p>元素的内容之后插入内容。

eg:

 p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }

<p>测试数据</p>  

css选择器权重


 将css选择器的权重分为四个等级:

第一等:内联样式 style=”…”
权重:1000

第二等:id选择器 权重:100

第三等:类选择器,伪类选择器,属性选择器
权重:10

第四等:标签选择器(类型选择符),伪元素选择器
权重:1

后代选择器权重:所有选择器权重之和

群组选择器权重:选择器自身的权重

当权重相同时,后写的样式会覆盖先写样式

扩展:

css层叠的概念(含义)

层叠指的是样式的优先级,当产生冲突时以优先级高的为准

1.
内联样式>内部样式>外部样式(除非使用!important标记 )

2.
id选择器>类选择器>元素选择器

  1. 权重相同时取后面定义的样式

 

三、CSS核心属性

 

1.、字体类属性

 

1.1.字体类型语法:
font-family:
字体1,字体2,字体3;

常用写法:body{font-family:”微软雅黑”,Arial;}

注:a)多个字体之间用逗号分隔

b)
中文字体要加双引号,英文字体由多个单词组成也要加双引号

c)
浏览器会优先识别字体1,如果找不到,识别字体2,如果都找不到,采用浏览器默认字体

1.2.字体大小语法: font-size:数值+单位;

eg: font-size:12px;

注:a)浏览器默认字体大小为16px;

  b)字体单位常用的有px,em,rem,pt;

  c) 字体一般设置偶数不设置奇数

  d) font-size:medium; 等价于
font-size:16px;

1.3.字体加粗语法:font-weight:normal(常规字体)|
bold(加粗)|bolder(加粗)| 100-900;

注:100-500为常规字体,600-900为加粗字体

eg: h1{font-weight:normal;}

1.4.字体倾斜语法:font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

eg: p{font-style:italic;}

1.5.小型大写字母字体语法:
font-variant:
normal(常规字体)|small-caps(小型大写字母字体);

注:只对英文起作用

1.6.font复合写法语法: font:style weight size
family;

eg: font:oblique bold 12px “宋体”;

注:a)font-size和font-family不可以互换位置

  b)
font-size和font-family必须放在最后,不可以和其他属性互换位置

  eg: font:12px/1.5 “微软雅黑”;

  上述写法代表字体大小为12px,行高为字体大小的1.5倍即18px,字体类型为微软雅黑;

1.7.字体颜色语法:color:颜色值;

注:颜色值的三种写法:

a)十六进制写法 #000(黑色) #fff(白色)
#f00(红色) (项目开发中常用的写法)

b) rgb模式 rgb(0,0,0) 黑色
rgb(255,255,255) 白色 rgb(255,0,0) 红色

c) 颜色单词 red(红色) green(绿色)
blue(蓝色) yellow(黄色) black(黑色) white(白色) gray(灰色)

eg: color:#000; color:rgb(0,0,0);
color:black;

 

2、文本类属性

 

2.1.文本水平对齐方式语法:text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);

注:a)justify两端对齐只对英文起作用

b)
设置文本内容在父元素中的水平对齐方式,text-align给父元素加

2.2.行高语法: line-height:数值+单位;

注:a)当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直居中

  b) line-height不允许设置负值

  c)当line-height只写数值不加单位时,代表倍行高,即按照字体大小的倍数设置行高

2.3.文本修饰语法:text-decoration:none|underline(下划线)|overline(上划线)|line-through(删除线);

eg:a{text-decoration:none;}
去掉超链接下划线

2.4.首行缩进语法:text-indent:数值+单位;

eg: text-indent:32px;

注:text-indent设置正值向后缩进,负值向前缩进

2.5.字符间距语法:
letter-spacing:
数值+单位;

注:主要用来设置字与字,字母与字母之间的间距

letter-spacing允许设置负值

2.6.词间距语法: word-spacing:数值+单位;

注:主要用来设置英文单词和单词之间的间距

允许设置负值

2.7.控制文本大小写语法:text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

注:只对英文起作用

2.8.长单词换行语法:word-wrap:normal(默认值)|break-word(长单词换行);

注:在长单词或URL地址内部进行换行

2.9.强制在一行显示语法:white-space:normal(默认值)|nowrap(不换行,强制在一行显示);

2.10.文本流控制语法:layout-flow:horizontal(从左到右)/vertical-ideographic(从上到下);

2.11.垂直对齐方式语法:vertical-align:baseline(基线对齐)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);

注:vertical-align主要应用在两个方面:

    a)用来设置表格单元格内容的对齐方式

    b)
设置行内元素的基线相对于该元素所在行的基线的垂直对齐

 

3、列表类属性

 

3.1.列表符号样式语法:
list-style-type:
disc(实心圆)|circle(空心圆)|square(方块)|decimal(数字)|none(去掉列表符号样式);

3.2.使用图片作为列表符号语法:list-style-image:url(图片路径);

3.3.列表符号位置语法:list-style-position:outside(外边)|inside(里边);

3.4.去掉列表符号样式语法:list-style:none;

常用写法: ol,ul{list-style:none;}

li{list-style:none;}

 

4、背景类属性

 

4.1.背景色语法:background-color:颜色值;

eg: background-color:blue;

4.2.背景图片语法:background-image:url(图片路径);

eg: background-image:url(1.jpg);

4.3.背景平铺属性语法:background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.4.背景图位置语法:background-position:left|center|right|数值
top|center|bottom|数值;

eg: background-position:right
bottom;

注:a)background-position的属性值中,第一个值代表水平方向,第二个值代表垂直方向

  b)当设置数值时,水平方向向右为正,向左为负,垂直方向向下为正,向上为负

  c)
当水平方向和垂直方向都为center,可以省略第二个值

4.5.background属性复合写法(简写方式)语法:
background:
背景色
背景图 背景平铺属性 背景图位置;

eg: background:#f00 url(1.jpg) no-repeat
right bottom;

4.6.背景图的显示原则

a)当容器尺寸等于背景图尺寸时,背景图恰好显示在容器中

b)
当背景图尺寸小于容器尺寸时,背景图默认平铺,直至铺满整个容器

c)
当背景图尺寸大于容器尺寸时,只能显示容器范围以内的背景图

4.7.背景图固定语法: background-attachment:scroll(滚动)|fixed(固定);

注:主要用来设置当出现滚动条时,背景图固定不跟随滚动条滚动

4.8.网页上常见的三种图片格式

a)jpg格式:有损压缩格式,适用于颜色丰富的图像

b)
gif格式:有损压缩格式,支持动画,支持透明

c) png格式:有损压缩格式,支持透明

 

5、浮动属性

**浮动属性语法:
float:**none(默认值,不浮动)|left(左浮动)|right(右浮动);

 

6、清除浮动语法:clear:none|left|right|both;

none:默认值,不清除任何浮动

left: 清除左浮动

right: 清除右浮动

both:清除左浮动和右浮动

注:前面有元素存在左浮动或右浮动,影响到该元素的正常显示,给受影响的元素添加clear属性

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注