美高梅平台下载-美高梅娱乐平台登录

热门关键词: 美高梅平台下载,美高梅娱乐平台登录

只选择某个元素的子元素4、美高梅娱乐平台登录

日期:2020-02-29编辑作者:美高梅娱乐平台登录

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

一、CSS简介

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种方式:四个值:上右下左三个值:上左右下二个值:上下左右一个值:四个方向

近期主要负责公司的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.毗邻元素选择器

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

本文由美高梅平台下载发布于美高梅娱乐平台登录,转载请注明出处:只选择某个元素的子元素4、美高梅娱乐平台登录

关键词:

alt属性的作用是当图片无法显示时以文字作为替

大家都知道,现在做网站简单,但是推广就比较困难了,可能一些商家引入投资,直接烧钱做广告来推广,但是对于...

详细>>

把所有的背景图像都放到一个图片文件中

网站页面性能优化的34条黄金守则1、尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容。这部分时...

详细>>

咋们就讲下如何去掉虚线框和背景框吧美高梅平

刚看到一则好新闻,深圳500辆以上公交车将有免费WIFI服务。哈哈,如能实现就太好了,话说回来,这充分说明现在大...

详细>>

Chrome开发者工具,chrome 开发技巧

再看这边文章之前,建议大家先看下“如何掌握谷歌的Chrome developertool调试技巧“。 昨天妹子“妮妲”袭击深圳后,...

详细>>