首页

CSS样式表使用技巧充分利用样式表的强大性

前端达人

为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会



 



随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信 息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变 几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会。 新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。



1、在一个网页中同时调用CSS的多种引入方式 



在 HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在 一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就是它为什么称之为“层叠样式表”的原因,浏览器在处理网页中的样式表是按照 一定的顺序来处理的,首先检查页面中是否有直接插入式CSS,如果存在就先执行它,针对本句的其它CSS就不去管它了;接着检查网页源代码中 的"STYLE"标记,有就执行了;接下来再依次检查执行"@import"导入的内部样式表和 链接的外部样式表。因此,我们完全可以在一个网页中同时调用CSS的多种引入方式。 



2、快速创建CSS外连式文件 



对 于一个初接触CSS的网页设计人员来讲,要用写字板之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很 好,用它来帮助就轻松多了。具体可以这样操作:首先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver的编辑窗中调出CSS面 板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;全部定义好后,再用记事本创建一个空的CSS外连式文 件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。 



3、让背景图案静止不动 



当 网页不能在一屏全部显示时,我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时一般图象和文字是一起移动的,那么我们有没有办法使 背景图象不随文字一起“滚动”呢?利用CSS就可以实现这样的目的,我们只要把下面这段源代码直接放在网页的与标签之间就可以了,其中bg.jpg就是网 页中的背景图象,大家可以把它换成自己需要的背景图象:



复制代码



代码如下:





〈style type="text/css"〉 

〈!-- 

BODY { background: purple url(bg.jpg); 

background-repeat:repeat-y; 

background-attachment:fixed 



--〉 

〈/style〉





4、让网页自动进行“首行缩进” 



用 DreamWeaver来设计网页的用户知道,在DreamWeaver中输入空格不是那么的方便,我们可以利用css来设计“首行缩进”功能来弥补这个 缺憾。打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能,在这里要注意的是,所谓“首 行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置 好的CSS如下所示:



复制代码



代码如下:





〈style type="text/css"〉 

〈!-- 

.style1 { text-indent: 2em} 

--〉 

〈/style〉





5、巧用css来设定文字的背景 



在 DreamWeaver中,如果我们需要给文字加上不同的背景颜色时,操作上很简单,只要用鼠标单击属性面板上的文字颜色按钮,从弹出的颜色设置栏中选择 需要的颜色就可以了。但如果我们要给部分文字加不同的背景色,该怎么操作呢?由于DreamWeaver3中没有这方面的功能,但我们可以巧妙利用css 来实现这样的目的。具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为bjstyle,接着在网页中选中需要设置颜色的文 字,然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码:



复制代码



代码如下:





〈style type="text/css"〉 

〈!-- 

.bjstyle { background: #cc00bb} 

--〉 

〈/style〉





6、给指定内容加边框 



在 DreamWeaver中,我们可以利用CSS强大的定义功能来给某部分内容加边框,定义时首先打开DreamWeaver的设计界面,在该界面中找到 CSS的属性定义对话框(Style Definition for .style1),该对话框的“Border”设置项就是用来定义指定内容边框线的,其中“top”、“bottom”、“left”、“right”设 置栏是分别用来定义指定内容四周边框线的粗细和颜色的,这些设置项设置好后还需要在下面的“Style”中定义线型,否则我们将看不到定义的边框线,因为 css默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框为:绿色中粗线的CSS源代码:



复制代码



代码如下:





〈style type="text/css"〉 

〈!-- 

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00} 

--〉 

〈/style〉





7、用样式表来控制超级链接的颜色 



如 果你仔细研究一下超级链接,你就会发现,浏览器处理超级链接的默认方式是,对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的,对于已经 访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间,可能就产生厌倦之感,并且很有可能与自己网页的背景颜色 不协调。因此我们完全可以按照自己的视觉要求,来自由更改超级链接的显示颜色,让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代 码,代码如下: 



我们可以把这段源代码添加在HTML文件的……之间,它可以对对本网页中的任何一个超级链接都起作用,其中这段代码中的: 



A:link {text-decoration: none; color:blue}是说明了超级链接还没有被访问,它没有下划线,颜色为蓝色。 



A:visited { color:red; text-decoration:line-through }说明了超级链接被访问后,它的颜色变成了红色,有了一根删除线。 



A:active { color:white; text-decoration:underline }说明超级链接处于活动状态的时候,它的颜色变成了白色,有了下划线。 



A:hover {text-decoration:none;color:#FF0000;background-color:black}说明鼠标移动到超级链接后,它没有下划线,文字颜色变成了黄色,背景颜色是黑色。 



新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。



根据上面的解释,我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种,以便能更好地展示自己的个性。 



8、给选中文字加背景图像 



在 DreamWeaver中,我们同样可以给指定文字加上背景图象,其操作过程与给指定文字加背景色操作类似,只不过是把选择背景颜色换成选择加载的背景图 象就是了。其具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为txstyle,接着在网页中选中需要设置颜色的文字,然 后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码(其中test.gif就是所加载的背景图象):



复制代码



代码如下:





〈style type="text/css"〉 

〈!-- 

.txbgstyle { background-image: url(test.gif)} 

--〉 

〈/style〉

————————————————

版权声明:本文为CSDN博主「html基础教程」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/html168/article/details/104525011

html+css基础教程入门篇之css选择器详细解读

前端达人

CSS 选择器分组



CSS选择器分组,可以把定义相同属性的不同标签做为一组处理,缩短了CSS样式编写的时间和CSS样式表的大小。



例如希望h2和p标签的字体颜色都设置为黑色,则可以写成:



h2,p{color:black;}

通过分组,可以将相同属性的样式“压缩”在一起,这样就可以得到更简洁的样式表。例如:



/ no grouping /

h1 {color:blue;}

h2 {color:blue;}

h3 {color:blue;}

h4 {color:blue;}

h5 {color:blue;}

h6 {color:blue;}



/ grouping /

h1, h2, h3, h4, h5, h6 {color:blue;}



当有多个标签有相同属性时,可以抽出相同属性进行分组,不同的属性另外书写样式。



除了使用标签来进行相同标签CSS选择外,还可以使用类选择器来选择。



类选择器前面使用符号.



(1)基本使用



为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如:



<h1 class="important">This heading is very important.</h1>

<p class="important">This paragraph is very important.</p>

在样式表中定义:



.important {color:red;}

这样定义后,class为important的h1和p标签的字体颜色也就都是红色。



(2)结合元素选择器



类选择器可以结合元素选择器来使用。



例如,您可能希望只有段落显示为红色文本:



p.important {color:red;}

这个样式表示的是,所有class为important ,且为p标签的元素中的字体为红色。其他标签的无效。



(3)CSS 多类选择器



一个标签可以定义多class,则这个标签有这多个class的所有属性,例如:



<p class="important warning">This paragraph is a very 

important warning.</p>





.important {font-weight:bold;}

.warning {color:red;}



例子中为p标签定义了important和warning两个class,所以p标签的字体是加粗且字体颜色是红色的。

————————————————

版权声明:本文为CSDN博主「前端学习线路」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/webxuexi168/article/details/104349157

CSS BUG解决方法以及CSS BUG类的小技巧

seo达人

CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在webjx.com大量的技术文档中,也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。



一、 针对浏览器的选择器



这些选择器在你需要针对某款浏览器进行css设计时将非常有用.

IE6及其更低版本

  • html {}

    IE7及其更低版本

    :first-child+html {} html {}

    仅针对IE7

    *:first-child+html {}

    IE7和当代浏览器

    html>body{}

    仅当代浏览器(IE7不适用)

    html>/*/body{}

    Opera9及其更低版本

    html:first-child {}

    Safari

    html[xmlns
    =""] body:last-child {}

    要使用这些选择器,请将它们放在样式之前. 例如:


    content-box { 

    width: 300px; 

    height: 150px; 

    }



     


  • html #content-box { 

    width: 250px; 







    您也可以参考—CSS hacks:浏览器特定选择器介绍



    二、让IE6支持PNG透明



    一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。

    你需要使用一个css滤镜

     



    *html #image-style { 

    background-image: none; 

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 

    ename.png", sizingMethod="scale"); 

    }





    三、移除超链接的虚线



    FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入:

     



    outline:none.

    a{ 

    outline: none; 

    }





    您也可以参考—除链接元素的虚线框(兼容IE7、IE6、FF)



    四、给行内元素定义宽度



    如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

     



    span { width: 150px; display: block }





    五、让固定宽度的页面居中



    为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

     


    wrapper { 

    margin: auto; 

    position: relative; 

    }





    六、IE6双倍边距的bug



    给此对象加上display:inline即可解决问题。具体介绍:



    七、Box Model 盒模型bug的一般解决办法





    八、两个层之间的3px间隙



    传说中的“IE 3px bug”,解决的办法:



    九、在IE中的HTML注释引起文字奇怪的复制



    Duplicate Characters Bug很神奇。



    十、图片替换技术



    用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.

     



    HTML:

    <h1><span>Main heading one</span></h1>

    CSS:

    h1 { background: url(heading-image.gif) no-repeat; } 

    h1 span { 

    position:absolute; 

    text-indent: -5000px; 







    你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.

    关掉css,然后看看头部会是什么样子的.本文由webjx.com整理,转载请注明出处!



    十一、 最小宽度



    IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.

    除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:

     



    .container { 

    min-width:300px; 

    }





    为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

     



    <div class="container"> 

    <div class="holder">Content</div> 

    </div>





    然后你需要定义外层div的min-width属性,本文由webjx.com整理,转载请注明出处!

     



    .container { 

    min-width:300px; 

    }





    这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

     


  • html .container { 

    border-right: 300px solid #FFF; 


  • html .holder { 

    display: inline-block; 

    position: relative; 

    margin-right: -300px; 

    }





    As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.



    十二、隐藏水平滚动条



    为了避免出现水平滚动条, 在body里加入 overflow-x:hidden .

     



    body { overflow-x: hidden; }





    当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用


软件测试 学习之路 CSS (四)

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、文字样式中阶

字体样式
代码格式:
font: 文字粗细 大小/行高 字体名称;
例子:font: bold 200px/400px "微软雅黑";
2.字体阴影
代码格式:
text-shadow:x y r color;
注:x是为负数则阴影向左,整数向右,同理y正数向上,负数向下,r代表阴影模糊程度,数值月大则越模糊,其单位都是px,color为文字颜色。
例子:text-shadow: 10px 10px 0px red;
提示:允许一段文字有多层阴影,多层之间用逗号隔开,每一层内,不同参数用空格隔开。

凹凸字体 阴影巧用
原理:通过背景颜色以及不同于背景颜色的阴影打造凹凸字体效果
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凹凸文字</title>
<style type="text/css">
body{
background: #ccc;
}
div{
color: #ccc;
text-align: center;
font: bold 200px/400px "微软雅黑";
/*text-shadow: 1px 1px 0px #fff;-1px -1px 0px #333;*/
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff;
}
</style>
</head>
<body>
<div >
凹凸文字
</div>
</body>
</html>

二、过渡属性

过渡属性的作用就是体现元素默认样式与最终样式变化的过程。
代码格式:transition:all 1s linear 0s;
注:

第一个参数的作用是设置元素的哪些属性过渡,all表示全部过渡,width代表属性宽度过渡,其他不过渡,其他属性也一样。
的哥属性设置过渡需要的时长,单位s不能省略。
第三个属性设置过渡延迟多少秒执行,单位s不能省略。
hover 设置鼠标移到某一元素时状态。
transition 这个属性既可以添加在元素默认状态,也可以添加在鼠标上移状态即添加在hover标签内,区别就是第二种做法在鼠标离开时候不会发生过渡变化。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡属性</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: green;

transition:all 1s linear 0s;
 
}
div:hover{
width: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="\">

</div>
</body>
</html>
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

css 图片有间隔多个Img标签之间的间隙

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点。

在网上找到了几个不错的解决方法:

1.多个img标签写在一行

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>

效果前:技术分享

效果后:技术分享

 

2.在img标签的父级上写:font-size:0;//这个在解决display:inline-block出现的问题也有帮助

<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>

效果:技术分享

 

3.使用display:block(img是内联元素)//要float一下才行

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>

效果:技术分享

 

4.使用letter-spacing属性

<div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠--> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div> 

效果:技术分享

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

面向未来的 CSS Variable

涛涛

CSS Variable 即CSS变量,聊CSS变量之前,我想先来说说Sass和Less,还有Stylus,它们都是目前使用较为普遍的三款CSS预处理框架,我们为什么要使用它们呢,因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧,这些框架对于这种CSS预处理的技术已经非常成熟,可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。

了解并使用CSS中的rem单位

蓝蓝设计的小编

什么是 rem

可能在你使用收音机或者用其他音乐播放器之前,就已经听过“R.E.M.”这个词了。在这个乐队眼中,这个词是“浅睡眠时眼球的快速转动”的缩写,而在 css 中,rem 代表着“以根元素为参照物的 em 单位“。他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人,但是它可以帮助你实现一个和谐、平稳的设计。

根据 W3C 规范中对 1rem 的定义:

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。

能用HTML/CSS解决的问题就不要使用JS

蓝蓝设计的小编

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。

1. 导航高亮

导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。

1.png

2.png

在正常态时,每个导航的默认样式为:

8个获取手机应用程序设计灵感的网站

蓝蓝设计的小编

曾经,CSS 画廊非常流行,网页设计师们会定期访问这些网站获取灵感。现在仍然可以方便迅速找到令人兴奋的东西(例如 Dribbble 和 Behance 对设计有很大的帮助)。

对于移动应用程序设计,存在类似的画廊,我相信他们会更加有用。这是因为如果不安装移动应用程序,灵感更难获得,也更需要时间和努力。这12个画廊有很多漂亮的应用程序用户界面,并进行了很好的分类。赶紧收藏吧!

优设好文:
强烈推荐!你应该到这里寻找网页设计灵感

Creattica – Mobile Interface

Creattica 是一个灵感画廊,展示最好的网站设计,标志设计,平面设计,摄影,作品。

Creattica - Mobile Interface

Lovely UI

收集各种移动界面元素,启动画面,按钮,导航,通知等等各种组件的设计。

lovely_ui

超赞!25例交互体验极佳的网页设计

蓝蓝设计的小编

25 Modern Web / Interactive Websites Design Examples

本文介绍的案例均使用了的HTML/CSS 以及 JS 技术,从视差滚动到响应式设计,实现了良好的交互性,为用户提供更好的浏览体验。我们来快速阅览一下吧。

推荐阅读:
《网页设计新趋势!25例出众的响应式导航设计》
《让网站更生动!那些在网页中完美运用视频元素的案例》
《不要落伍!来和小伙伴一起学习响应式网页设计》

 

Melbourne Remote Control Tourist

的远程旅游体验,这个概念不错吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

Portfolio

展示了设计师 Bradley Haynes的作品,他来自旧金山

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档