css基础
一，css基本语法
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。
代码如下：
/* css注释 ctrl+shift+"/" */ <style type="text/css"> div{ width:100px; height:100px; color:red } </style>
css 代码一般放在<head> </head>标签 之间。
二，css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中。（比较常用）
<link rel="stylesheet" type="text/css" href="css/main.css"> href 是放css样式所在文件地址
代码如下：
外联式css代码：
div{ font: 20px; color: red; }
外联式HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css基本语法</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div>css外联式</div> </body> </html>
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。（常用于首页）
<style type="text/css">
div{ 100px; height:100px; color:red }
......
</style>代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css基本语法</title> <style type="text/css"> h1{font: 23px; color: blue} </style> </head> <h1>css嵌入式</h1> </body> </html>
3、内联式：通过标签的style属性，在标签上直接写样式（小部分用到）
<div style="100px; height:100px; color:red ">......</div>
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css基本语法</title> </head> <body> <a href="http//:www.baidu.com" style="font-size:23px; color:green">百度</a> </body> </html>
内嵌式直接在<body> </body>标签里面要引用标签的 style 属性 中直接写样式。
三，css文本设置
常用的应用文本的css样式：
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';
-
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
-
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的文本样式</title> <style type="text/css"> div{color: green; text-indent: 40px; /* font-size: 20px; font-family: "Microsoft Yahei"; line-height: 40px; */ font: normal 20px/40px "Microsoft Yahei" } span{color: red; font-size: 30px; } em{color: gold; font-style:normal; } p{text-align: center; font-weight: bold; } a{text-decoration: none; } h1{font-weight: normal; } </style> </head> <body> <h1>css常用样式</h1> <div> 为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，<span>CSS</span>是 <em>Cascading Style Sheets</em> 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。 </div> <p>这是一个p标签</p> <a href="http://www.baidu.com">百度网的链接</a> </body> </html>
效果如下：
四，css颜色表示法和css选择器：
1、标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style type="text/css"> /* 标签选择器（选择器影响范围大，建议尽量应用在层级选择器中） */ *{color: red; } div{font-size: 20px;} </style> </head> <body> <!-- 1.标签选择器 --> <div>标签选择器</div> </body> </html>
* 表示全部标签
2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <style type="text/css"> /* id选择器（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。） */ #box{ color: gold; font:bold 26px/40 "Microsoft Yahei"; } </style> </head> <body> <!-- 2.ID选择器 --> <div id="box">id标签选择器</div> </body> </html>
3、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style type="text/css"> /* 类选择器（通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。） */ .red{color: red;} .big{font-size: 20px;} .mtlo{margin: 10px;} </style> </head> <body> <!-- 3.类选择器 --> <div class="red">类选择器1</div> <p class=" red mtlo">类选择器2</p> <h1 class=" red big mtlo">类选择器3</h1> </body> </html>
4、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style type="text/css"> /* 层级选择器（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）*/ .box{ font-size:20px; line-height:30px; text-indent:40px; font-weight: bold; color: pink; } .box span{ color:red; font-weight:bold; } .box em{ font-style:normal; text-decoration:underline; font-weight:bold; color:pink; } .box .span02{ color:blue; } </style> </head> <body> <!-- 4.层级选择器 --> <div class="box">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突</em>。 层级选择器主要应用在选择父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。 层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。 </div> </body> </html>
5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组选择器</title> <!-- 多个选择器，如果有同样的样式设置，可以使用组选择器。 --> <style type="text/css"> /* 同样的样式放在一个组 */ .box1, .box2, .box3{font:bold 23px/40px "黑体";} /* 不同样的样式放在不同组 */ .box1{color: red;} .box2{color: pink;} .box3{color: gold;} </style> </head> <body> <div class="box1">这是第一个div</div> <div class="box2">这是第二个div</div> <div class="box3">这是第三个div</div> </body> </html>
6、伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类及伪元素选择器</title> <!-- 伪类选择器（常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态） --> <style type="text/css"> .link{ font: bold 18px/40px "黑体"; color: pink; } .link:hover{color: blue; font-style: italic; font-weight: bold;} /* 伪元素选择器（伪元素选择器有before和after,它们可以通过样式在元素中插入内容。） */ .box01,.box02{ font-size:20px; } .box1:before{content: "."; color: red;} .box2:after{content: "。"; color: gold;} </style> </head> <body> <p class="link">常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。</p> <div class="box1">伪元素</div> <div class="box2">伪元素</div> </body> </html>