1 CSS简介
CSS(Cascading Style Sheets) ,通常称为CSS样式表
语法规范:
- 所有的样式,都包含在 <style></style> 标签内。<style> 一般写到<head> </head> 内
- 注释:/* ... */
- 键值对形式,多条之间;分隔
- 字母小写
2 CSS引入方式
样式表 | 写法 | 优点 | 控制范围 |
---|---|---|---|
行内样式表 | <div style="color: red; font-size: 12px;"> </div> | 书写方便,权重高 | 一个标签(少) |
内部样式表 | <style> div { color: red; font-size: 12px; } </style> | 部分结构和样式相分离 | 一个页面(中) |
外部样式表 | <link rel="stylesheet" href="css文件路径"> | 完全实现结构和样式相分离 | 整个站点(多) |
注:
- rel 定义当前文档与被链接文档之间的关系,在这里需要指定为 “stylesheet”,表示被链接的文档是一个样式表文件
3 CSS基础选择器
选择器分类:基础、复合选择器
基础选择器 | 作用 | 特点 | 使用情况 | 语法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 多 | p {color: red;} |
类选择器 | 可以选出1个或者类名相同的标签 | 可以根据需求选择 | 很多 | .nav {color: red;} |
id选择器 | 一次只能选择1个标签 | 只能使用一次 | 一般 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 少 | * {color: red;} |
4 CSS字体属性
属性 | 表示 | 属性值 | 说明 |
---|---|---|---|
font-size | 字号 | 10px | 单位:px 像素(必须) |
font-family | 字体 | "微软雅黑" | 按团队约定来 |
font-weight | 字体粗细 | bold,normal,100-900 | 加粗是 700 或者 bold 不加粗 是 normal 或者 400,数字不跟单位 |
font-style | 字体样式 | normal,italic | 倾斜是 italic 不倾斜 是 normal(常用) |
font | 连写形式 | 按规定顺序书写,字号字体是必须 |
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahe';
/* 复合属性:简写的方式 节约代码*/
/* 顺序:font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahe';
}
</style>
- 必须保留
font-size
和font-family
属性,否则 font 属性将不起作用
5 CSS文本属性
CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等
属性 | 表示 | 属性值 | 说明 |
---|---|---|---|
color | 文本颜色 | red、#ccc、rgb(100%,0%,0%) | 16进制最常用 |
text-align | 文本对齐 | left、right、center | 设定文字水平的对齐方式 |
text-indent | 文本缩进 | 2em,em是一个字大小 | 段落首行缩进 |
ext-decoration | 文本修饰 | none、underline、overline | 添加下划线 underline 取消下划线 none |
line-height | 行高 | 30px | 控制行与行之间的距离,文字垂直居中 |
6 CSS复合选择器
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器
6.1 后代选择器
可以选择父元素里面的子元素
.class h3 {
color:red;
font-size:16px;
}
- .class 和 h3 中间用空格隔开
- .class 是父级,h2 是子级,最终选择的是h3
6.2 子选择器
简单理解就是选亲儿子元素
.class>h3 {
color:red;
font-size:14px;
}
- h3必须是.class的亲儿子,其孙子、重孙之类都不归他管
6.3 并集选择器
可以选择多组标签,同时为它们定义相同的样式
/*选择 ul 和 div 标签元素 */
ul,div {
样式声明
}
- 并集选择器通常用于集体声明
6.4 伪类选择器
- 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素
- 伪类选择器书写最大的特点是用冒号表示,比如
:hover
、:first-child
- 伪类选择器很多,比如有链接伪类、结构伪类,这里先记录常用的链接伪类选择器
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
记忆法
love hate 爱上了讨厌
a :hover {
/*鼠标经过的时候,变成了红色*/
color:red;
}
:focus
伪类选择器
用于选取获得焦点的表单元素
input : focus {
background-color:yellow;
}
6.5 复合选择器小结
选择器 | 作用 | 特征 | 使用情况 | 用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 多 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 少 | 符号是> .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 选择不同状态的链接 | 链接相关 | 少 | 重点记住 a{} 和 a:hover |
:focus选择器 | 选择获得光标的表单 | 表单相关 | 少 | input:focus |
6.6 权重计算
标签选择器 | 计算权重公式 |
---|---|
继承或者 * | 0,0,0,0 |
每个元素(标签选择器) | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个!important 重要的 | ∞ 无穷大 |
7 CSS元素显示模式
元素模式 | 常见元素 | 元素排列 | 设置宽高 | 默认宽度 | 包含 | 注意 |
---|---|---|---|---|---|---|
块级元素 | h标签,div,p,ul,li | 独占一行 | 可以 | 父容器的100% | 可以包含任何标签 | p、h标签内不能再放块级元素 |
行内元素 | <a>、<em>、<i>、<span> | 一行多个 | 不可以 | 内容的宽度 | 容纳文本或其他行内元素 | a标签可以放块级元素 |
行内块元素 | <img />、<input />、<td> | 一行多个 | 可以 | 内容的宽度 |
模式转换:
- 转换为块元素:display: block
- 转换为行内元素:display: inline
- 转换为行内块:display: inline-block
一个小技巧:单行文字垂直居中的代码
让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
8 CSS背景
给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
属性 | 作用 | 属性值 | 说明 |
---|---|---|---|
background-color | 背景颜色 | 16进制 | 默认值 transparent |
background-image | 背景图片 | none或url | url不需要加引号 |
background-repeat | 是否平铺 | repeat/ no-repeat /repeat-x/repeat-y | 默认平铺repeat |
background-position | 背景位置 | 方位名词 或者 精确单位 | 全写,写一个值 |
background-attachment | 背景附着 | scroll(背景滚动) /fixed(背景固定) | |
背景色半透明 | 颜色透明 | background : rgba(0,0,0,.3);后面必须是四个值 |
特别注意:background-position
- 参数都是方位名词,则两个值前后顺序无关,只指定一个方位名词,则第二个值默认居中对齐
- 参数是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标,只指定一个数值,是 x 坐标,另一个默认垂直居中
- 参数是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
背景简写:
background: transparent url(image.jpg) repeat-y scroll center top
body {
height: 3000px;
background-color: #ccc;
background-image: url(images/sms.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background : rgba(0,0,0,0.3);
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
background: #ccc url(images/sms.jpg) no-repeat fixed center top;
}