CSS的设置方式：
<head>
<title></title>
<!--如果写在前面,则嵌入的会把外部的给覆盖-->
<!--<link rel="stylesheet" type="text/css" href="CSS外部样式表.css" />-->
<!--设置方式2,嵌入样式表,写在head中,如下写法直接控制所有的p标签,但是优先级比内敛样式表低-->
<style type="text/css">
p {
background-color: green;
font-size: xx-large;
}
</style>
<!--设置方式3,外部样式表,把外部样式表连接进来,rel设置引入的为样式表,type设置格式类型为CSS,href设置引入的样式表路径-->
<!--在3中设置方式中,内联样式表的优先级最高,嵌入样式表和外部样式表的优先级相同,谁最后执行谁的样式其效果-->
<!--如果写到下面,则嵌入的会把外部的给覆盖-->
<link rel="stylesheet" type="text/css" href="CSS外部样式表.css" />
</head>
<body>
<!--设置方式一,内联样式表,直接在标签上使用标签的属性来设置样式-->
<p style="background-color:red;font-size:x-large">今天天气好晴朗,处处好分风光</p>
<p>今天天气好晴朗,处处好分风光</p>
<p>今天天气好晴朗,处处好分风光</p>
<p>今天天气好晴朗,处处好分风光</p>
<p>今天天气好晴朗,处处好分风光</p>
<p>今天天气好晴朗,处处好分风光</p>
</body>
CSS样式选择器：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--样式选择器-->
<style type="text/css">
/*
1.html选择器,优点是对所有标签设置相同的属性
缺点是不能个性化的设置
*/
p {
background-color: red;
}
/*
2.class选择器,先为标签设置class的值,然后精确的堆标签的classs属性设置格式
class选择器一般对同一个标签的多个对象设置相同的显示格式
*/
p.c1 {
background-color: blue;
font-size: large;
}
p.c2 {
background-color: yellow;
font-size: small;
}
/*
3.ID选择器,设置标签的ID值,然后使用#选择对应的ID值来设置对应的格式
注意,应为ID是唯一的,所以ID与CLASS的区别就是只能设置一个标签的格式
*/
#p1 {
background-color: gold;
font-size: large;
}
#p2 {
background-color: gray;
}
/*
4.关联选择器,意思是选择p标签内的em标签
如果只有一个单独的em标签则不会被选择到
*/
p em {
background-color: blueviolet;
}
/*
5.组合选择器,都好分割,相当于是直接html选择器使用了多个标签对象
*/
h1, h2, h3, h4, h5, h6, td {
background-color: yellow;
}
/*
6.伪元素选择器
超链接的伪元素选择器
p元素的伪元素选择器
*/
a:link { /*设置超链接的属性*/
background-color: yellow;
font-size: x-large;
}
a:hover { /*光标移动到超链接上时的格式设置*/
font-size: xx-large;
}
a:visited { /*点击之后超链接的格式设置*/
color: gray;
}
a:active { /*鼠标点击的时候*/
background-color: red;
}
p::first-line { /*选择第一行进行格式设置*/
background-color: gold;
font-size: x-large;
}
p:first-letter { /*选择第一行的第一个字进行格式设置*/
font-size: xx-large;
}
</style>
</head>
<body>
<p class="c1">标签的选择器</p>
<p class="c1">标签的选择器</p>
<p class="c2">标签的选择器</p>
<p class="c2">标签的选择器</p>
<p id="p1">标签的选择器</p>
<p id="p2">标签的选择器</p>
<p><em>标签的选择器</em></p>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
</tr>
<tr>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
</tr>
<tr>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
<td>hhhhh</td>
</tr>
</table>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<p>床前明月光,疑是地上霜<br />剧透望明月,低头思故乡</p>
</body>
CSS相关属性：
margin与padding
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--margin设置盒子与盒子之间的间距
padding设置盒子中的内容与盒子的间距-->
<style type="text/css">
* {
margin: 0px;
}
div {
width: 300px;
height: 300px;
}
div.div1 {
background-color: violet;
}
div.div2 {
background-color: gold;
margin-left: 20px;
margin-top: 40px;
}
div.div3 {
background-color: blue;
}
div.div1 p {
padding-top: 30px;
padding-left: 50px;
}
</style>
</head>
<body>
<div class="div1">
<p>我是DIV中的P标签</p>
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
背景：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div.div1 {
/*设置div的高度*/
height: 1000px;
/*设置背景色*/
background-color: violet;
/*设置背景图片*/
background-image: url(images/1.jpg);
/*设置平铺的方式,水平/竖直/不平铺(图片不够大的时候只显示一个图片,其他地方留白)*/
background-repeat: no-repeat;
/*如果background-repeat: no-repeat,可以设置图片的其实位置,reght/left/center*/
background-position: center;
/*设置背景图片不随滚动条的滚动而滚动*/
/*background-attachment: fixed;*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
边框和display：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
p {
border-top-color: red;
border-top-width: 1px;
border-top-style: solid;
/*border-bottom:1px solid red;*/
}
</style>
</head>
<body>
<p>回家吃饭</p>
<div style="display:inline">我是一个DIV</div><!--设置DIV的display属性为inline,可以使div变成span,而不再独占一行-->
<span style="display:block">我是一个SPAN</span><!--设置span的display属性为block,则把span变成div,让span独占一行-->
<span>我也是一个SPAN</span>
</body>
位置:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--
position: absolute;绝对定位,在设置top和left之后只有设置绝对定位才会其效果,不然仍然遵循文件流的格式排列
如果设置为fixed,则直接固定位置,不管滚动条如何拖动都不会跟着页面移动
绝对定位,设置位置属性定位到哪里就在哪里显示
文件流:就是所有的控件都是按照从上到下,从左到右的规则排序
z-index: 1;设置显示的层级优先级,设置值越大在显示的成熟越靠前
-->
<style type="text/css">
div {
height: 250px;
width: 200px;
}
div.div1 {
background-color: red;
/*float: left;*/
top: 100px;
left: 100px;
position: absolute;
z-index: 1;
}
div.div2 {
background-color: yellow;
/*float: left;*/
top: 130px;
left: 130px;
position: absolute;
}
div.div3 {
background-color: violet;
/*float: left;*/
top: 160px;
left: 160px;
position: absolute;
}
div.div4 {
background-color: gold;
/*float: left;*/
right: 0px;
bottom: 0px;
position: fixed;
}
div.div5 {
background-color: black;
height: 10000px;
width: 200px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
文本：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div.div1 p {
background-color: yellow;
word-spacing: 20px; /*单词之间的间距,这里如果是汉字,如果有空格,则空格前后的部分为两个单词,如果没有空格则表示没有单词*/
word-wrap: inherit; /*不可换行的字符串应为过长而溢出的时候,指定换行方式*/
letter-spacing: 20px; /*指定字符之间的间隔,默认为0*/
}
div.div2 p {
background-color: blue; /*设置标签p的背景色*/
color: red; /*设置标签p中的字体颜色*/
text-align: center; /*设置标签p中文本的对齐方式,left/right/center */
line-height: 40px; /*设置p标签的高度*/
}
</style>
</head>
<body>
<div class="div1">
<p>学 了 不 一 定会,会了不一定能找到工作，找到工作不一定高薪，高薪不一定能买得起房子，买得起房子不一定能取得其老婆，取得其老婆不一定能以下省略一千字。。。。</p>
</div>
<div class="div2">
<p>好好学习,天天向上</p>
</div>
</body>
字体：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
p {
font-family: 'Comic Sans MS'; /*指定字体的系列*/
font-size: x-large; /*设置字体的大小*/
color: green; /*设置字体颜色*/
background-color: gold; /*设置p标签的背景颜色*/
font-style: italic; /*设置字体倾斜*/
text-decoration: underline; /*设置下划线,上划线,删除线*/
text-decoration-color: blue; /*设置下划线的颜色*/
}
a {
text-decoration: none; /*超链接默认添加下划线,可以把他去掉*/
}
</style>
</head>
<body>
<p>今天吃100个茶叶蛋</p>
<p>今天吃100个茶叶蛋</p>
<a href="#">超链接</a>
</body>