CSS学习笔记1
本文为taixiansheng学习笔记，欢迎转载，蟹蟹
1. CSS与HTML结合方式
1.1 结合方式1
在html文档标签中直接添加style属性，属性值即为css代码。
示例：
<p style="color:red;" >标签中添加style属性</p>1.2 结合方式2
在html文档的head标签中包含style标签，在style标签中包裹css代码。
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面名</title>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
<p>结合方式2</p>
<p>在html文档的head标签中包含style标签，在style标签中包裹css代码。</p>
</body>
</html>1.3 结合方式3
将css代码作为独立文件，在html文档的head标签中通过<link>标签链接css代码。
link标签格式为：
<link type="text/css" rel="stylesheet" href="filename.css" />
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面名</title>
<link type="text/css" rel="stylesheet" href="filename.css" />
</head>
<body>
<p>结合方式3</p> <!--p标签样式在filename.css中有定义-->
<p>将css代码作为独立文件，在html文档的head标签中通过`<link>`标签链接css代码。</p>
</body>
</html>本文为taixiansheng学习笔记，欢迎转载，蟹蟹
2. CSS选择器
2.1 标签选择器
通过对标签直接来定义样式，其语法为：
标签名 {
属性键：属性值；
}示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面名</title>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<p>css学习笔记1</p>
<p>标签选择器</p>
</body>
</html>2.2 派生选择器
通过依据元素在其位置的上下文关系来定义样式。其语法为：
标签1名 标签2名{
属性键：属性值；
}其定义了包裹在标签1中的标签2所具有的属性。
当标签名有3个时，如
标签1名 标签2名 标签3名{
属性键：属性值；
}其定义了包裹于标签2（标签2包裹于标签1）的标签3所具有的属性。
当标签名有多个时，可依次类推。
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
p strong u{
font-style: italic;
}
</style>
</head>
<body>
<p><strong>abc<u>def</u></strong></p> <!--仅def被上面css定义为斜体-->
<p><strong>abc</strong><u>edf</u></p>
<p><strong>abc</strong></p>
</body>
</html>2.3 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。其可以与派生选择器结合使用。
id 选择器以 “#” 来定义。其语法为：
#ID {
属性键:属性值;
}示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#one {
color:red;
}
#two {
color:blue;
}
</style>
</head>
<body>
<p id="one" >taixiansheng学习笔记</p>
<p id="two">id选择器</p>
</body>
</html>2.4 class选择器
class选择器可以为一类标签定义样式，可以与派生选择器结合使用。其语法为：
.class名 {
属性键:属性值;
}示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.center {
text-align: center
}
</style>
</head>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
</body>
</html>2.5 伪类选择器
伪类选择器用于对某个标签的某种状态定义样式，常见的状态有4种，其中，<a>标签最全。
常见状态有：link(没点击过的链接)、visited、hover、active。
伪类选择器语法为：
selector : pseudo-class {property: value}与css类结合时的语法为：
selector.class : pseudo-class {property: value}示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color:blue;
}
a:active {
color:yellow;
}
a.red : visited {
color: color:red;
}
</style>
</head>
<body>
<a href="http://blog.csdn.net/taixiansheng" >taixiansheng的博客</a>
<a class="red" href="http://blog.csdn.net/taixiansheng">taixiansheng的博客</a>
</body>
</html>本文为taixiansheng学习笔记，欢迎转载，蟹蟹
2.6 属性选择器
属性选择器可以对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
示例：
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="one" href="http://http://blog.csdn.net/taixiansheng">taixiansheng</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://http://blog.csdn.net/taixiansheng">taixiansheng</a>
<hr />
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>2.7 选择器分组
选择器分组可以同时对多个选择器设置样式，其语法为：
选择器1,选择器2...... {
属性键:属性值;
}示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.one,#two,h1 {
color:yellow;
}
</style>
</head>
<body>
<p class="one" >taixiansheng的学习笔记</p>
<p id="two" >taixiansheng的学习笔记</p>
<p>taixiansheng的学习笔记</p>
<p class="one" >taixiansheng的学习笔记</p>
<h1>taixiansheng的学习笔记</h1>
</body>
</html>本文为taixiansheng学习笔记，欢迎转载，蟹蟹
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
