css的用法

Css(Cascading Style Sheets,层叠样式表)是一种页面美化方法,通过编辑Css的对象属性达到美化页面的效果。Css的操作基本单元为对象,使用CSS的感觉就像是使用C++/C中的函数,CSS对象就像是函数,通过定义,声明,调用来使用。

CSS有三种选择器(对象定义和使用方式):标签选择器,类别选择器,ID选择器

CSS有四种包含方法:行内式,内嵌式,链接式,导入式

标签选择器:

定义:引用的样式对象名{标签属性:属性值;标签属性:属性值;…….}

eg: h1,h2{text-align: center; color: red;}

使用:<h1>……..</h1>

<h2>……..</h2>

类别选择器:

定义:标签名.类名{标签属性:属性值;标签属性:属性值;…….}或者

.类名{标签属性:属性值;标签属性:属性值;…….}

eg: p.center{ text-align: center; }

.right{ text-align: right; }

使用:<p class=”center”>……..</p>

<h1 class=”right”>……..</h1>

(*区别:后一种格式表示 所有class属性值为该类名的标签都遵守该类所定义的样式)

    (eg: 定义了.right{text-align: right;},调用的时候,只要是通过class调用right的属性的标签,都可以表现出right的属性。<h2 class=”right”>…..</h2>; <p class=”right”>……      </p>;<span class=”right”>……</span>;等等标签都表现出右对齐的属性。 )

ID选择器:

定义:#id名称{标签属性:属性值;标签属性:属性值;…….}

eg: #sample{font-family:宋体; don’t-size:60pt;}

使用:<p id=sample>……</p>

行内式:

不需要定义选择器,利用style属性直接为元素设计样式

eg: <p style=”color:#FF0000”>……</P>

内嵌式:

先定义选择器,将样式表定义在<head></head>之间。

eg:

<html>
        <head>

           <title>xxxxxx</title>

            <style type=”text/css”>

                p{color: #000FF;}

                .info{font-size: 12px;}

             </syle>

        </head>
 </html>

链接式:

定义的对象单独放在一个以.css为扩展名的文件里,在使用<link>标签链接到所需要的网页中,在<head></head>之间。

eg: <link href=”xxx.css” type=”text/css” rel=”stylesheet”>

导入式:

与链接式方法类似,只是通过import的方法导入。

eg: <style type=”text/css”>@import url(xxx.css);</style>

CSS样式表的优先级:

嵌入式样式表 > 内联式 > 外联式 > 浏览器默认

16:28:52 2016-10-07

时间: 2024-08-04 05:24:36

css的用法的相关文章

css奇特用法之 IMG添加背景图片配合显示--效果惊艳

IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路,我想这种思路可以应用的地方相当多了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

网页重构应该避免的10大 CSS 糟糕用法

对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解

CSS margin用法详解

CSS的margin用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域.可以单独定义上下左右某一方位的外边距.代码实例如下:实例一:子div没有外边距的情况: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

学习笔记之HTML与CSS属性用法

1.  z-index 的属性用法: z-index属性是用来设置元素的堆叠顺序,z-index的属性值可为负数.0 或 正数,属性值越大,元素越接近用户,越显示于前面,如下图所示: 新手使用CSS中的这个属性时,经常会忘记在前面要先声明定位元素,即z-index属性只适用于绝对定位容器,例如代码:position: absolute;   z-index: 1; 2. role : html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role

css 样式用法的累积

我们直接看例子然后在来解释用法. <!DOCTYPE html> <html> <head> <style> input[type="checkbox"]+p:before{ content:"台词:"; } </style> </head> <body> <input type="checkbox"/><p>我是唐老鸭.</p>

CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式. IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性 .padding-l-r p span

Jquery css函数用法(判断标签是否拥有某属性)

判断一个层是否隐藏: $("#id").css("display")=="none"  ; 在所有匹配的元素中,设置一个样式属性的值: $("p").css("color","red"); 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式 1    $("p").css({ color: &q

一些css小用法总结(持续更新~)

1.用:before和:after实现小尖角效果 <div class="div"></div> .div{ background: #fff; border: 2px solid #000; height: 100px; width: 100px; position: relative; } .div:after,.div:before{ border:0 solid transparent; position: absolute; top: 100%; co

CSS background-position用法

相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用... 其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键. 要想实现CSS抠图,只需要用到一个属性:background-position. 按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下: 假如小菜现在想做一个+1按钮,利用