样式 :
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
}
</style>
注意点 :
1 : style标签必须写在head标签之间
2 : style标签中的type属性其实不用写,默认就是type="text/css"
3 : 设置样式时,必须按照固定的格式来设置, key: value;
文字相关属性
格式 : font-style: italic;
取值 :
normal : 默认值
italic : 倾斜
快捷键 : fs + tab键
fsn -> font-style: normal;
文字粗细
格式 : font-weight: bold;
取值 :
bold : 加粗
bolder : 更粗
lighter : 细线 默认
快捷键 : fw
文字大小
格式 : font-size: 30px;
单位: px 像素
快捷键 : fz
文字字体
格式 : font-family: "楷体";
注意点 :
1 : 如果取值是中文,需要用双引号或者单引号括起来
2 : 设置字体必须是用户电脑安装的字体
快捷键 : ff
简写样式:
font: italic bold 10px "楷体"
style和wieght可以省略
size和family不可以省略
size和family必须写在所有属性的最后面
文本属性
1 : 文本装饰属性
格式: text-decoration : underline;
underline : 下划线
line-through : 删除线
overline : 上划线
none : 什么都没有,最常见的用途是用于去除超链接的下划线
快捷键:
td : text-decoration
2 : 文本水平对其属性
格式: text-align : right;
left
right
center
3 : 文本缩进属性
格式: text-indent: 2em;
标签选择器
作用: 根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
格式:
标签名称{
属性:值;
}
注意点:
1 : 选中当前界面所有的标签,而不能单独选中某一个标签
2 : 无论选择器隐藏多深也能被选中
id选择器
作用 : 根据指定的id名称找到对应的标签,然后设置属性
格式:
#id名称{
属性:值;
}
注意点:
1 : 每个html标签都有属性id
2 : 在同一个界面中不允许id重复
3 : id名称有一定的规范
3.1 由字母 \ 数字 \ 下划线组成
3.2 id名称不能以数字开头
4 : 在企业中 如果设置样式 一般不用使用id, id一般留给js使用
类选择器
作用 : 根据指定的类名称找到对应的标签,然后设置属性
格式:
.类名{
属性:值;
}
注意点:
1 : 每个html标签都有属性class
2 : 在同一个界面中不允许class重复
3 : id名称有一定的规范
后代择器
作用 : 找到指定标签的所有后代标签,然后设置属性
格式:
标签名称1 标签名称2{
属性:值;
}
先找到名称叫做标签名称1的标签,然后在这个标签下面去查找所有名称叫做标签名称2的标签,然后在设置属性
注意点:
1 : 后代选择器必须用空格分开
2 : 后代包括儿子 孙子 ....
3 : 不仅仅可以使用标签名称,还可以使用其他选择器
子元素选择器
格式:
标签名称1+标签名称2{
属性:值;
}
先找到名称叫做标签名称1的标签,然后在这个标签下面去查找所有
`直接`子元素名称叫做标签名称2的元素然后在设置属性,也就是说直
接找的儿子,不去找孙子
交集选择器(了解)
作用 : 给所有选择器选中的标签中,相交的那部分标签设置属性
格式:
选择器1选择器2{
属性:值;
}
注意点
1 : 选择器与选择器间没有任何链接符号
2 : 可以使用标签名称 id名称
并集选择器
作用 : 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点
1 : 必须使用逗号来链接
2 : 可以使用标签名称 id名称
兄弟选择器
相邻兄弟选择器
作用 : 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点
1 : 相邻兄弟选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签
通用兄弟选择器
作用 : 给指定选择器后面所有的选择器选中的标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意点
1 : 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签,无论有没有被隔开,都可以被选中
序选择器
作用 : 同级别的第几个
first-child 选中同级别中的`第一个`标签
注意点 : 不区分类型
lase-child 选中同级别中的`最后一个`标签
注意点 : 不区分类型
nth-child(n) 选中同级别中的`第n个`标签
注意点 : 不区分类型
nth-last-child(n) 选中同级别中的`倒数第n个`标签
only-child 选中父元素中`唯一`的元素
同类型的第几个
first-of-type 选中同级别中同类型的`第一个`标签
last-of-type 选中同级别中同类型的`最后一个`标签
nth-of-type(n) 选中同级别中同类型的`第n个`标签
only-of-type 选中父元素中`唯一类型`的某个标签
nth-child(odd) 选中同级别中的所有`奇`数标签
nth-child(even) 选中同级别中的所有`偶`数标签
属性选择器
作用 : 根据指定的属性名称找到对用的标签,然后设置属性
格式
[atttibute
[atttibute=value]
作用 : 找到指定的属性,并且属性的取值等于value的标签,然后设置属性
应用场景 : 区分input属性
属性取值是以什么开头
[atttibute |=value] css2
[atttibute ^=value] css3
属性取值是以什么结尾
[atttibute $=value] css3
属性取值是否包含某个特定的值
[atttibute ~=value] css2
[atttibute *=value] css3
通配符选择器
作用 : 给当前界面上所有的标签设置属性
格式
*{
属性:值;
}
注意点 : 一般企业开发不用
层叠性
作用 : 就是css处理冲突的能力
注意点:
只有在多个选择器选中同一个标签 然后有设置了相同的属性,才会发生层叠性
优先级
作用 : 多个选择器选中同一个标签 然后有设置了相同的属性,如何层叠由优先级来确定
优先级判断三种方式
1 是否是直接选中
如果是间接选中,那么就是谁离目标标签比较近就听谁的
2 : 相同选择器
如果是直接选中,并且都是同类型的选择器,那么就是谁写在后面就听谁的
3 : 不同选择器
如果是直接选中,并且不是同类型的选择器,那么久会按照选择器的优先级来确定
id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
important
作用 : 用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的睡醒的优先级提升为最高
注意点:
1 important只能用于直接选中,不能用户间接选中
2 通配符选择器选中的标签也是直接选中的
3 !important只能提升被指定的睡醒的优先级,其他的睡醒的优先级不会被提升
4 !important必须写在分号前面
5 important前的感叹号不能丢
权重问题
作用其实很简单: 在多个id 类 标签等选中一个标签做属性设置时,就按下面的规则来判断,先判断id 在判断类以此类推
先级来确定
id > 类 > 标签
注意点 :
1 : 只有选择器是直接选中标签的才需要计算权重
div span区别
1 : div是一个容器级别的标签,可以嵌套任何标签
2 : span是一个文本及的标签,只能嵌套文字,超链接,图片
CSS元素显示模式
在HTML中所有的标签分为两类 容器及 文本及
在CSS中所有的标签分为两类 块级元素 行内元素
块级元素 : 独占一行 所有的容器级标签
行内元素 : 不会独占一行
行内块级元素
CSS转换模式
设置元素display
inline : 行内
block : 块级
inline-block : 行内块级
背景图片
background-repeat
repeat : 弄人 在水平和垂直平铺
no-repeat : 都不平铺
repeat-x : 在水平平铺
repeat-y : 在垂直平铺
背景定位
background-positon : 控制背景图片的位置
格式
background-positon : 水平方向 垂直方向;
left center right
top center bottom
具体的像素
background-positon : 100px 200px;
一定要写单位 px
精灵图
多张小图片合成一张大图片
作用 : 可以减少请求的次数,降低服务器处理的压力
使用: 配合背景图片和背景定位来找到
工具 adb work
