css小结
什么是css？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
（来自 百度百科）
层叠样式表是核心关键词，其中样式表负责美化，层叠标志样式不会被取代而只会被覆盖。
css选择器
基础选择器
- html选择器
- id选择器
- class选择器
当选择器冲突时，谁更精确就听谁的
精确度：id选择器>class选择器>html选择器
html标签选择器
通过html标签名来选择元素
① 所有的html标签都可以当做选择器
② 无论标签藏多深都会被选中
③ 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。
id选择器
① 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。
大小写敏感 ，id的名字中可以有数字字母下划线，但是要以字母开头。
驼峰命名法 小驼峰命名 大驼峰命名
testHeader 小驼峰 TestHeader 大驼峰
test-header test_header
② 但是id名不能够重复
class选择器
① 任何的标签都可以使用class属性(class属性也是一个全局属性)
② class属性名可以重复使用
③ 一个class属性中，可以有多个class属性值。
测试:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*html标签选择器 */
p {
color: red;
}
/*id选择器*/
#d1 {
color: green;
}
/*class选择器*/
/*class可以重复使用*/
.e1 {
color: blue;
}
</style>
</head>
<body>
<!-- 不够精确 -->
<p>
我是第一个p标签
</p>
<p>
我是第二个p标签
</p>
<p>
adasdas
</p>
<div id="d1">
我是一个div
</div>
<!-- title id class -->
<em class="e1">我是em，表示强调</em>
</body>
综合选择器
-
后代选择器 div p
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*后代选择器*/ .d1 span { color: blue; } </style> </head> <body> <div class="d1"> <span>我是一级span</span> <div class="son"> <span>我是二级span</span> <div class="d2"> <span>我是三级span</span> </div> </div> </div> </body> -
交集选择器 div.d1
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*选中div，并且这个div的名字叫d1*/ div.d1 { color: red; } /*选中em,并且这个em的名字叫d1*/ em.d1 { } </style> </head> <body> <div class="d1">我的名字叫d1，我是一个div</div> <h1 class="d1">我的名字也是d1 ，但是我是一个h1</h1> <em class="d1">我是em，我的名字也是d1</em> <div>我是一个没有名字的div</div> </body> -
并集选择器 div,p
<head> <meta charset="UTF-8"> <title>Document</title> <style> .d1,p,em { color: red; } </style> </head> <body> <div class="d1">我是一个div</div> <p>我是第一个p标签</p> <em>我是em标签 </em> <p>我是第二个p标签</p> </body> -
子（直系儿子）元素选择器 div>p
<head> <meta charset="UTF-8"> <title>Document</title> <style> #fa>em { color: red; } </style> </head> <body> <div id="fa"> <em>我是二级em</em> <div class="son"> <em>我是三级em</em> <div> <em>我是四级em</em> </div> </div> </div> </body> -
序列选择器 ul li:first-child ul:li:last-child
/*只能选中第一个和最后一个*/ <head> <meta charset="UTF-8"> <title>Document</title> <style> ul li:first-child { color: red; } ul li:last-child { color: blue; } </style> </head> <body> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> </body> -
相邻兄弟选择器 div + p
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*相邻兄弟选择器*/ div + p { color: red; } </style> </head> <body> <div>我是div</div> <p>我是p标签</p> <p>我是第二个p标签</p> </body> -
普通兄弟选择器 div ~ p
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*普通兄弟选择器*/ div ~ p { color: red; } /*p + p { color: blue; }*/ </style> </head> <body> <div>我是div</div> <p>我是p标签</p> <p>我是第二个p标签</p> </body>
继承和层叠
- 继承：父元素的某些css属性会被子元素无条件的继承过去。
关于文字的css属性都可以进行继承，如：color text- line- font- 等 - 层叠：层叠解决的是css冲突的问题。
css冲突时，比较权重来解决层叠问题。
!important 能够把"单独属性"的权重变为无限大。 尽量少用。
继承测试：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">
<span>hello,world</span>
</div>
</body>
权重比较：先看是否选中标签，若选中，则按照id，class，html的顺序比较，当权重相同时，就近原则；若没有选中，则就近原则。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*id class html */
#box1 .hezi2 p { /* 1 1 1*/
color: red;
}
div div #box3 p { /*1 0 3*/
color: green;
}
div.hezi1 div.hezi2 div.hezi3 p { /*0 3 4 */
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
块级元素和行内元素
块级元素和行内元素的区别：
1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
2. 块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
3. 如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。
块级元素和行内元素之间的转换：
display: inline block inlin-block
块级元素和行内元素之间的转换测试：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1 {
300px;
height: 300px;
background-color: blue;
display: block;/*将行内元素变成块级元素*/
}
em {
300px;
height: 300px;
background-color: green;
display: inline-block; /*行内块元素*/
}
.d1 {
300px;
height: 300px;
background-color: red;
display: inline-block;
}
.d2 {
300px;
height: 300px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="d1">Hello,Div</div>
<span class="s1">hello,Span</span>
<em>hello,Em</em>
<hr>
<div class="d1"></div>
<div class="d2"></div>
</body>