CSS
今明两天将对CSS层叠样式表(cascading style sheets) 进行一个初步的学习和认识,3月5日主要学习了样式表的集中编程方式,语法规则以及常用属性,3月6日将学习css的几个重要的选择器以及继承性和层叠性。
1.css规则
css规则主要由两个主要的部分组成:选择器,以及一条或多条声明
p {width: 300px;font-size: 14px;}
p:选择器-----功能:选择所有的 p标签
width/font-size:属性名
14px:属性值
根据书写位置不同,css代码有四种书写方式:内联式、内嵌式、外联式、导入式。
在HTML标签的style属性中书写css样式
<div style="width: 100px; height: 100px;font-size: 14px">1</div>
将多条进行书写,分号分隔,最后总成形成style属性。
内联式有不少缺点
- 内联式必须写在标签上,没有完全脱离HTML标签
- css样式代码让标签结构繁重,不利于HTML结构的解读
- 一个内联样式的css只能给一个标签使用,若多个标签使用相同的样式需要重复书写,大大增加代码量
在HTML文件的标签内添加一个内嵌的标签
<style type="text/css">
p {width: 300px;font-size: 5px;}
</style>
内嵌式优缺点
优点:
- 实现了样式和结构的初步分离,css只负责样式,html只负责结构
- 多个标签可用一段代码设置,相对于内联式减少代码量
缺点:
- 结构和样式并没有完全分离,代码依旧书写在HTML文件的style标签内部
- css样式并不能在其他html文件中使用
- 在css样式中如果代码太多,会导致文件头重脚轻
-
外联式
书写位置:在一个单独的扩展名为.css的文件中。书写方式和内嵌style中的代码格式一样(不需要在添加style标签了,标签属于html语法)
使用方法:先写css文件,再引用。
引入标签:
引入属性:rel(引入的外部文件和HTML之间的关系),href(路径),type(html5中可省略不写)
<link rel="stylesheet" href="ex1.css">
外联式优点多多:
- html和css完全分离
- 可以在很多html文件中使用,并且一带多,大大减少代码量
- 一个HTML文件可以引入多个CSS文件,实现一个页面中的css代码分层
-
导入式(不常用)
书写位置:在内嵌样式表
实际应用中,小型案例可以使用内嵌式css,而实际工作、大型网站项目推荐使用外联式css,内联式和导入式不推荐使用。
2.CSS书写规则
以内嵌式为例,外联同理,书写规则如下:
- 要在head标签内部加style,所有css代码必须位于style标签内
- 选择器必不可少,要先选中标签再操作样式
- css样式的属性,属性名和属性值的键值对的写法是k:v;(最后的;很重要)
- 给一个标签添加的所有样式,必须在选择器后面的{}内部罗列。
书写css代码时要注意的注意事项:
- 分号必须要有,如果不写会导致后面代码的加载错误。
- Css中所有属性与属性之间对空格换行缩进不敏感。
css添加注释:
- 书写方式:/*xxxxx*/
3.代码风格
一个老鸟的代码风格除了让你更装b老道之外,还让你的代码效率更高,更具可读性。代码首先是给人读的,其次才是给机器读的,因此你需要注意以下几点:
- 合理运用展开格式(开发过程中)和紧凑格式(上传过程中),会用网上的工具对二者进行转换
- css代码不区分大小写,但除了特殊情况外,我们建议你使用小写
- 空格规范:在选择器和大括号之间保留一个 空 格
- 属性名和属性值之间最好有个空格,也就是在冒号后面。
4.css常用属性
-
颜色名
color的几种表示方法(颜色名英文,颜色值rgb坐标,十六进制)
-
字体描述
k值是font-family,属性值必须包裹在一对"引号"中,内容为字体名称。
p{ font-family:"Microsoft Yaheis"; }
常用的中文字体有宋体(SimSun)、微软雅黑(Microsoft Yahei),常见的英文字体Arial,consolas,设置字体属性不同浏览器有自己的默认字体。
要注意字体的顺序查找机制,并且利用顺序搜索机制做好备用字体的备份工作。
p{ font-family:"fang zheng","Arial","Microsoft Yaheis" ; }
将用户设备中普遍存在的宋体和arial放到不常用的花字fangzheng后面,起到备用作用。
注意:一般来说,因为中文包内包含英文,所以一般将英文包放在前面,中文包放在后面。不过也要根据工作的实际情况来决定。
-
字号
font-size
font-size:288px;
网页中最小设置字号必须是12px,低于12px会出现兼容问题,在网页中普遍使用14px+,同时要注意尽量使用偶数字号
5.盒子实体化三属性
width
height
background-color
达到了在文字下面的一个box效果