CSS | 易学教程

CSS的四种引入方式：

一、行内样式

<div style="background-color: blue;color: brown">cairui</div>

二、

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             background-color: blue;             color: darkgoldenrod;         }     </style> </head> <body>      <p>cai</p>     <div>rui</div> </body> </html>

三、写一个css文件，把内容放在里面引用

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         @import "1.css";     </style> </head> <body>      <p>cai</p>     <div>rui</div> </body> </html>

四：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <link href="1.css" type="text/css" rel="stylesheet"> </head> <body>      <p>cai</p>     <div>rui</div> </body> </html>

基本选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         #www{             background-color: chartreuse;             color: brown;         }     </style> </head> <body>      <p id="www">cai</p>     <div>rui</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         .www{             background-color: chartreuse;             color: brown;         }     </style> </head> <body>      <p class="www">cai</p>     <div>rui</div> </body> </html>

id是唯一的（类似身份证），class是可重复的

组合选择器：

E,F　　多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         p,div{             background-color: chartreuse;             color: brown;         }     </style> </head> <body>      <p class="www">cai</p>     <div>rui</div> </body> </html>

E F　　后代元素选择器，匹配所有属于E后代的F元素，E和F之间用空格分隔

E>F　　子元素选择器，匹配所有E元素的子元素F

E F　　毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

伪类选择器：

专用于控制链的显示效果，伪类选择器：

　　a:link（没有接触过的链接），用于定义链接的常规状态

　　a:hover（鼠标放在链接上的状态），用于产生视觉效果

　　a:visited（访问过的链接），用于阅读文章，能清楚的判断已经访问过的链接

　　a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态

伪类选择器：伪类指的是标签的不同状态：

　　a ==>点过的状态没有点过的状态鼠标悬浮状态激活状态

　　 a:link{color:#FF0000}/*未访问的链接*/

　　 a:visited{color:#00FF00}/*已访问的链接*/

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         a:link{             color: red;         }         a:hover{             color: chartreuse;         }         a:visited{             color: darkgray;         }         a:active{             color: yellow;         }     </style> </head> <body>     <a href="http://www.baidu.com">点击</a> </body> </html>

CSS的属性：

1、颜色属性

<div style="color: red">cairui</div>  <div style="color: #00bFFF">cairui</div>

2、字体属性

font-size: 50px;  font-family: 宋体;  font-weight: 100;    #加粗

3、背景属性

background-color: red;  background-image: url("task.PNG");    #背景图片  background-repeat: no-repeat;    #背景图片不重复  background-position: right top;    #背景图片所在的位置

4、文本属性

font-size: 10px;

text-align: center;横向排列

line-height: 200px；文本行高，通俗讲，文字高度加上文字上下的空白区域的高度50%；基于字体大小的百分比

text-indent: 150px;首行缩进，50%；基于父类（weight）的百分比

letter-spacing: 10px;

5、边框属性

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             height: 100px;             width: 50px;             background-color: red;             border-style: solid;    #边框为实线边框             border-color: blue;     #边框颜色             border-width: 20px;     #边框高宽          }     </style> </head> <body>     <div></div> </body> </html>

6、列表属性

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         ul{             list-style: decimal-leading-zero;   #01,02,03开头             list-style: none;   #去掉开头的样式                      }      </style> </head> <body>     <ul>         <li>1</li>         <li>2</li>         <li>3</li>     </ul> </body> </html>

7、dispaly属性

none
block
inline

改变一个文本是块级标签还是内联标签。还有none是使其消失。

8、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             background-color: darkgray;             width: 300px;             border:25px solid green;    #边框             padding: 25px;      #内边距             margin: 25px;       #外边距          }      </style> </head> <body>     <div>内容</div> </body> </html>