CSS样式学习笔记『W3School』

当前位置 : 首页 > 网页制作 > CSS > CSS样式学习笔记『W3School』

CSS样式学习笔记『W3School』

来源: 作者: 时间:2016-01-28 09:27
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、选择器的分组h
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、创建:
外部样式表
内部样式表
内联样式
 
注意多重样式
 
 
Tag:
网友评论

<