CSS样式学习笔记『W3School』

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、创建:
外部样式表
内部样式表
内联样式

注意多重样式