理解CSS（1）|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天
一，CSS是什么
-
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
二，CSS基本用法
1. 内联式CSS：
<!--使用标记的style属性，在行内写css样式-->
<h2 style="color:#F36 ;font-size:14px">使用CSS修饰二级标题的大小和颜色</h2>
复制代码
2.嵌入式CSS:
<style type="text/css">
h2{
text-align:center;
}
p{
font-size:16px;
color:#3F0;
text-decoration:underline;
}
</style>
<h2>内嵌式CSS样式</h2>
<p>内嵌式，style标记 通常位于head头部中，title标记后</p>
复制代码
3. 外联式CSS：
<link rel="stylesheet" type="text/css"/ href="demo.css">
<h2>链入式css样式</h2>
<p> 通过link标记将拓展名为.css的外部样式表文件链接到HTML文档中</p>
复制代码
三，选择器
- 作用：找出页面中的元素，以便于给他们设置样式
- 选择器分类：
- 标签选择器
- 类选择器：class = "b", .b{}
- id选择器：id = "a", #a{}
- 通配符选择器：
<style type="text/css">
*{
margin:0;
padding:0;
/*清除页面默认边距*/
/*通配符选择器常用做法*/
}
</style>
复制代码
- 属性选择器：
<input value = "zhao" disabled />
//disabled表示此表单项被禁用
[disabled] {
//设置样式
}
复制代码
- 查询字符串选择器
- p[id ^= "#"]
表示p标签中所有id是#开头的
- p[id $= "k"]
表示p标签中所有id是k结尾的
复制代码
- 伪类选择器
- 与用户交互是有不同状态，对这种状态设置样式
- a:link{
}//链接样式
- a:hover{
}//鼠标悬停效果
- a:active{
}//鼠标单击不动时效果
- a:visited{
}//访问过后：
复制代码
- 组合选择器
- 例如：标签选择器与类选择器组合：
<input class = "error" value = "aa">
input.error{
}//既有input标签，又有名为error的类
复制代码
- 组合选择器
| 名称 | 语法格式 | 解释说明 | 举例 |
|---|---|---|---|
| 直接组合 | AB | 满足A且满足B | input:focous |
| 后代组合 | A B | 所有在A里面的B | nav a |
| 亲子组合 | A>B | B被A直接包裹，且B内无其他标签 | sw>p |
| 兄弟选择器 | A~B | 选中在A后且与A同级的B | h2~p |
| 相邻选择器 | A+B | 选中紧跟在A后的B | h2+p |
- 选择器组：
h1,h2,p{
}
复制代码
四，字体
1.font-famliy：字体
- 通用字体族：serif衬线体：如宋体 sans-serif无衬线体：如黑体cursive手写体：如楷体 fantasy特殊体
2. font-size:
- 关键字：small，medium，large
- 长度：ex,em
- 百分数：相对于父元素的字体大小
- font-weight：字重，字的黑重程度
- line-height：行高
五， 文本外观
- letter-spacing:字间距 (字符与字符之间的空白，允许负值,默认为normal)
- word-spacing: 单词间距(英文单词之间的间距,允许负值,默认为normal)
- line-height:行间距(行与行之间的距离， px,em,百分比%)
- text-decoration：文本修饰(none: 没有装饰 underline:下划线 overline:上划线 line-through:删除线)
- text-align:水平对齐方式(left:左对齐 right:右对齐 center:居中对齐)
- white-space:空白处理 (normal:常规 空格、空行无效,满行自动换行 per: 预留格式 保留空格 nowwrap:空格空行无效，强制文本不能换行，除非遇到换行标记
) - text-indent: 首行缩进 (px,em,百分比%)
- text-shadow:阴影效果
