当前位置: 金莎娱乐场app下载 > 金莎娱乐app > 正文

css是由选择符和声明两大部分组成,今天抽点时

时间:2020-03-07 20:13来源:金莎娱乐app
现在的WAP一般都会分为触屏版和标准版,对于触屏版本,大家都会知道用到html5+css3来重构,减少很多图片的处理,还有就是宽度自适应的问题等等,其实今天我主要是谈下标准版本的,

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

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

css简述CSS,通常称为CSS样式表,是网页的美容师。CSS样式表应用到HTML的三种方式1、内部样式表用styletype=“text/css”/style插入到HTML文件头部说明:内部样式表必须定义在head和/head之间;本页面所有样式都可以写在style和/style之间。2、引用外部样式表前提需要创建一个CSS文件链接方式:在HTML文件头部head/head之间写上代码linkrel=“stylesheet”href=“样式表路径及全称”type=“text/css”/说明:rel=“stylesheet”指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。外部样式表styletype=”text/css”@importurl(样式表路径及全称);/style3、内联样式表语法:标签/标签1三种方式的作用域比较:1、行内样式的作用域是当前标签2、内部样式的作用域是当前文件3、外部样式表的作用域是所有关联的所有文件。三种方式的优先级比较:1、行内式优先级最高2、如果没有行内式,则内部样式和外部样式都可以起作用3、内部样式和外部样式起冲突的话,按照从上到下的书写顺序,按照最下方的起作用CSS选择符CSS语法:选择符{属性:属性值;}选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.1、类型选择符用法:p{color:red}使用HTML标签名称作为选择器,通常用于统一页面上的默认样式122、id选择符语法:#id名{属性:属性值;}说明:Id选择符可对元素进行一个ID名称的指派,id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。在使用ID选择符前我们应先为元素定义一个ID属性。用法示例html:divid=“top”/divCSS:#top{font-size:12px;color:blue;}3、class类选择符语法:.类(class)名{属性:属性值;}说明:对同类标签进行不同的样式设定对不同类的标签进行同样的样式设置用法:CSS:.txt{font-size:12px;color:blue;}html:divclass=“txt”1111/divdiv222/divpclass=“txt”333/pCSS复合选择符1、群组选择符语法:选择符1,选择符2,选择符3……{属性:属性值;}对一组元素进行相同的样式指定,例如:h1,h2,h3,p{font-size:12px;color:blue;}使用逗号对选择符进行分离,对页面中使用相同样式的地方只需书写一次样式即可,可减少代码量,改善CSS代码的结构。2、包含选择符语法:父元素子元素……{属性:属性值;}对某个对象的子对象进行样式指定,例如:diva{font-size:12px;color:red;}包含选择符指选择符组合中前一标签包含后一个标签,之间用空格空开。利用包含选择符可以避免过多的使用class及id的设置,并且直接对所需要设置的元素进行了样式设置。包含选择符除了可以二者包含,也可以多级包含。3、子选择符语法:父元素子元素{属性:属性值;}例如:h1strong{color:red;}不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素4、伪类选择符a:link/visited/hover/active链接伪类选择器在实际开发中,一般不对四个都进行说明。而是按照以下方式说明,先定义默认状态的样式,再对需要修改的状态进行说明。a{color:#333;text-decoration:none;}a:hover{color:#f10215;}CSS文本属性1、字体大小:font-size:16px;2、字体风格:font-style:normal/italic/oblique;分别为正常/斜体3、字体加粗:font-weight:normal/100-900/bold/bolder分别为正常/加粗4、字体:font-family:“微软雅黑”;简写:font:font-weightfont-stylefont-size/line-heightfont-family;对齐方式:1、水平对齐:text-align:left/right/center/justify2、垂直对齐方式:vertical-align:top/bottom/middle/baseline;3、行高:line-height:数值或倍数。文字一定会出现行高的中间单行文本水平垂直居中:text-align:center;line-height:容器的高度;text-decoration:文本修饰属性,设定文本划线的属性。值有:none/underline/overline/line-throughnone:没有修饰underline:添加下划线overline:添加上划线line-through:添加删除线text-indent:文本缩进属性,设定文本首行缩进。值为数值,常用单位有pxtext-indent可以取负值;text-indent属性只对第一行起作用。CSS属性-列表list-style-type:disc实心圆circle空心圆square实心方块none去掉列表标签list-style-image:url(所使用图片的路径及全称)list-style-position:outside/inside;CSS属性-背景background-color为元素设置背景色background-image为元素设置背景图1)容器尺寸等于图片尺寸,背景图片正好显示在容器中2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满容器3)容器尺寸小于图片尺寸,只显示容器/元素/范围以内的背景图background-repeat和背景图搭配使用,设置背景图是否平铺值有:repeat/repeat-x/repeat-y/no-repeatbackground-position背景定位属性,和背景图搭配使用第一个值表示水平方向,第二个值表示垂直方向如只写一个值,则第二个值将默认centerbackground-attachment设置图片是否跟随内容滚动。值:scroll/fixed背景属性简写为:background:background-color/-image/-repeat/-position/-attachmentbackground:#f00url(img/tu.jpg)no-repeatrightfixed;背景属性background:背景属性的综合属性。语法:background:背景颜色背景图像背景重复背景位置背景附着例如:background:#f00url(img/tu.jpg)no-repeatrightfixed;盒模型盒模型的组成:contentpaddingbordermargin 内边距:设定页面中一个元素内容到元素的边缘之间的距离。padding值是添加在原有的content内容之上的,若想保持元素大小的不变,需从元素的原有大小上减去添加的padding值。padding值的方向:一个值:上下左右四个方向两个值:上下左右三个值:上左右下四个值:上右下左 边框边框属性border:是边框属性的综合应用。语法:border:边框宽度边框风格边框颜色例如:border:5pxsolid#f00边框风格border-style:设定边框风格,常用属性值有:none/solid(实线)/dotted(点划线)/dashed/double双线边框宽度border-width:设定边框宽度,数值,单位为px边框颜色border-color:设定边框色 margin边距属性:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。属性值的4种方式:四个值:上右下左三个值:上左右下二个值:上下左右一个值:四个方向

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

right: 清除右浮动

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

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

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

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

三、文本处理

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

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

注:只对英文起作用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、盒模型

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

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

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

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

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

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

语法: 

二、颜色,背景和字体

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

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

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

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

css层叠的概念(含义)

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

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

尽量避免使用table


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

eg:

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

 

这个东西仅供我们参考下

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

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

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

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


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

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

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

4、背景类属性

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

left: 清除左浮动

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

 

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

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

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

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

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

L o V e H A t e

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


四、选择符与伪类

3.外部样式

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

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

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

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

五、其他

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

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

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

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

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

 二、css选择器

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

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

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

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

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

三、CSS核心属性

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

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

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

eg: h1{font-weight:normal;}

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

 

7.子元素选择器

金莎娱乐场app下载,语法: <标记 id="***"></标记>

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

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

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

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

eg: font-size:12px;

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

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

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

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

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

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

 8.伪类选择器

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

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

 

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

<head>
    ...
    <link href="xxxx.css" rel="stylesheet" type="text/css">
</head>
<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>

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

    语法: @import "css文件路径";

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

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

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

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

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

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

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

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

  eg:

li{list-style:none;}

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

编辑:金莎娱乐app 本文来源:css是由选择符和声明两大部分组成,今天抽点时

关键词:

  • 上一篇:没有了
  • 下一篇:没有了