CSS基础知识点

选择器

<style>
/*选择器{样式}*/
/*给谁改样式{改什么样式}*/
p  {
       color:  red;
       font-size:  **px(修改文字像素)
}
</style>
开发用展开格式
代码风格：
1.属性值前面，冒号后面，保留一个空格
2.选择器(标签）和大括号中间保留空格

标签选择器 

类选择器    差异化选择不同标签
.类名 {
     属性1;属性值1;
     ~~~
}
口诀：样式点定义，结构类(class)调用，一个或多个，开发最常用

id选择器

#id名 {
      属性1：属性值1；
      ----
}

通配符选择器

* {
      属性1：属性值1；
      ----
}

Font

Fonts属性定义按顺序书写
font-style 字体样式    italic 斜体
font-weight 字体粗细
font-size 字号大小
font-familiy  设置字体  micorsoft yahei  微软雅黑
字号和字体必须同时出现

文本颜色

预定义颜色  red green black------
十六进制   #FF0000 #FF6600----
RGB代码    rgb（255，0，0）----

文本属性

color  文本颜色
text-align  文本对齐方式
text-indent   文本缩进   em字符单位
text-decoration  文本修饰  下划线之类
text-height  行高

外部样式表

<link rel="stylesheet" herf="css文件路径"

Emmet语法

生成多个标签  加上*
父子级关系>  比如ul>li
兄弟关系+     div+p
生成带有类名或id名字的直接  tab  键
如生成div类名有顺序用自增符号  $
想要在生成标签内部写内容用  {}

复合选择器

后代选择器
元素1  元素2  {样式}
子选择器
元素1>元素2 {样式}
并集选择器
元素1，元素2 {样式}
链接伪类选择器
a:link  未访问过的链接
a:visited  选择点击过的链接
a:hover  选择鼠标经过的那个链接
a:active  选择鼠标点了但未松开的链接
：focus 伪类选择器
input:focus 选择获得光标的表单
input:focus {
backgronund-color:red;
}

元素显示模式  

块元素和行内元素

块元素：

<div> <dl> <h1>-<h6> <form> <ol> <p> <ul>
1.独占一行
2.长宽高都能控制
3.宽度默认与body一样
4.里面可以放行内或者块级元素
注意：文字类元素不能使用块级元素，<p>里面不能放div<h1>到<h6>也不能放其他块级元素

行内元素：

<a> <br> <img> <label> <select> <textarea>
1.一行内能放多个行内元素 
2.宽和高直接设置是无效的
3.默认宽度就是本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意：<a>里面可以放块级元素，单杀给<a>转换一下模式最好 

同时具有块元素和行内元素特点--行内块元素
<img/>    <input/>    <td>
1.和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2.默认宽度就是他本身内容的宽度
3.宽度，行高，外边距及内边距都可以控制（块级元素特点）

元素显示模式转化

行内元素转化为块元素  display:block
块元素转化为行内元素  display:inline 
行内元素转化为行内块元素 display:inline-block

背景

背景颜色

background-color：
默认transparent是透明色

背景图片

background-image：none|url（url）
none  无背景图 默认
url 使用相对或绝对地址指定背景图篇

背景平铺

默认情况下是平铺的
background-repeat：背景图像在纵向和横向上平铺
no-repeat ： 背景图像不平铺
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺

背景图片位置

改变图片在背景中的位置
background-position：x y；
1.如两个值都是方位，效果与顺序无关
2. 有x轴方位无y轴方位，垂直居中显示
    有y轴方位无x轴方位，水平居中显示

背景图像固定

background-attachment  ：scroll/fixed
scroll 随页面滚动
fixed 页面固定

背景属性复合

背景颜色  图片 图片地址 背景平铺  图像滚动  图片位置

背景色半透明

backgrounf: rgba(0,0,0,0.3)；可直接.3
最后一个是alpha透明度，取值范围在0-1之间