1、
选择器+声明声明:属性+值eg:h1{color:red;font-size:14px;}颜色:p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}单词时:p{font-family:"sans serif";}2、选择器的分组
h1,h2,h3{ color:green;}3、继承body{ font-family: Verdana,sans-serif;}如果浏览器不支持继承:body{ font-family: Verdana,sans-serif;}p,td,ul{ font-family:Verdana,sans-serif;}摆脱继承:body{ font-family:Verdana,sans-serif;}p{ font-family:Times,"Times New Roman",serif;}4、派生选择器li strong { font-style:italic;font-weight:normal;}只有在li的strong字体才会应用此格式<li><strong>在li中的strong</strong></li>5、id选择器#red{color:red;}#green{color:green;}使用:<p id="red">红色</p><p id = "green">绿色</p>id在一个页面中事唯一的,想知道原因吗?哈哈!!!id选择器和派生选择器:只应用于id为sidebar内的p#sidebar p{ font-style: italic;text-align:right;margin-top:0.5em;}单独的选择器:#sidebar{ border:1px dotted #000;padding:10px;}6、类选择器
.center{text-align:center}使用:<h1 class="center">使用类选择器class,居中</h1><p class="center">........</p>类名不能使用数字class和派生选择器:
.fancy td{ color:#f60;background:#666}类名为fancy的更大元素内部的表格单元都会起效,即:如果一个<table class = fancy>...则所有的单元格都起效元素基于类而被选择:td.fancy{ color:#f60;background:#666;}使用:<td class = "fancy">有且仅有类名为fancy的td起效,7、属性选择器:[title]
{ color:red;}<p title = "任何值">....</p>[title = "w3c"]
{ color:red;}<p title = ""w3c>...</p>属性和值选择器-多个值(空格分隔):
[title~=hello]{ color:red;}使用:<p title = "word hello">...</p><p title = "hello word">...</p>连字符分隔:
[lang|=en]{ color:red;}使用(以en开头):<p lang="en">....</p><p lang="en-us">...</p>若为[lang=en]{},则只有<p lang = "en">...</p>表单样式设置:
input[type = "text"]{}
input[type = "button"]{}
使用:<input tyep = "text">.....<input type = "button">.....选择器:
[attribute] 用于选取带有指定属性的元素。[attribute=value] 用于选取带有指定属性和值的元素。[attribute~=value] 用于选取属性值中包含指定词汇的元素。[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。[attribute^=value] 匹配属性值以指定值开头的每个元素。[attribute$=value] 匹配属性值以指定值结尾的每个元素。[attribute*=value] 匹配属性值中包含指定值的每个元素。8、创建:
外部样式表内部样式表内联样式注意多重样式