css 基础入门
CSS 概述
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，css 由此而生，css 是 Cascading Style Sheets 的字母缩写，意思是层叠样式表，有了 css，html 中大部分表现样式的标签就废弃不用了，html 只负责文档的结构和内容，表现形式完全交给 css
css 基本语法
css 的定义方法是：
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式，每个属性有一个或多个值，属性和值之间以键值对的形式存在
选择器{属性:值; 属性:值; 属性:值;} div{ width:100px; height:100px; background:gold; }
css 的引入方式（3种）
1）内联式
通过标签的 style 属性，在标签上直接写样式
<div style="width:100px; height:100px; background: blue;">div tag</div>
2）嵌入式
通过 style 标签，在网页上创建嵌入的样式表
<style type="text/css"> div {width:100px; height:100px; background: blue;} ...... </style>
3）外链式（推荐使用）
通过 link 标签，链接外部样式文件到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
css 选择器一
1）标签选择器（常用）
标签选择器的影响范围大，一般用来做一些通用设置，或用在层级选择器中
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } </style> <body> <div>one div tag</div> <div>two div tag</div> <div>three div tag</div> </body> </html>
2）类选择器（常用）
通过类名称来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是 css 中应用的最多的一种选择器
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> .box-size{ width: 100px; height: 100px; } .box-color{ background: blue; } .box-font-size{ font-size: 20px; } </style> <body> <div class="box-size">one div tag</div> <div class="box-color">one div tag</div> <div class="box-font-size">one div tag</div> </body> </html>
效果展示：
3）层级选择器（常用）
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .con{ width: 200px; height: 100px; background: green; } .con span{color: red;} .con .pink{color: pink} .con .gold{color: gold;} </style> <body> <div class="con"> <span>span tag</span> <a href="#", class="pink">a tag</a> <a href="#", class="gold">a tag</a> </div> </body> </html>
效果展示：
css 选择器二
1）组选择器（常用）
将多个选择器进行分组，如果有同样的样式设置，可以使用组选择器
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .box1{background: red;} .box2{background: pink;} .box3{background: gold;} .box1, .box2, .box3{ width: 100px; height: 100px; } </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
2）id 选择器
通过 id 来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id 作为选择器
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
#box{color: red;}
</style>
<body>
<p id="box">p tag</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>p tag</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>p tag</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
</body>
</html>
3）伪类选择器
常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .box1{width:100px; height:100px; background:gold;} .box1:hover{width:200px;height:200px;} </style> <body> <div class="box1">box1</div> </body> </html>
css 常用属性
布局常用样式属性：
-
width 设置元素(标签)的宽度，如：width:100px;
-
height 设置元素(标签)的高度，如：height:200px;
-
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
-
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
-
border-top 设置顶边边框，如：border-top:10px solid red;
-
border-left 设置左边边框，如：border-left:10px solid blue;
-
border-right 设置右边边框，如：border-right:10px solid green;
-
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
-
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
-
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
-
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
文本常用样式属性一：
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
样式中的注释
/* 设置头部的样式 */ .header{ width:960px; height:80px; background:gold; }
css 显示特性
display 属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- inline 元素以行内元素显示
- block 元素以块元素显示
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置
overflow 的设置项：
- visible 默认值。内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
css 权重
css 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后面写的样式会覆盖前面写的样式
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
- 内联样式，如：style=""，权重值为 1000
- ID 选择器，如：#con，权重值为 1000
- 类，伪类选择器，如：.con，:hover 权重值为 10
- 标签选择器，如：div，p 权重值为 1
权重的计算实例
demo1：
<style type="text/css"> div{ color:red; } </style> ...... <div style="color:blue">这是一个div元素</div> <!-- 两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000， 所以文字的最终颜色为blue -->
demo2：
<style type="text/css"> body #content .main_content h2{ color:red; } #content .main_content h2{ color:blue; } </style> ...... <div id="content"> <div class="main_content"> <h2>这是一个h2标题</h2> </div> </div> <!-- 第一条样式的权重计算： 1+100+10+1，结果为112； 第二条样式的权重计算： 100+10+1，结果为111； h2标题的最终颜色为red -->
ending ~
