Internship3

Internship3

实习记录第四天

• CSS

  • CSS的发展历程
    从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

    ​ 随着html的成长，为了满足前端工程的需求，html增加了很多显示功能，html变得混乱，html页面显得用臃肿，于是css诞生了

  • CSS 网页的美容师
    CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。
    CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。
    如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师
    \没有不漂亮的女人，只有不会打扮的女人。
    \没有不好看的网页，只有不会CSS的前端。
    网页添加 CSS和不添加CSS 的对比

  • CSS初识
    CSS(Cascading Style Sheets)
    CSS通常称为CSS样式表或**层叠？**样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
    CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

  • CSS样式规则
    使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
    h1{ color: red; font-size: 25px}
    选择器(标签选择器) 属性：属性值 用分号连接
    属性=“属性值” 用空格链接
    需要注意的是
    排版结构 用段落对齐的排版书写css

• CSS字体样式属性

  • font-size:字号大小

  • 相对长度单位 说明
    em |相对与页面的尺寸
    px 像素，最常用，推荐你使用
    绝对长度单位 说明
    in 英寸
    cm 厘米
    mm 毫米
    pt 点

  • font-family:字体
    font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
    p{ font-family:“微软雅黑”;}
    1.一般网页都是14px以上的字体
    2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
    3.各种字体之间用英文状态下的逗号隔开
    4.当字体是英文是，且有空格$#的时候，用双引号括起来
    5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

  • CSS Unicode字体
    在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。Unicode,同一码，万国码，单一码，业界标准，它为每种语言的每个字符都设置一个唯一的二进制编码，以满足我们跨语言，跨平台进行文本转换，处理的要求

1.用英文表示
2.用unicode
3.一般用中文
	* 字体名称（顺序对应）
		* 宋体
		* 新宋体
		* 黑体
		* 微软雅黑
		* 楷体_GB2312
		* 隶书
		* 幼园
		* 华文细黑
		* 细明体
		* 新细明体
	* 英文名称（顺序对应）
		* SimSun
		* NSimSun
		* SimHei
		* Microsoft YaHei
		* KaiTi_GB2312
		* LiSu
		* YouYuan
		* STXihei
		* MingLiU
		* PMingLiU
	* Unicode 编码（顺序对应）
		* \5B8B\4F53
		* \65B0\5B8B\4F53
		* \9ED1\4F53
		* \5FAE\8F6F\96C5\9ED1
		* \6977\4F53_GB2312
		* \96B6\4E66
		* \5E7C\5706
		* \534E\6587\7EC6\9ED1
		* \7EC6\660E\4F53
		* \65B0\7EC6\660E\4F53

* font-wight：设置字体粗细，值有bold normal lighter 100-900（取100整倍）
* font:综合设置字体样式 ：选择器{font: font-style  font-weight  font-size/line-height  font-family;}
* 开发者工具（chrome）此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
菜单： 右击网页空白出—查看
小技巧
1.ctrl加滚轮键可以放大代码
2.可以同时查看html，css代码
3.css样式可以实时更改

* 选择器（重点）
	要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符
* 基础选择器
	* 标签选择器（元素选择器）：标签名  {属性名1:属性值1；属性名2:属性值2；}
		最大优点是快速为页面用类型的标签同一样式，也是他的缺点，不能设计差异化样式
	* 类选择器：类选择器用"."(英文点号)进行表示，后面紧跟类名.
		类名{属性名1:属性值1；属性名2:属性值2；}
		类选择器最大优点就是可以为元素定义单独或相同的样式
		1.长名称或词组可以使用中横线-为选择器命名

2.不建议使用下划线命名css选择器
1.少按一个shift键
2.区分js变量变量
3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示
* 多类名选择器：可以为标签增加多个类名，从而达到更多选择目的
1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
2.各个类名用空格连接
* id选择器：id选择器用"#"(英文点号)进行表示，后面紧跟id名
#id名{属性名1:属性值1；属性名2:属性值2；}
id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似
* id选择器和类选择器区别：id相当身份证号(不得重复，只是用一次)，类选择器相当名字（多次重复使用）最大的不同就是使用次数
* 通配符选择器：{属性名1:属性值1；属性名2:属性值2}
所有选择器作用最广的，匹配所有元素
* 伪类选择器： 伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素
类选择器用 . 伪类用 :
### 链接伪类选择器
: link 未访问的连接
:visited 、以访问的连接
:hover 鼠标悬停
:active 选定的连接
注意写的时候，顺序不要颠倒，lvha, love hate
* CSS注释
CSS规则是使用 / 需要注释的内容 / 进行注释的，即在需要注释的内容前使用 “/” 标记开始注释，在内容的结尾使用 “*/”结束。
* CSS外观属性
## color:文本颜色
color属性用于定义文本的颜色，其取值方式有3种：
## line-height:行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。

## text-align:水平对齐方式


text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：


left：左对齐（默认值）

right：右对齐

center：居中对齐

## text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度   如果是汉字的段落， 1em 就是一个汉字的宽度

## letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

## word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。



## 颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式

  



## 文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了  Shadow  影子  



​    

# sublime快捷方式

sublime可以快速提高我们代码的书写方式
## text-align:水平对齐方式