Chapter 1 CSS、HTML基础知识
浏览器属性前缀问题
| -webkit | webkit核心浏览器 Chrome、Safari |
|---|---|
| -moz | Firefox |
| -ms | IE |
| -o | Opera |
eg：
.transform{
-webkit-transform:rotate(-3deg); //带有Chrome、Safari浏览器属性
-moz-transform:rotate(-3deg); //带有Firefox浏览器属性
-ms-transform:rotate(-3deg); //带有IE浏览器属性
-o-transform:rotate(-3deg); //带有Opera浏览器属性
//标准属性放在最后书写
transform:rotate(-3deg); //标准属性
}float浮动
| none | 默认值，不浮动 |
|---|---|
| inherit | 继承父元素的float值（不建议使用，IE不支持） |
| left | 向页面左侧浮动 |
| right | 向页面右侧浮动 |
1、对于块级元素来说，如果不设置浮动其默认的宽度是100%。此时设置浮动则其宽度随文字长度变化。
2、默认情况下父元素高度会随着子元素内容进行调整，但是将子元素设置为浮动后，父元素高度为0。
3、浮动的元素脱离了文档流，但元素中的内容依旧占据空间。
clear清除浮动
| left | 左侧不允许出现浮动元素 |
| right | 右侧不允许出现浮动元素 |
| both | 清除两侧浮动中对自己影响最大的那一侧浮动 |
1、在需要的地方添加clear：both标签。
2、对父元素使用:after伪类。
<body>
<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<style>
.clearfix:after{
content: "020";
display: block;
height: 0; /*此时clearfix的高度为0*/
clear: both; /*清除父元素clearfix的浮动，clearfix的高度不为0了*/
}
.clearfix{
zoom: 1;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</body>position定位
| static | 默认值 |
| relative | 相对位置 |
| absolute | 绝对位置 |
| fixed | 相对于浏览器窗口的定位 |
| inherit | 继承父元素的定位属性 |
1、relative和static都是相对于其他元素进行定位的，都属于相对定位的范畴。
2、如果使用static默认值，则在CSS中为元素定义top、left、right、bottom、z-index都无效。也就是说想要设值元素的top、left、right、bottom、z-index值必须用position属性（static除外）。
3、absolute是相对于上一个不为static的父元素进行绝对定位的，否则将相对html进行绝对定位。
3、absolute和fixed时，未定义宽度的元素不再是100%，根据内容自动调整；不定义z-index时，absolute元素会覆盖在其他元素之上；会脱离正常的文档流，不占据空间，类似于浮动后的效果。
<body>
<div class="container">
<div class="absolute">绝对定位</div>
</div>
<style>
.container{
margin: auto;
width: 960px;
height: 300px;
position: relative; /*如果没有这句 则子元素是按照整个html进行定位*/
}
.absolute{
position: absolute;
top: 0;
left: 0;
}
</style>
</body>
4、fixed是相对于浏览器窗口的定位，即无论页面如何滚动，该元素始终停留在屏幕上某个位置。
Chapter 2 选择器
选择器包括基础选择器和伪类选择器。
基础选择器：标签选择器、类选择器（class选择器）、id选择器、通配符选择器、子元素选择器、后代元素选择器、相邻元素选择器、属性选择器、组选择器、复合选择器。
伪类选择器：结构化伪类、目标伪类（target）、状态伪类、否定伪类（not（S））。
1、基础选择器
- 标签选择器：定义全局样式。
<body>
<h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
<h2>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB</h2>
<h3>CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</h3>
<h4>DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</h4>
<h5>EEEEEEEEEEEEEEEEEEEEEEEEEEEEE</h5>
<h6>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</h6>
<style>
h1,h2,h3,h4,h5,h6{
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: blueviolet;
text-rendering: optimizeLegibility;
}
h1,h2,h3{
line-height: 40px;
}
h1{font-size: 38.5px;}
h2{font-size: 31.5px;}
h3{font-size: 24.5px;}
h4{font-size: 17.5px;}
h5{font-size: 14px;}
h6{font-size: 11.5px;}
</style>
</body>
- 类选择器（class选择器）
语法： 在class名称前加 . 符号
类选择器是最灵活、应用最广泛的选择器。
- id选择器
语法：在id名称前面加 # 符号
一个HTML元素只能对应一个id，故灵活性不如class选择器。
id选择器拥有最高的权重，可以用于覆盖之前的一些定义。
和后台数据对应，从而配合JavaScript进行一些逻辑操作。
- 通配符选择器
通配符是指用一个符号代替某些字符。语法关键词是 * 。该选择器以 * 开始，可以与任意元素匹配。
通配符选择器的权重最低，只要求其他的定义，通配符选择器的定义就会被覆盖。
- 子元素选择器
用于严格的父子关系。语法为 > 符号
<body>
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>
<style>
li>a{
color: yellowgreen;
}
</style>
</body> 
- 后代元素选择器
后代选择器类似于子元素选择器，要求没有那么严格，只要是父元素的后代元素即可。
语法关键词是空格。
<body>
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>
<style>
li a{
color: yellowgreen;
}
</style>
</body>
- 相邻元素选择器
用于选取和某个元素相邻的同级元素。要求二者必须拥有同一个父元素且二者相邻。
语法关键词为 + 符号。
- 属性选择器
有些标签可以添加属性，例如title、href、name等。语法关键词是 [ ] 符号。
属性选择器可以链式调用，从而缩小选择范围。
[title]{
color:red;
}
a[href][title]{
color:red;
}
a[href="www.baidu.com"][title="百度"]{
color:red;
}还可以使用通配符进行模糊匹配。
a[src^="https"] /*选择其src属性值以"https"开头的每个<a>元素*/
a[src$=".pdf"] /*选择其src属性以".pdf"结尾的每个<a>元素*/
a[src*="abc"] /*选择其src属性中包含"abc"子串的每个<a>元素*/- 组选择器
语法关键词是 , 符号。组选择器相当于一种并集，或者常说的“或”的关系。
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}- 复合选择器
语法关键词是 . 符号，注意符号前不能有空格符，否则会被识别为后代选择器。
复合选择器可以说是“与”的关系。
应用复合选择器的时候，标签选择器要写在最前面，否则无法识别。
<body>
<p class="test">hehe</p>
<div>hehe</div>
<div class="test">hehe</div>
<p>hehe</p>
<style>
p.test{ /*表示同时满足p元素和class="test"两个条件*/
color: red;
}
div.test{ /*表示同时满足div元素和class="test"两个条件*/
color: blue;
}
</style>
</body>
2、伪类选择器
伪类表示元素的状态：排序、鼠标是否悬停、是否已被访问过、光标是否指向等。
也就是说使用伪类选择器可以得知有鼠标悬停的元素、父元素下的第n个子元素、已被访问过的链接等使用基本选择器无法进行区分的元素。
- 结构化伪类
可以根据文档结构来选取元素。
基础样例：
<body>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<ul class="test_one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<style>
ul>li{
display: inline-block;
height: 24px;
line-height: 24px;
width: 24px;
font-size: 15px;
text-align: center;
background-color: rgb(226, 129, 129);
border-radius: 4px;
margin: 5px;
}
</style>
</body>
以下皆以此样例为基础。
1. :nth-child(n)
n表示一个简单的表达式，可以使大于等于0的整数。
li:nth-child(2){ /*表示取某父元素下<li>元素的第二个*/
background-color: #333;
color: white;
}n不仅仅指定某个特定值，譬如：
li:nth-child(n){ /*n相当于全选*/
background-color: #333;
color: white;
}另外，括号内为2n则表示所有偶数项；3n则表示3、6、9、...项；2n+1表示奇数项；n+5表示从第五个元素开始进行全选。
2. :nth-last-child(n)
与 :nth-child(n)选择器获取元素的顺序相反，从最后一个元素开始计算。
3. :nth-of-type(n)
例如 li:nth-of-type(3) 表示第三个<li>元素，对所查询元素的类型有所约束。
如果前面不加类型，例如 :nth-of-type(1) 表示自动选择所有并列元素的第n个。
:nth-of-type(2){
background: red;
}该表达式则表示将每一层的第2个元素背景设置为红色。第一层为body层，无第二个元素；第二层为ul层和div层，无第二个元素；第三层为li层，有第二个元素设置为红色。
4. :nth-last-of-type(n)
与 :nth-of-type(n)选择器获取元素的顺序相反，从最后一个元素开始计算。
5. :first-child
表示选择元素的第一个元素。
6. :last-child
表示选择的是元素的最后一个子元素。
7. :first-of-type
相当于:nth-of-type(1)
8. :last-of-type
相当于:nth-last-of-type(1)
9. :only-child
限定某父元素只有一个子元素，该选择器才会生效。
10. :only-of-type
基本同 :only-child ，区别在于如果不指定type，该语句会对body生效。
11. :root
表示选择文档的根元素。对于HTML文档来说，根元素永远是<html>标签。因此以下两种写法效果一致。
:root{
background: black;
}
html{
background: blue;
}12. :empty
表示选择没有任何内容的元素。
例如：有三个p标签，其中一个没有任何内容明确占据空间，想让没有内容的段落也不占据空间则可以用此语句定义。
<body>
<p>aaaaaaaaaaa</p>
<p></p>
<p>ccccccccccc</p>
<style>
p:empty{
display: none;
}
</style>
</body>- 目标伪类：target
用于选取当前活动的目标元素。
<body>
<a href="#a1">跳转至内容1</a>
<a href="#a2">跳转至内容2</a>
<p id="a1"><b>内容1</b></p>
<p id="a2"><b>内容2</b></p>
<style>
:target{
border: 2px solid #d4d4d4;
background-color: #e5eecc;
}
</style>
</body>
- 状态伪类
1. :enable 和 :disabled
前者用于选择所有可用的元素，后者用于选择所有已被禁用的元素。
不建议使用，可以采用属性选择器来代替：
/*将被禁用的input元素设置为透明*/
input:disabled{
opacity: 0;
}
input[disabled]{
opacity: 0;
}两者效果一致。
2. :checked
用于选择所有被选中的checkbox或者radio标签。
input:checked{
opacity: 0;
}
input[checked]{
opacity: 0;
}3. :indeterminate 和 :default
前者用于指定当页面打开时，某组中的单选框或复选框元素还没有选取状态时的样式。
后者用于指定当前元素处于非选取状态的单选框或复选框的样式。
这两个选择器只有Opera浏览器支持，不建议使用。
- 否定伪类 :not(S)
该伪类使用使得我们在针对某些特例进行排除时更为方便。
:not(selector) 选择器匹配非指定元素、选择器的每个元素。
:not(p){ /*表示将除了<p>标签以外的所有HTML元素的背景颜色设置为红色*/
background-color: red;
}可以配合其他选择器一起使用。
div :not(.test){ /*表示将在div标签的子元素中，class不为text的所有元素背景设置为红色*/
background-color: red;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
