、
一.CSS是什么?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS的优点:
- 使HTML专注于网页的内容,CSS专注于网页的表现
- 提供了丰富的格式化功能
- 可以针对各种可视化浏览器(主要有显示器、打印机、PDA等)来设置不同的样式
二、CSS引入方式
1.行内样式
直接在开始标签上加style属性来控制样式。例如:
<div style="color:red;">内容</div>
2.内嵌式
所有的样式都写到一个<style></style>内部,该标签放<head></head>内部。例如:
<style type="text/css">
选择器{ 样式属性名 :属性值 ; }
</style>示例:
<style type="text/css"> p{ color: #DF0101; } div{ background-color: pink; } </style>
3.外链式
所有的样式都写到一个单独的css文件里(文件后缀是 .css),通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件。
示例:
<link rel="stylesheet" type="text/css" href="css文件路径"/> <!--type="test/css"可以选择不写-->
4.导入式
所有的样式都写到一个单独的css文件里,通过在style或者css内部用@import url("css文件路径");或者@import "css文件路径";来导入外部样式。例如:
<style type="text/css"> @import url("css文件路径"); </style>
5.优先级
遵循后来者居上原则,最后加载的标签会覆盖先加载的标签,一般行内样式优先级最高。
示例:
<link rel="stylesheet" type="text/css" href="css/01.css"/>
<style type="text/css">
@import url("css/01.css");
div{
color: #DF0101;
}
</style>
</head>
<body>
<div style="color: red;">内容</div>
</body>
<!--该代码优先级从低到高 外链式<导入式<内嵌式<行内样式 ,该代码最后显示的颜色为红色-->
6. link和@import的区别
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
- link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
三、选择器
权重:类似于优先级,优先级高的样式会覆盖优先级低的样式。
1. 通配符选择器
*{
样式属性名 : 属性值 ;
...
}示例:
*{ background-color: pink; } /*常用来做元素格式化*/
2. 标签选择器
标签名{
样式属性名 : 属性值 ;
...
}示例:
p{ background-color: pink; }
3. 类选择器
.类值{
样式属性名 : 属性值 ;
...
}示例:
.in{ color: pink; }
4. id选择器
#id值{
样式属性名 : 属性值 ;
...
}示例:
#d1{ color: pink; }
5. 包含选择器
选择器E 选择器F{
样式属性名 : 属性值 ;
...
}示例:
div span{ color: pink; }
6.分组选择器
选择器E,选择器F,...{ }
div,span,p{
color: red;
}
/*不同的选择器有相同的样式*/
div #s1,
p{
color: #008000;
}
/*选中div下id为s1的元素和所有p元素*/
名称 | 选择器 | 示例 | 示例说明 | 权重 |
---|---|---|---|---|
通配符选择器 | * | * | 选择所有元素 | 0.5 |
标签选择器 | element | p | 选择所有<p>元素 | 1 |
类选择器 | .class | .in | 选择所有class="in"的元素 | 10 |
id选择器 | #id | #d1 | 选择所有id="d1"的元素 | 100 |
包含选择器 | 选择器E 选择器F | div span | 选择<div>元素内的所有<span>元素 | 权重相加 |
分组选择器 | 选择器a,选择器b | diiv,span | 选择所有<div>元素和<span>元素 |
四. CSS的长度单位
基本单位:px和em
(1)px(像素)
根据显示器分辨率的不同,像素的大小也是不同的。
(2)em,以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px。
注意:一般以font-size为准,如果没有定义font-size,则以浏览器默认大小(16px)为准。
(3)cm/mm/pt/pc
主要用在非显示器输出上,如打印。
如果网页在显示器上显示,则这些单位将转换为一定的像素显示,即长度也是依靠显示器分辨率的。
五. CSS中的颜色表达
网页中颜色采用RGB模式显示(显示器)
RGB颜色在CSS中的表达方式:
- 直接使用颜色的英文单词,如red
示例:
<div style="color:red;">内容</div>
注意:很多浏览器不支持颜色的单词表示
- 使用三色的数值,rgb(,,,)
(1)rgb(红,绿,蓝) 如rgb(255,0,0) 表示红色。
注意:数值在0~255之间
示例:
<div style="color:rgb(255,0,0);">内容</div> <!--红色-->
<div style="color:rgb(0,255,0);">内容</div> <!--绿色-->
(2)rgba(红,绿,蓝,不透明度) a表示不透明度,取值为0到1
(3)使用三色的百分比,如rgb(10%,20%,100%)
- 使用三色数值的十六进制,如#ff0000
注意:推荐使用这种方式,十六进制值前加#
示例:
<div style="color:#ff0000;">内容</div> <!--红色-->
六、字体相关样式
1. 字体大小 font-size
(单位px,em)
示例:
font-size: 2em; font-size: 12px;
2. 字体系列 font-family
设置多个字体时,多个字体间用逗号隔开。
如果设置的字体名字里有空格的,必须用引号引起来。设置多个字体,按照电脑上有哪个优先使用哪个,否则就浏览器自动选择。示例:
font-family: '宋体',"microsoft yahei"; /*宋体或者微软雅黑*/
3. 字体风格 font-style
- normal 正常 不倾斜
- italic 斜体
- oblique 倾斜
示例:
font-style: normal; /* 正常 */ font-style: oblique; /* 斜体 */ font-style: italic; /* 倾斜 */
4.字体粗细 font-weight
- normal 正常 不加粗
- bold 加粗
- bolder 粗体
- lighter 细体
- 100-900 9个层次 数值越大,字体越粗 100-300细体 400-500正常 600-900粗体
示例:
font-weight:normal ;/* 正常 */ font-weight:bold; /* 加粗 */ font-weight:bolder; /* 粗体 */ font-weight: lighter; /* 细体 */ font-weight: 400; /* 400正常 */
5. 行高 line-height
值:1.数值+单位
2. 数值(无单位) 表示倍数
示例:
line-height: 24px; /* 行高为24像素 */ line-height: 10; /* 行高为字体大小的10倍 */
6. 字体样式缩写
font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;
示例:
font: italic bold 24px/12px "宋体"; /* 表示字体风格为斜体,字体粗细为加粗,字体大小为24像素,行高为12像素,字体系列为宋体。*/ /*注:样式之间用空格隔开,两个数字之间用/隔开*/