实习的Day4（学习css基础样式）上

有了css，html就可以专心做结构呈现，css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

老师特别注意提醒我们，需要注意规范，因为在一个公司里，你需要和大家合作，这时候就需要有一定的规范，这样工作效率才能大大提升。使用html需要遵从一定的规范而css亦是如此，在此献上css样式规则，具体格式如下：

h1{                 color: red;  font-size: 25px}
选择器(标签选择器)     属性：属性值 用分号连接  
属性="属性值" 用空格链接

css字体样式属性
font-size:字号大小
font-family:字体
CSS Unicode字体
font-weight:字体粗细
font-style:字体风格
font:综合设置字体样式

开发者工具
此工具是我们必备工具，如果代码出问题我们可以按“F2”或者是“shift+ctrl+i” 打开开发者工具

小技巧
  1.ctrl加滚轮键可以放大代码
  2.可以同时查看html，css代码
  3.css样式可以实时更改  

---

**基础选择器** 基础选择器分别有标签选择器、类选择器、多类名选择器、id选择器、通配符选择器、伪类选择器 **标签选择器**

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。格式为：

标签名  {属性名1:属性值1；属性名2:属性值2；}

最大优点是快速为页面用类型的标签同一样式，也是他的缺点，不能设计差异化样式。

类选择器

类选择器用"."(英文点号)进行表示，后面紧跟类名

.类名{属性名1:属性值1；属性名2:属性值2；}

类选择器最大优点就是可以为元素定义单独或相同的样式

1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	1.少按一个shift键
	2.区分js变量变量
	3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示

id选择器

id选择器用"#"(英文点号)进行表示，后面紧跟id名

#id名{属性名1:属性值1；属性名2:属性值2；}

id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似

id选择器和类选择器区别

id相当身份证号(不得重复，只是用一次)，类选择器相当名字（多次重复使用）

最大的不同就是使用次数

通配符选择器

*{属性名1:属性值1；属性名2:属性值2}

所有选择器作用最广的，匹配所有元素

伪类选择器

伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素

类选择器用 . 伪类用 :

css外观属性
color：文本颜色
line-height：行间距
text-align：水平对齐方式
text-indent：首行缩进
letter-spacing：字间距
word-spacing：单词间距

颜色半透明
设置颜色半透明有两种办法一种是设置opacity属性
opacity取值从零到一，零为透明

.aa{

    width: 250px;

    height: 250px;

    background: yellow;             

    opacity: 0.5;

    }

另一种方法，background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。

.aa{

    width: 250px;

    height: 250px;

    background-color: rgba(255,255,0,0.5);

    }

文字阴影
属性值为text-shadow
语法结构如下

div{text-shadow:5px 2px 6px #000;} 

5px代表阴影离左5px显示
2px代表阴影距离文字上2px
6px代表为阴影大小范围
#000代表阴影颜色