今天的话学了一点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() 从末尾开始