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:水平对齐方式