css学习

最新推荐文章于 2024-09-23 15:32:37 发布

weixin_30339969

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangyang94s/archive/2012/12/13/2816578.html

什么是css?css是层叠样式表（Cascading Style Sheets）

css用来做什么？它定义如何显示HTML元素。吧css添加到html中是位了解决内容与表现分离的问题，可以极大提高工作效率。

css语法:selector1，selector2，selector3{declaration1; declaration2; ... declarationN;}。declaration有一个属性和一个值组成：{property :value},由分号分隔。

css的优先级是由 1.浏览器缺省设置2.外部样式表3.内部样式表（在head中）4.内联样式（在 HTML 元素内部）依次提高的。

css的继承性：子元素继承父元素属性。

body{color:red;}

那么body中的子元素如{p,td,ul,ol,li}之类的也都继承red。如果不想继承，那么请给那个元素单独列一个属性。

p{color:green;}

css派生选择器：可以根据上下文关系来定义样式。

li strong{font-style:italic；}这样在li中的strong才会被改变，不在li中就不会变

id选择器：为标有id的html元素指定样式,用#来定义

#red{color:red;}
<p id="red">这个段落是红色的</p>
#pgreen p{color:green;} 用来组合产生派生选择器

类选择器：用 . 显示

.center{text-align:center;}
.fancy td{color;#f60;background:#666;}  累么为fancy的更大元素内部的表格单元都会以灰色背景显示橙色文字。
td.fancy{color:#f20;background:#555;} 类名为fancy的表格单元会是背景的橙色

属性选择器:为指定的html元素设置样式。

[title]{color:red;}为带有属性title的所有元素设置样式。
[title =hello]{color:green;}选择特定值
[title~=hello]适用于空格分隔的属性
[title|=hello]适用于连字符分隔‘-’的属性
input[type="text"]{}前面可以加标签来修饰想要具体设置样式的属性