CSS应知应会

css的作用

添加页面样式，美化页面

css的引入方式

行间样式、内嵌样式、外链样式

css选择器

基础选择器

ID选择器：# 权重：100

类选择器：. 权重：10

元素选择器：div 权重：1

通配符选择器：* 权重：0

css复合选择器

后代选择器 ul li

子元素选择器 ul>li

交集选择器 li.red 选中即是li元素，又带有red类名的元素

并集选择器 div, ul, .red 同时选中这三个元素

伪类选择器 :hover

链接伪类选择器

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

css字体样式属性

font-size 字体大小

font-family 字体类型

font-weight 字体粗细

font-style 字体风格

font 复合属性，以上属性可以同时写入

css外观属性

属性	表示	注意点
color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住 添加 下划线 underline 取消下划线 none

标签显示模式 display

块级元素：display: black; 独占一行，可指定宽高，默认宽度等于父级

行级元素：display: inline; 同行排列，宽高由内容撑开，不可直接指定

行级块元素：display: inline-black; 同行排列且可以指定宽高

元素的隐藏：display：none； 可以用display: black;显示元素

块级元素可以包含行内元素，行内元素不可包含块级元素

块级标签：div h1-h6 ul ol li

行级标签：span a strong em del

元素的显示模式可以通过 display 属性相互转换

行高样式 line-height

应用较多的是单行文本居中 line-height: 容器的高度;

背景样式 background

background-color: 颜色值; 默认是透明色：transparent

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

CSS三大特性

css成叠性

• 概念：

  所谓层叠性是指多种CSS样式的叠加。

  是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

• 原则：

  • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
  • 样式不冲突，不会层叠

css继承性

• 概念：

  子标签会继承父标签的某些样式，如文本颜色和字号。

  想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

• 注意：
  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来