css学习
Posted project-zqc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css学习相关的知识，希望对你有一定的参考价值。
伪类：
<!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> <!-- 在文档流中，父元素的高度默认是被子元素撑开的 但是当为子元素设置浮动以后，子元素会完全脱离文档流 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷 由于父元素的高度塌陷了则父元素下的所有元素都会向上移动，这样会导致页面布局混乱 所以在开发中一定要避免出现高度塌陷的问题 我们可以将父元素的高度写死,以免塌陷问题出现（但这种方式不建议使用） --> </body> </html>
以上是关于css学习的主要内容，如果未能解决你的问题，请参考以下文章