一、CSS选择器
CSS选择器分为：
- id选择器
- class选择器
- 标签选择器
- 层级选择器（空格）
- 组合选择器（逗号）
- 属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<!--CSS选择器-->
<style>
/*id选择器*/
#i1{
background-color: #0000CC;
width: 200px;
height: 200px;
}
/*最常用class 选择器*/
.c1{
background-color: red;
width: 100px;
height: 100px;
}
/*标签选择器*/
/*html标签下，所有的div标签都增加这个样式*/
div{
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--id在html页面当中，只允许出现一次，即不允许重名-->
<!--class在html页面可以重名，实际工作中，用class选择器比较多-->
<!--id选择器-->
<div id="i1">这是id选择器</div>
<!--class选择器-->
<div class="c1">这是class选择器</div>
<div class="c1">这是class选择器2</div>
<!--标签选择器-->
<div>这是标签选择器</div>
<div>这是标签选择器2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<!--CSS选择器-->
<style>
/*层级选择器*/
div span{
background-color: #7FFFD4;
}
/*id层级选择器*/
#i1 span{
background-color: #DEB887;
}
/*class 层级选择器*/
.c1 span{
background-color: red;
}
</style>
</head>
<body>
<!--层级选择器-->
<div>
<span>
使用层级选择器
</span>
</div>
<!--id层级选择器-->
<div id="i1">
<span>
使用id层级选择器
</span>
</div>
<!--class层级选择器-->
<div class="c1">
<span>
使用class层级选择器
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<!--CSS选择器-->
<style>
/*组合选择器 id i1 i2 i3 共用一套css样式 组合 通过逗号*/
#i1,#i2,#i3 {
background-color: #0000CC;
width: 100px;
height: 48px;
}
/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1,.s2,.s3{
background-color: darkmagenta;
width: 100px;
height:48px;
}
/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[s='jamie']{
background-color: darkred;
width: 100px;
height: 48px;
}
</style>
</head>
<body>
<!-- id组合选择器 -->
<div id="i1">我是i1</div><br>
<div id="i2">我是i2</div><br>
<div id="i3">我是i3</div><br>
<!--class组合选择器-->
<div class="s1"></div><br>
<div class="s2"></div><br>
<div class="s3"></div><br>
<!-- 属性选择器 -->
<div s="jamie"></div>
</body>
</html>
二、CSS优先级
样式表引入方法
css样式引入分为三种
- 在div标签中，增加style属性
- 在head标签中，增加style标签
- 在link标签中，引入css文件
c.css文件为
.c1{
background-color: red;
width: 40px;
height: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<!--第三种，在link标签中引入css样式表-->
<!--stylesheet 表示引入css样式，href指定具体引入的css样式-->
<link rel="stylesheet" href="c.css">
<style>
/*第二种，可以在head中增加style标签通过选择器定位标签，增加css样式*/
.s1{
background-color: #7FFFD4;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<!--第一种增加css样式的方法，在标签中增加style属性-->
<div style="background-color: blue;width: 80px;height: 80px"></div><br>
<div class="c1"></div><br>
<div class="s1"></div><br>
</body>
</html>
样式表的引用顺序
样式表的引用关系，以标签为起始位置，由下往上寻找css样式进行显示
c1.css文件
.c1{
background-color: pink;
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第三种link标签-->
<link rel="stylesheet"href="c1.css">
<!--第二种head中的style标签-->
<style>
.c1{
background-color: red;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<!--第一种div中的style属性-->
<div class="c1" style="background-color: blue;width: 40px;height: 40px"></div>
<!--样式表的引用关系，以标签为起始位置，由下往上寻找css样式进行显示-->
</body>
</html>
三、CSS属性
CSS属性有很多，详见http://www.w3school.com.cn/cssref/index.asp，这里只介绍一些常见的。
| 属性 | 属性组 | 描述 |
|---|---|---|
| background | 背景属性（Background） | 在一个声明中设置所有的背景属性。 |
| background-color | 背景属性（Background） | 设置元素的背景颜色。 |
| border | 边框属性（Border 和 Outline） | 在一个声明中设置所有的边框属性。 |
| height | 尺寸属性（Dimension） | 设置元素高度。 |
| width | 尺寸属性（Dimension） | 设置元素的宽度。 |
| font | 字体属性（Font） | 在一个声明中设置所有字体属性。 |
| font-size | 字体属性（Font） | 规定文本的字体尺寸。 |
| font-weight | 字体属性 （Font） | 规定字体的粗细。 |
| line-height | 文本属性（Text） | 设置行高。 |
| text-align | 文本属性（Text） | 规定文本的水平对齐方式。 |
| margin | 外边距属性（Margin） | 在一个声明中设置所有外边距属性。 |
| padding | 内边距属性（Padding） | 在一个声明中设置所有内边距属性。 |
| display | 定位属性（Positioning） | 规定元素应该生成的框的类型。 |
| float | 定位属性（Positioning） | 规定框是否应该浮动。 |
| position | 定位属性（Positioning） | 规定元素的定位类型。 |
| z-index | 定位属性（Positioning） | 设置元素的堆叠顺序。 |
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<!--边框属性-->
<!-- 边框 border：宽度 实线还是虚线 颜色-->
<div style="height: 30px;border: 1px solid red"></div><br>
<!-- 边框 border 上下左右边框 都可单独配置 -->
<div style="height: 30px;border-left: 1px dotted red"></div><br>
<!--尺寸属性-->
<!-- height：高 width：宽 -->
<div style="height: 30px;width: 30px;border: 1px solid red"></div><br>
<!-- 宽高的设定可以是指定的像素 也可以是百分比 -->
<div style="height: 30px;width: 30%;border: 1px solid red"></div><br>
<!--字体属性 -->
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 30px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
<!--文本属性-->
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 30px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">jamie</div>
<!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">jamie</div>
<!--定位属性-->
<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会在一行 如果超过宽度超过100则会换行-->
<div style="background-color: aqua;width: 20%;float: left">1</div>
<div style="background-color: red;width: 10%;float:left;">2</div>
<div style="background-color: pink;width: 20%;float:right;">3</div>
<!-- 块级标签的占满100%是相对来说，相对于他外层的div -->
<div style="width: 400px;height: 400px;border: 1px solid black;">
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: pink;float:left;"></div>
</div>
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<div style="height: 100px;background-color: pink;display: inline">外联标签</div>
<!-- display：block 内联标签转换为块级标签-->
<span style="height: 100px;background-color: red;display: block;">内联标签</span>
<!--内外边距属性 外边距 margin， 内边距 padding-->
<!-- 行内标签：有多大占多大，无法设置高度、宽度、padding、margin-->
<!-- 块级标签：可以设置高度、宽度、padding、margin-->
<span style="background-color: blue;width: 100px;height: 100px;">jamie</span>
<!-- 通过display:inline-block 可以完美的解决这个问题;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">jamie</span>
<!-- 让标签消失;display：none-->
<span style="background-color: #7FFFD4;display: none">我不显示的</span>
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="border: 1px solid black;height: 100px">
<div style="background-color: pink;height: 30px;margin-top: 30px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: pink;height: 70px;padding: 10px">内边距增加</div>
</div>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
