|
伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
input:focus{
background: #0E5C2F;
}
</style>
</head>
<body>
<!--
伪类选择器
：link -表示普通的链接（就是没有访问过的链接）
：visited -表示访问过的链接 (只能设置字体颜色)
: hover -伪类表示鼠标悬浮在标签上出发的状态
：active -表示点击不松鼠标所触发的状态
：fous -获取焦点可以通过Input标签来演示
:: selection -为p标签选中的文本内容使用样式
注意：selection 伪类在火狐中需要用另外的编写方式 格式为 ::-moz-selection
伪类的顺序为：link
visited
hover
active
-->
<input type="text">
</body>
</html>
伪元素使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
p:before{
content:"大家好我系渣渣会";
color: red;
}
</style>
</head>
<body>
<!--
伪元素： 表示元素中的一些特殊的位置添加一个伪类元素
：first-letter -为p中第一个字符设置一个特殊的样式
：first-line -为p中的第一行设置一个背景颜色
：before - 表示元素最前边的部分
：after - 表示元素最后面的部分
注意：
after 和before都需要结合content这个样式 一起使用并且content制定的文字不能被选定
example :
p:before{
content:"大家好我系渣渣会";
color: red;
}
-->
<p>山文甲顾名思义，是指甲片形状如汉字的“山”字。札法十分独特，为“错札法”，即通过甲片与甲片互相枝杈咬错成甲。据说如果甲片制造精巧划一的话，制成全甲甚至不需一个甲钉，不需一缕丝线。山文甲自唐代引入中国后，逐渐被广泛应用，成为宋明时期常见的甲式。因此，从某种程度上说，它可算作中式甲的典范，西方人称为“中国之星”，日本人称为“唐甲</p>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
p:before{
content:"大家好我系渣渣会";
color: red;
}
</style>
</head>
<body>
<!-- title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的之将会作为提示文字
eg:
<p title>大家好我是渣渣灰</p>
属性选择器：
格式：p[属性名]{
......
}
p[属性名=XXXX]{
}
p[属性名^=xxxx]{ 以XXXX开头的属性值
}
p[属性名$=xxxx]{ 以XXXX结尾的属性值
}
p[属性名*=xxxx]{ 包含属性值为XXXX
}
p[属性名~=num]{ 选中属性的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a 属性名=“num num2 num3”> 三个属性值你任意选一个都能选中
}
-->
</body>
</html>
子元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
子元素选择器：
格式：
：first-child
eg:
*:first-child{ -表示所有第一个子标签
}
p:first-child{ -表示所有第一个子标签为p
}
body>p:first-child{ -表示body第一个子标签为P
}
:fist-last -和first-child相反用法一样
：nth-child(第几个子元素)
eg:
p:nth-child（3）{ 表示的就是子标签内容是我是3的p标签
color:red;
}
：nth-child(even){ -表示偶数位odd表示奇数位
}
：first-of-type{ -表示某一类子标签的第一位
}
: last-of-type{
}
： nth-of-type{
}
-->
<P>我是1</P>
<P>我是2</P>
<P>我是3</P>
<P>我是4</P>
<P>我是5</P>
</body>
</html>
兄弟标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
兄弟选择器：
格式：
兄弟1标签 + 兄弟2标签 -表示兄弟1后一个紧挨着的兄弟2元素
兄弟1标签 ~ 兄弟2标签 -表示兄弟1后面所有的兄弟2标签元素
-->
</body>
</html>
否定伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
否定伪类选择器： -可以从已选中的元素中剔除某些元素
格式：
p：not(.zqc){
color:red;
}
-->
<P>1</P>
<P>2</P>
<P class="zqc">3</P>
<P>4</P>
</body>
</html>
css 优先级：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
css优先级规则如下从上到下一次降低
内联样式：优先级 1000
id选择器：优先级 100
类和伪类：优先级 10
元素选择器： 优先级1
通配* : 优先级0
继承的样式： 没有优先级
注意：
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较
如果选择器的优先级一样，则就近的优先级高。
并集选择器的优先级是单独计算
可以在样式格式最后面，添加一个！important，则此时该样式将会获得一个最高的优先级，将会优先与所有样式的显示
eg:
.p1{
color:red !important ;
}
-->
</body>
</html>
字体文本设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
字体颜色与设置字体：
font-size: -设置字体大小
设置字体的大小，浏览器中一般默认字体大小都是16px
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上市设置格子的高度，并不是字体的大小，
一般情况下字体都要比这个格子要小一些，也有时会比格子大
font-family: -指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同事指定多个字体，多个字体之间使用，分开当采用多个字体时，浏览器会优先使用前边的字体。
字体分类：在网页中将字体分成5大类：
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
font-style: 可以用来设置文字的斜体
参数值有：
normal.默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
注意：大部分的浏览器对斜体和倾斜不区分
font-weight: 设置字体的粗细
参数值：
normal:正常显示
bold： 加粗
该参数值也可以设置数字100-900之间的9个值
font-variant:可以用来设置小型大写字母
可选值：
normal,默认值,文字正常显示
small-caps 文本以小型大写字母显示
注意：
在CSS中还为我们提供了一个样式叫font
使用该样式可以同时设置字体相关的所有样式
使用font设置字体样式时斜体加粗大小写字母，没有顺序而且可以不写，不写就会使用默认值，但是字体的大小和字体必须写。
line-height:设置行高（行高类似于我们上学用的单线本是一行一行，线与线之间的距离就是行高）
行间距=行高-字体大小
line-height使用%表示行高的时候是相对于字体大小而言的。也可以是数字是相对字体大小的多少倍。font里面也可以设置行高格式为 font:字体大小/行高;
text-transform:可以用来设置文本的大小写
参数值：
none:该值不做任何变化
capitalize:单词的首字母大写，通过空格来识别单词
uppercase:所有的字母都大写
lowercase:所有的字幕都小写
text-decoration:这只文本的修饰
none：不做任何修饰
under_line：下划线
overlin:上划线
line-through:文本添加删除线
注意：
a标签的下划线可以通过text-decoration参数值设置为none就会去掉
letter-spacing:可以设置字符间的间距
word-spacing:可以设置单词之间的距离（实际上面就是增加了空格之间的大小）
text-align：设置文本的对齐方式
参数：
left
right
center
justify 两端对齐
text-indent:用来设置首行的缩进有正值和负值
-->
</body>
</html>
盒子模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
盒子的组成：
盒子由外边距（margin）边框（border）内边距（padding）内容区（content）组成。
盒子肉眼可见的大小有内容区+内边距和边框共同决定
margin：指的是盒子盒子之间额间距
border：是盒子的线框
padding是border和内容之间的距离
border:
设置宽度
使用width来设置盒子内容区的宽度
使用height来设置盒子内容的高度
border-width:上,右,下,左;还可以是 上,左右，下;还有上下,左右。
设置颜色
border-color:和设置宽度一样
设置框的样式
参数值：
none:默认值没有边框
solid:实线
dotted: 点状边框
dashed:虚线
double：双线
border-style:设置规则和上面的一样
注意：大部分边框的宽和样式都有默认值
简写:样式 可以通过border同时设置样式，颜色，和宽。而且没有先后顺序
border:
padding:内边距
padding-top
padding-right
padding-bottom
padding-keft
注意：内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
子元素是父元素的内容区里面
margin:盒子和盒子之间的距离
margin的auto参数介绍：
margin还可以设置为auto，auto一般只设置水平方向的margin如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
简写和上面padding和border一样
注意：
垂直外边距的重叠
-在网页中垂直方向的相邻外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
-如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素 解决方法可以使用给父元素设置borer和padding值
-->
</body>
</html>
内联元素和块元素的相互转换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
内敛元素和块元素的相互转换：
内联元素：
不能设置width和height，但可以设置水平方向的内边距padding,也可以设置垂直方向的内边距但垂直方向的内边距但是不会影响布局。
内联元素可以设置边框border,但垂直方向的边框不会影响页面的布局。
内联元素支持水平方向的的外边距不会重叠，不支持垂直方向的外边距。
将内联元素变成块元素
通过display样式可以修改元素的类型
可选值：
inline:可以将一个元素作为内联元素显示
block：可以将一个元素作为块标签
inline-block：将一个元素转换为行内块元素
-可以是一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行。
none：不显示元素，并且元素不会在页面中继续占有位置
visibility:
可选值：
visible 默认值,元素默认会在页面显示
hidden 元素会隐藏不显示（但是会占原来的位置）
-->
</body>
</html>
子元素和父元素的包含关系：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
子元素默认是存在父元素的内容区中
理论上子元素的最大可以等于父元素的内容区大小
如果子元素超过了父元素的内容区，则超过的大小会在父元素意外的位置显示,
超出的部分我们成为溢出的内容
父元素默认是将溢出内容,在父元素外边显示
注意：
处理溢出元素的方法通过overflow。
overflow:
可选值：
visible,默认值，不会对溢出内容做处理，元素会在父元素意外的位置显示
hidden 溢出的内容会被修剪，不会显示
scroll 会为元素添加滚动条，通过拖动滚动条来查看完整内容（该属性不论内容是否溢出都会加上滚动条）
auto 会根据需求自动添加滚动条（比较智能需要就加不需要就不会加）
-->
</body>
</html>
文档流:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
文档流:
文档流处在网页的最底层，他表示的是一个页面中的位置
我们所创建的元素默认都处在文档流当中
元素在文档流中的特点:
块元素：
1.块元素在文档流中会独占一行,块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
注意:
当元素高度或宽度值为auto时,此时指定内边距不会 影响可见框的大小,
而是会自动修改宽度和高度,以适应内边距
内联元素:
1.内联元素在文档流中只占自身的大小,会默认从左向右排列
2.在文档流中,内联元素的宽度和高度默认都被内容撑开
-->
</body>
</html>
浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
块元素在文档流中默认垂直排列
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值
none:默认值，元素默认在文档流中排列
left:元素会立即脱离文档流，向页面的左侧浮动
right：元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后，(float属性是一个非none的值)
元素会立即脱离文档流，元素脱离文档流以后，他下边的元素会立即向上移动
元素浮动以后会尽量向页面的左上或着右上漂浮
知道遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
浮动的元素不会盖住文字，文字会自动环绕在浮动的元素的周围
所以我们可以通过设置浮动来设置文字环绕图片的效果
在文档流中，子元素的宽度默认占父元素的全部
当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开
-->
</body>
</html>
高度塌陷问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
</style>
</head>
<body>
<!--
在文档流中，父元素的高度默认是被子元素撑开的
但是当为子元素设置浮动以后，子元素会完全脱离文档流
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷了则父元素下的所有元素都会向上移动，这样会导致页面布局混乱
所以在开发中一定要避免出现高度塌陷的问题
我们可以将父元素的高度写死,以免塌陷问题出现（但这种方式不建议使用）
解决高度塌陷的问题：
根据w3c的标准，在页面中元素都有一个隐含的属性叫Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素BFC：
1.设置元素浮动
- 使用浮动开启会导致父元素宽度丢失
2.设置元素绝对定位
3.设置元素为inlin-block
- 会导致宽度丢失
4.使用overflow
推荐overflow使用hidden
注意ie6不支持BFC但是IE6有自己类似BFC的功能属性叫做HasLayout,
使用zoom属性 zoom便是放大的意思，后边跟着一个数值，写几就表示放大几倍
结构 zoom:1;
-->
</body>
</html>
清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
我们有时候希望清楚掉其他元素浮动对当前产生的影响，这时可以使用clear来完成功能clear可以用来清楚其他浮动元素对当前元素的影响
clear可选值：
none：清除不清楚
left:清除左侧浮动元素对当前元素的影响
right:清除左侧浮动元素对当前元素的影响
both:清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
使用clear完美解决高度塌陷方案
可以直接在高度塌陷的父元素的最后，添加一个空白的div由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度.
-->
</body>
</html>
定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
定位：
- 定位值得就是将指定就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值:
static:默认值，元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位（也是绝对定位的一种）
相对定位relative：
当元素的position属性设置为relative时,则开启了元素的相对定位
1.当开启了元素的相对定为以后，而不设置偏移量时，元素不会发生变化
2.相对定位死相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会是元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
position:relative;
当开启了元素的定位（position属性值是一个非static的值时，可以通过left right top bottom四个属性来设置元素的偏移量
left:元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top:元素相对于其定位位置的上边的偏移量
bottom:元素相对于其定位位置下边的偏移量
绝对定位：
当元素的position属性值设置为absolute，则开启了元素的绝对定位
1.开启绝对定位，是元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位需要同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位（position 设置为非static都表示开启定位），则会相对于浏览器窗口进行定位
4.绝对定位会是元素提升一个层级
5.绝对定位会改变元素的性质,内联元素会变成块级元素
固定定位：
当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
它和绝对定位的不同：
1.固定定位永远都会相对于浏览器窗口进行定位
2.固定定位会固定在浏览器某个位置，不会随滚动条滚动
定位的层级问题：
如果定位元素的层级一样，则下边的元素会覆盖往上边的元素
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示（即会覆盖层级低的)
注意：
1.对于没有开启定位的设置z-index是不起作用的
2.父元素的层级再高也不会盖住子元素
这只元素的透明背景
opacity可以用来设置元素背景的透明
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
IE6不支持opacity,ie6可以使用filter:alpha(opacity=透明数值);设置透明度，需要一个0-100之间的值
-->
</body>
</html>
表格学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
tr{
background: red;
}
}
</style>
</head>
<body>
有一些情况下表格是非常的长的
这是就需要将表格分为三个部分，表头，表格的主体，和表格的底部
在html中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，用来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容永远会显示在表格的头部
tfoot中的内容永远会显示在表格的底部
注意：如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr有可能并不是table的子标签，而是tbody的子标签
之前解决高度塌陷和父子元素外边距重叠案例：
.clearfix:before,
clearfix:after{
content:'';
display:table;
clear:both;
}
</body>
<div class="box1 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<dic class="box2"></dic>
</div>
</html>
背景图片设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
背景图片：
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片元素一样大，则会将背景图片全部显示。
- 如果背景图片小于元素大小，怎会默认将背景图片平铺充满元素
- background-repeat 用于设置背景的重复性
可选值：
repeat默认值双向重复
no－repeat 不重复
repeat-x 背景图片沿水平方向重复
repeat-y
背景图片默认是贴着元素的左上角显示：
通过backgtound-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
也可以直接指定两个偏移量 水平偏移量和垂直偏移量可以为负值以像素为单位
图片的固定：
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll 默认值 背景图片随着窗口滚动
fixed 北京图片会固定某一位置，跟之前脱离文档流类似。
在做点击a标签通过伪类实现不同点击状态下不同背景背景切换时时会出现一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片是外部资源形式加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求。
但是我们外部资源并不是同时加载，浏览器会在资源被使用才会去加载资源
当我们要实现点击浮动为访问这几个状态切换背景时每个伪类都需要去加载自己的图片所以切换背景就会导致闪烁
解决办法：
可以将三个图片整合为一张图片，让后每个状态都会访问相同的图片，当需要切换背景的时候只需要该片图片的位置就行了。
backgound简写：
该属性没有顺序要求，也没有数量的要求，不屑样式就会用默认值
-->
</body>
</html>
hack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
</head>
<body>
<!--
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，
而在其他的浏览器总不需要执行，这是就可以使用css Hack来解决该问题
css hack实际上指定的是一个特殊的代码，这段代码只在某些浏览器中可以识别，
而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
注意Hack，条件hack支队iE浏览器有效，其他的浏览器都会将它识别为注释
IE10以及以上的浏览器已经不支持这种方式
语法格式为
<！--[if IE]>
<p>hello IE 6</p>
<![endif]-->
<！--[if IE 8]>
<p>hello IE 8</p>
<![endif]-->
<！--[if lt IE 9]> （lt小于,gt大于,gte大于或等于,lte小于或等于，！非）
<p>hello IE 8</p>
<![endif]-->
-->
</body>
</html>
来源：https://www.cnblogs.com/project-zqc/p/11437627.html |
发表于 2019-8-30 23:48:00