CSS学习01

CSS学习01
font-size：字号大小
该属性可以使用相对长度单位，可以使用绝对长度，推荐使用绝对长度单位像素px。相对长度单位:px像素，em相对于当前对象内文本的字体尺寸。绝对长度单位：in:英寸，cm：厘米，mm:毫米，pt:点
font-family:字体

1. 网页中普遍使用14px+
2. 尽量使用偶数数字字号，老浏览器支持奇数会有bug
3. 各种字体之间必须使用英文状态下的逗号隔开
4. 中文字体需要加引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前
5. 如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号
6. 尽量使用系统默认字体，保证任何用户的浏览器都能正常使用
   CSS注释：/选中快捷键Ctrl+//
   font-weight
   取值normal：正常的字体，相当于数值400，是默认值
   bold：粗体，相当于数值700
   bolder:定义比继承值更重的值
   lighter：定义比继承值更轻的值
   ：用数字表示文本字体粗细，取值范围：100,200,300,400,500,600,700,800,900
   font-style：字体风格
   取值：normal：指定文本样式为正常的字体
   italic:指定文本样式为斜体
   font综合写法
   语法格式：
   选择器{font:font-style font-weight font-size/line-height font-family;}
   使用font属性时必须按照上面的语法格式中顺序书写，不能更换顺序，各属性以空格隔开，其中不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用
   例子：
   h4{
   font:italic bold 14px “微软雅黑”;
   }
   类选择器命名：
7. 长名称或词组可以使用横线来为选择器命名
8. 不建议使用_来命名CSS选择器，一般_用于JS类命名
9. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
   多类名选择器：
10. 样式的显示效果跟HTML元素中类名先后顺序没有关系，受CSS样式书写的上下顺序有关
11. 各个类名中间用空格隔开
    id选择器只能使用一次，类选择器可以使用多次。通配符选择器用*表示，能够匹配页面中所有的元素。其基本语法格式如下：
    *{
    margin:0;
    padding:0;
    }
    伪类选择器
    链接伪类选择器：主要针对于a
    :link 未访问的链接
    :visited 已访问的链接
    :hover 鼠标移动到链接上
    :active 选定的链接,点击鼠标不松开时的显示状态
    注意写的时候他们的顺序尽量不要颠倒，按照lvha的顺序 记忆;lv包包 非常 hao
    一般我们不怎么使用active和visited
    链接伪元素选择器简单写法
    a{
    color:gray;
    }
    a:hover{
    color:red;
    }
    结构伪类选择器
    例子

<style>
	li:first-chid{/*选取属于其父类元素的首个子元素的指定选择器*/
		color:pink;
}

	li:last-chid{/*选取属于其父类元素的最后一个子元素的指定选择器*/

		color:purple;
}

	li:nth-chid(n){/*匹配属于其父类的第N个子元素，不论元素的类型 even偶数 odd奇数 如果使用公式n从0开始，2n就是0,2,4,6；2n+1就是1,3,5*/
		color:skyblue;
}

	li:nth-last-chid(n){/*从最后一个子元素开始计数，匹配属于其父类的第N个子元素，不论元素的类型 even偶数 odd奇数 如果使用公式n从0开始，2n就是0,2,4,6；2n+1就是1,3,5*/
		color:skyblue;
}

</style>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
</ul>

目标类选择器:选择器可用于选取当前活动的目标元素
:target{
color:red;
}
color：文本颜色

1. 预定义的颜色值，如red，green等
2. 十六进制，如#FF6600
3. REG代码 红色表示rgb(255,0,0)或rgb(100%,0%,0%)
   line-height：行间距，属性值单位有三种像素px,相对值em,百分比%，一般使用px。一般情况下行距比字号大7-8像素左右
   text-align:水平对齐方式，属性值有left左对齐（默认值）right右对齐center居中对齐
   text-indent：首行缩进 text-indent:2em;其中2em就是两个字符
   颜色半透明语法格式：
   color:rgba(r,g,b,a);其中a是透明的意思，取值范围为0-1之间，例如color:rgba(0,0,0,0.3);
   文字阴影
   text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
   h-shadow:必须，水平阴影的位置，允许负值
   v-shadow:必需，垂直阴影的距离，允许负值
   blur:可选，模糊的距离
   color:可选，阴影的颜色
   例子：text-shadow:5px 11px 3px rgba(0,0,0,0.5);
   sublime快捷方式：
4. 生成标签直接输入标签名 按tab键即可，例如 dv 然后tab 就可生成
5. 如果要生成多个相同的标签，加上即可，比如 div3就可以快速生成3个div
6. 如果有父子级关系的标签，可以用>，例如:ul>li*3
7. 如果有兄弟关系的标签，用+即可，例如div+p
   5．如果生成带有类名或id名字的div，直接写.demo或者#demo 加tab键即可