一、CSS选择器
1. id 选择器
<html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*ID选择器*/
#s1{
color:red;
}
#p1{
color:blue;
}
#title1{
color:yellow;
}
</style>
</head>
<body>
正文部分<br/>
<h1 id="title1">一级标题</h1>
<p id="p1">段落标记</p>
<p id="p2">段落标记p2p2p2p2p2p2p2p2p2p22</p>
文字中的以<span id="s1">部分特殊内容</span>
</body>
</html><html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*class选择器*/
.green{
background-color:green;
}
.red{
color:red;
}
</style>
</head>
<body class="green">
正文部分<br/>
<h1 id="title1">一级标题</h1>
<p id="p1">段落标记</p>
<p id="p2" class="red">段落标记p2p2p2p2p2p2p2p2p2p22</p>
文字中的以<span id="s1" class="red">部分特殊内容</span>
</body>
</html><html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*标签选择器*/
h1{
text-align:center;
}
p{
background-color:blue;
}
span{
font-size:30px;
}
</style>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p>段落标记</p>
文字中的以<span>部分特殊内容</span>
</body>
</html>e1,e2,e3,e4...{样式}
<html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*并列关系*/
h1,p,span{
font-size:30px;
}
.red,#p1{
color:red;
}
</style>
</head>
<body class="green">
正文部分<br/>
<h1 id="title1">一级标题</h1>
<p id="p1">段落标记</p>
<p id="p2" class="red">段落标记p2p2p2p2p2p2p2p2p2p22</p>
文字中的以<span id="s1" class="red">部分特殊内容</span>
</body>
</html>5.包含关系的组合：对某个标记的子元素进行修饰，用空格隔开
parent children{样式}
<html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*包含关系*/
p span{
font-size:30px;
}
</style>
</head>
<body class="green">
正文部分<br/>
<h1 id="title1">一级标题</h1>
<p id="p1">段落标记</p>
<p id="p2" class="red">段落标记p2p2p2p2p2p2p2p2p2p22</p>
<p id="p3">文字中的以<span id="s1" class="red">ID为p3的元素的子元素span的内容</span></p>
<span>独立的span标记的内容</span>
</body>
</html>a:link a:hover a:visited
<html>
<head>
<title>css的伪类选择器</title>
<style type="text/css">
a:link{
color:black;
text-decoration:none;
}
a:hover{
color:blue;
text-decoration:underline;
font-size:20px;
}
a:visited{
color:purple;
}
</style>
</head>
<body class="green">
<a href="biaoqian.html">biaoqian.html</a><br/>
<a href="id.html">id.html</a><br/>
</body>
</html>二、CSS位置
1.默认样式-----元素本身是由默认样式的
<html>
<head>
<title>css的默认样式</title>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p>段落标记</p>
文字中的以<span>部分特殊内容</span>
</body>
</html><html>
<head>
<title>css的外部样式</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p>段落标记</p>
文字中的以<span>部分特殊内容</span>
<hr/>
<p >这是第二个段落</p>
</body>
</html><html>
<head>
<title>css的内部样式</title>
<style type="text/css">
p{
color:red;
font-size:25px;
}
</style>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p>段落标记</p>
文字中的以<span>部分特殊内容</span>
<hr/>
<p >这是第二个段落</p>
</body>
</html>4.内联样式------通过元素的style属性添加样式
<html>
<head>
<title>css的内联样式</title>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p>段落标记</p>
文字中的以<span>部分特殊内容</span>
<hr/>
<!--css样式：属性名字1:属性值1;属性名字2:属性值2;.....-->
<p style="color:red;font-size:25px;">这是增加了内联样式的段落文字</p>
</body>
</html>注：
内联样式：一次只能修饰一个元素，当某个样式是一个标记独有的样式的时候
内部样式：如果样式是多个标记都需要的，而且这些标记在同一个html文档中的时候
外部样式：如果多个页面中的多个标记同时需要某个样式的时候
如果某一个标记被以上四种样式同时进行了修饰，显示顺序：
默认样式------》外部样式------》内部样式---------》内联样式
<html>
<head>
<title>css的默认样式</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
p{
color:blue;
}
</style>
</head>
<body>
正文部分<br/>
<h1>一级标题</h1>
<p style="background-color:gray;color:red;">段落标记</p>
文字中的以<span>部分特殊内容</span>
</body>
</html>三、div
<html>
<head>
<title>css的默认样式</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#top{
background:red;
width:98%;
height:100px;
margin-top:1%;
margin-left:1%;
margin-right:1%;
}
#left{
background:green;
float:left;
width:25%;
height:800px;
margin:1%;
}
#right{
background:blue;
float:left;
width:71%;
margin:1%;
height:800px;
}
</style>
</head>
<body >
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>1.文本样式
<html>
<head>
<title>css的默认样式</title>
<style type="text/css">
/*文本缩进*/
#t1{
text-indent: 2em;
color:rgb(0,0,255);
}
/*悬挂缩进*/
#t2{
text-indent: -6em;
padding-left: 6em;
color:rgb(0,225,255);
}
/*百分比缩进*/
#t3{
text-indent: 20%;
color:rgb(225,0,255);
}
/*继承*/
#inner {
text-indent: 10%;
color:rgb(0,125,255);
}
/*字间隔改变字（单词）之间的标准间隔*/
p.spread {
word-spacing: 30px;
}
p.tight {
word-spacing: -0.5em;
}
/*字母间隔修改字符或字母之间的间隔*/
h1 {
letter-spacing: -0.5em
}
h3,h4 {
letter-spacing: 20px
}
/*字符转换*/
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
/*文本装饰*/
p.underline {text-decoration: underline}
p.overline {text-decoration: overline}
p.line-through {text-decoration: line-through}
p.blink {text-decoration: blink}
/*处理空白符*/
p.normal {white-space: normal;}
p.pre {white-space: pre;}
p.nowrap {white-space: nowrap;}
</style>
</head>
<body class="green">
<h1>CSS文本</h1>
<p id="t1">通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，
下面的规则会使所有段落的首行缩进 2 em：</p>
<p id="t2">text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种
显示问题，建议针对负缩进再设置一个外边距或一些内边距</p>
<p id="t3">text-indent 可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素
的第一行会缩进其父元素宽度的 20%。</p>
<div id="inner">text-indent 属性可以继承
<p>该段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值</p>
</div>
<p style="text-align:center;">文字居中</p>
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
<h4>中文字体可以选中字母间距</h4>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
<p class="underline">This is some text in a paragraph.</p>
<p class="overline">This is some text in a paragraph.</p>
<p class="line-through">This is some text in a paragraph.</p>
<p class="blink">This is some text in a paragraph.</p>
<p class="normal">This paragraph has many
spaces in it.</p>
<p>注释：当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符。</p>
<p class="pre">This paragraph has many
spaces in it.</p>
<p>注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。</p>
<p class="nowrap">
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
</body>
</html><html>
<head>
<title>css的默认样式</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#p1{
width:100px;
height:100px;
}
#p1{
background-color:rgb(0,255,255);
margin:10px 20px;
border:5px double green;
}
</style>
</head>
<body >
<p id="p1">frewfrew</p>
</body>
</html><html>
<head>
<title>css的字体样式</title>
<style type="text/css">
/*
#p1{
font-size:20px;
font-weight:900;
letter-spacing:10px;
word-spacing:20px;
font-family:楷体_GB2312;
}
*/
#p1{
font:italic bold 30px 宋体;
letter-spacing:10px;
word-spacing:20px;
}
</style>
</head>
<body class="green">
<p>正常的p</p>
<p id="p1">字体p1p1p1p hello world</p>
</body>
</html><html>
<head>
<title>css的列表样式</title>
<style type="text/css">
/*列表类型*/
ul.circle {list-style-type:circle} /*空心圆*/
ul.square {list-style-type:square} /*实心方块*/
ol.upper-roman {list-style-type:upper-roman} /*大写罗马数字*/
ol.lower-alpha {list-style-type:lower-alpha} /*小写英文字母*/
/*列表项图像*/
ul.image {list-style-image:url('li.png')}
/*列表标志位置*/
ul.inside {list-style-position: inside}
ul.outside {list-style-position: outside}
/*简写列表样式*/
ul.simple {list-style: square inside url('li.png')}
</style>
</head>
<body>
<p>Type circle:</p>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type upper-roman:</p>
<ol class="upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>Type lower-alpha:</p>
<ol class="lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>list-style-image:</p>
<ul class="image">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>在一个声明中设置所有的列表属性</p>
<ul class="simple">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
<html>
<head>
<title>css的表格样式</title>
<style type="text/css">
/*表格边框*/
#tb1,th,td {
border:1px solid blue;
}
/*折叠边框*/
#tb2{
border-collapse:collapse;
}
#tb2,th,td {
border:1px solid black;
}
/*表格宽度和高度*/
#tb3,td,th {border:1px solid black;}
#tb3{width:100%;}
#tb3 th{height:50px;}
/*表格文本对齐*/
#tb4,td,th {border:1px solid black;}
#tb4 td{text-align:right;}
/*表格内边距*/
#tb5,td,th {border:1px solid black;}
#tb5 td{padding:15px;}
/*表格颜色*/
#tb6,td,th {border:1px solid black;}
#tb6 th{
background-color:green;
color:white;
}
/*设置分隔单元格边框的距离*/
table.one {
border-collapse: separate;
border-spacing: 10px
}
table.two{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body>
<table id="tb1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table id="tb2">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table id="tb3">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table id="tb4">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table id="tb5">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table id="tb6">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table> </br></br></br>
<table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table> </br></br></br>
<table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table> </br></br></br>
</body>
</html>
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
