千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

伪类选择器
a:link 访问之前的状态
a:visited 访问之后的状态
标签:hover 鼠标移入之后的状态
a:active 鼠标按下的状态
伪类选择器除了hover以外只能在a标签上使用
顺序不能颠倒,但是可以少某个状态
直接子集选择器
选择器1>选择器2{
}
优先级(权重)
四位数字表示
标签选择器 0001
类名的权重 0010
id的权重 0100
后代选择器 选择器权重之和
伪类选择符的权重为0010 如 :link :visited......
a:link{}
内联样式权重 1000
css样式
1.文字大小
font-size:16px;
默认值是16px,
最大值没有限定,
最小值一般是12px(谷歌浏览。edeg),有的浏览器最小是10px
2.字体类型
font-family:"宋体";
默认字体类型:微软雅黑
单个的字体类型,名字是单独的单词 双引号可以省略,
字体类型是一组词组的情况下,双引号必须写
字体类型是多个的情况下,类型之间用逗号隔开
font-family: "hahaha" ,"宋体","华文隶书";
先看第一个字体类型有没有,有直接显示,没有看第二个,第二个有显示没有看下一个,如果都没有的情况下显示默认值
3文字颜色
color:red;
颜色的表示方式
英文单词
#6位十六进制 == #c24c25
十六进制:取值范围0-9 a-f
rgb(255,0,0)
三原色取值范围 0-255之间
rgba(255,0,0,0.5)
最后一位表示透明度:
透明度取值范围0-1之间,0表示透明,1不透明
0.5可以简写为.5
4.文字粗细
font-weight:100|200|300|400|500|600|700|800|900|lighter|normal|bold|bolder;
正常:400|500|normal
细体:100|200|300|lighter
加粗:600|700|800|900|bold|bolder
5.文字倾斜
font-style: italic|oblique|normal;
倾斜: italic|oblique
正常:normal
区别:
Italic是指斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
6.文字水平对齐方式
text-align:left|center|right|justify;
left:默认值 从左向右
right:从右向左
center:居中
justify:两端对齐(对中文不起作用,部分浏览器不起作用)
7.文字垂直对齐方式
line-height:value;
line-height = height 垂直居中
line-height > height 文字偏下
line-height < height 文字偏上
8.文本修饰
text-decoration: line-through|underline|overline|none;
line-through:删除线
underline:下划线
overline:上划线
none:去掉
同时具有上划线,下划线,中划线
text-decoration: line-through underline overline;
9.首行缩进
text-indent:32px|2em;
32px---->文字默认是16px,缩进的是2个字
2em-----字体的2倍
可以写负数,但是不建议
文字复合属性
font:weight style size/line-height family ;
line-height family这两个属性必须要写
10.列表属性
list-style:none;----可以给ul,ol,li
11边框
border-width:1px;
border-style:solid|dashed|dotted|double|none;
边框的样式
solid:实线
dashed:虚线
dotted:d点划线
double:双线
none:没有-----适用于有边框需要去掉的时候
border-color:#000;
border: 20px solid #000;-----四个方向都有边框
上边框
border-top-width:2px ;
border-top-style: solid;
border-top-color: red;
上边框简写
border-top: 2px solid red;
下边框
border-bottom-width:2px ;
border-bottom-style: solid;
border-bottom-color: red;
下边框简写
border-bottom: 2px solid red;
左边框
border-left-width:2px ;
border-left-style: solid;
border-left-color: red;
左边框简写
border-left: 2px solid red;
右边框
border-right-width:2px ;
border-right-style: solid;
border-right-color: red;
右边框简写
border-right: 2px solid red;