CSS:层叠样式表-----是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
css书写规范:
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
![](https://i-blog.csdnimg.cn/blog_migrate/845062c4771131cee887d14517460786.png)
行内样式
例:<div style="width:100px;hight:100px">文字</div>
内部样式表
写在头部
<style>
<div>{
width:100px;
hight:100px
}
<style>
外部样式
创建一个以.css结尾的文件
写div{
width:100px;
hight:100px
}
在内部样式头部中写入<link rel="stylesheet" href="./路径"
基础选择器
1、标签选择器:选择当前页面中所有符合标签
标签名{
属性:属性名;
}
2、id选择器
#id{
属性:属性名;
}
类选择器
3、.标签名{
属性:属性名;
}
通配符选择器--------选中所有的元素
*{
属性:属性名;
}
font-size改变字体大小
包含选择器
1、子代选择器
2、后代选择器
![](https://i-blog.csdnimg.cn/blog_migrate/6a3bc7f3c6812a438ec645cd5344085c.png)
css样表存在层叠性,后面的会把前面的覆盖掉
逗号选择器即复合选择器
![](https://i-blog.csdnimg.cn/blog_migrate/a6838214d47a09fa23546b04aa78da0f.png)
属性选择器
![](https://i-blog.csdnimg.cn/blog_migrate/8bfac504a39eb94e0ed8bf2050ed645c.png)
Input[type="属性"]------属性全称
Input[type*="]-------要选中属性中与其它属性不同的地方(属性中包含的东西)"]
Input[type^=""]----------以什么开头
Input[type$=""]----------以什么结尾
伪类选择器-----元素在不同状态下的样式
用链接举例:a:link
{
Color:pink;
}------设置点击链接前,链接的颜色
鼠标悬停时的样式
A:hover+div{
Color:pink;
}-------鼠标放在链接上,链接变颜色-----"+div"鼠标放在链接上div变色------"="表示a链接的下一个
访问之后的样式
A:visited{
Color:pink;
}-----鼠标点击链接之后,链接的颜色
获取焦点的样式
a:focus{
Color:pink;
}------按tab键获取焦点,链接变色
A:active{
Color:pink;
}--------点击鼠标不放开时链接颜色
结构伪类选择器
<style>
Ul li:nth-child(9){
Backgroud-color:pink;
}</style>-----将ul中第九行变色
<style>
Ul li:last-child{
Backgroud-color:pink;
}
</style>------最后一行变色
<style>
Ul li:nth-child(2n+1){
Backgroud-color:pink;
}</style>-----奇数行变色
"::"----伪元素,必须和content一起
----在内容前加##3#,在后加用after
Input::placeholder{
Color:pink;
}---------设置提示词的颜色
Div::selection{
Color:pink
}----------鼠标选择部分变颜色