今天的话学了一点css基础知识,也不算特别难,只不过稍微比HTML需要记的内容稍微多一点点;
一.初步认识
1.css分为三种样式:
1.1行内样式,也称作内联样式,它写在标签里面,
<元素标签=style"backgrouud-color:red";> </元素标签>
1.2内部样式
<style="text/css"(可省略)>
元素标签{backgrouud-color:red;
}
</style>
该样式可以添加在文档任何一个位置,但是一般都写在head标签中.
1.3外部样式
这个样式诠释了两者的分离,它一般是在外面新建的文件中写入需要的样式,然后通过链接的方式引入.
引入:<link rel="stylesheet" href="css文件的地址" type="text/css">
写入结构:p{
样式
}
二.css选择器
2.1基本选择器
2.1.1 标签选择器
如:p{
}
给某一个样式设置样式
2.1.2 ID选择器
#+ID名字{
}
给某个特有的标签设置样式,可以给该标签添加个ID属性
ID命名规则: 一般为英文字符 下划线 连字符 数字
不能为特殊字符,汉字,且数字不能开头.
2.1.3 类选择器
.+类名{
}
如果有多个标签需要被设置为统一样式,可以添加为同个类.
类的命名规则: 一般为英文字符 下划线 连字符 数字
不能为特殊字符,汉字,且数字不能开头.
一个标签可以有多个类,一个类也可以被多个标签所拥有.
2.1.4 通配符选择器
*{
}
该选择器可以选择页面中所有标签
2.2 组合选择器
2.2.1 后代选择器
如:
div div div p{
}这个时候便是选择了祖先中至少含有三个及三个以上div标签的p标签.
2.2.2 子代选择器
如:
div > p{
}这便是表示父亲为div的p标签,指向性更强
2.2.3 交集选择器
如:
div.jiao{
}这是div标签选择器和一个类选择器的交集,交集就是把两个选择器直接写在一块,中间不需要添加任何的符号.
一般是元素和类,元素和ID,ID和类,和属性.
2.2.4 并集选择器
如:
div,p,h1{
}可以任何选择器并在一起.
2.2.5 相邻兄弟选择器
如:
li + li{
}
只会是下一个相邻的兄弟.
2.2.6 通用兄弟选择器
如:
div~p{
}
此选择器为选择后面所有的兄弟,不单指一个.
2.3 属性选择器
2.3.1
[属性]{
}
选择含有该属性的标签
2.3.2
[属性=值]{
}
选择含有该属性且值为一样的标签.
2.3.3
如:
[class~=a]{
}表示class类名中包含单词a的标签.
2.3.4
如:
[class*=a]{
}表示class类名中包含a这个字母的标签
2.3.5
[class^=a]
{
}表示class类名以子字符串a开头
2.3.6
[class$=a]
{
}表示class类名中以子字符串a结尾
2.3.7
[class|=a]{
}表示类名中前缀为a,如a-bc
2.4 伪类选择器
元素标签:伪类{
}
2.4.1 link伪类
如:
a:link{
}
设置超链接中从没有被点击过的链接
2.4.2 visited伪类
a:visited{
}设置链接中被点击过的链接
2.4.3 hover伪类
元素:hover{
}
当鼠标移动到元素上便会触发
该伪类可用于所有元素.
2.4.4 active伪类
元素:active{
}该伪类在鼠标在元素上按下,但是没有抬起的这段时间内触发.
2.4.5 focus伪类
元素:focus{
}
用于可以获取焦点的元素中
2.4.6 结构伪类
如:
ul li:first-child{} ul元素下的第一个li
ul li:last-child{} ul元素下的最后一个li
ul li:nth-child(n) ul元素下的第n个li
ul li:nth-child(2n+1) 排在ul元素下第奇数个的li
ul li:nth-child(2n) 排在ul元素下第偶数个的li
ul li:nth-child(n+2) 从第2个元素开始一直到最后一个元素
ul li:nth-child(-n+3) 前三个元素
ul li:nth-last-child() 从末尾开始